I'm interested in the notion of identifying "critical" CSS that should be inlined rather than live in its own stylesheet.
I was hoping there was some principled way of identifying critical and non-critical CSS (e.g. user interaction effects like :hover would always be considered non-critical), but it looks like the library it's using just tries to render your page and do a best-effort detection on which rules are considered critical, which IMO is a little unsatisfying: https://github.com/GoogleChromeLabs/critters
If you have less than 50KB of CSS, inline it. (And if you have more than 50KB of CSS, you’re probably doing it wrong. Well, OK, maybe you’re inlining fonts too, that’s understandable. But if you have more than 50KB of other styles, you’re probably doing it wrong.)
Seriously, inlining is absurdly good for performance, even compared with a warm cache, and the threshold where external stylesheets or scripts perform better is surprisingly high, into the hundreds of kilobytes for some common markets.
The notion of critical CSS… it’s a defeatist attitude, trying to grasp back some squandered performance, rather than fixing the underlying problem.
I regret to say this is just based on casual experience and observation, not any methodical technique. I would really like someone to run with this concept and measure it more fully. I just doubt it’s going to be me.
Comments
I'm interested in the notion of identifying "critical" CSS that should be inlined rather than live in its own stylesheet.
I was hoping there was some principled way of identifying critical and non-critical CSS (e.g. user interaction effects like :hover would always be considered non-critical), but it looks like the library it's using just tries to render your page and do a best-effort detection on which rules are considered critical, which IMO is a little unsatisfying: https://github.com/GoogleChromeLabs/critters
If you have less than 50KB of CSS, inline it. (And if you have more than 50KB of CSS, you’re probably doing it wrong. Well, OK, maybe you’re inlining fonts too, that’s understandable. But if you have more than 50KB of other styles, you’re probably doing it wrong.)
Seriously, inlining is absurdly good for performance, even compared with a warm cache, and the threshold where external stylesheets or scripts perform better is surprisingly high, into the hundreds of kilobytes for some common markets.
The notion of critical CSS… it’s a defeatist attitude, trying to grasp back some squandered performance, rather than fixing the underlying problem.
I regret to say this is just based on casual experience and observation, not any methodical technique. I would really like someone to run with this concept and measure it more fully. I just doubt it’s going to be me.
To back this up I would point to https://news.ycombinator.com/item?id=32587740