Critical CSS is a Hyper-optimization

I had a lovely chat with someone about critical CSS and optimizations. All optimizations come with tradeoffs, but many are acceptable tradeoffs. Algorithms might optimize for speed and Big-O complexity at the expense of memory. Websites might optimize for offline support at the expense of first load duration (needing to download an offline database). There are tricks and slight-of-hand to make optimizations feel better to users, but they're still there. Famously, the Instagram team makes it so your photo uploads silently in the background as you write the caption so that it's ready by the time you hit "Post". It's a neat trick!

Critical CSS is one of these tricks. You want the user to be able to see the styled page as quickly as possible, so you inline the CSS needed — typically just the site's shell and whatever is visible above the fold — in the HTML where it can be parsed before any content even has the chance to be downloaded. But folks recommend having this critical CSS be the minimum necessary.

The naïve might think "Why not just put all of the CSS in the ?" A fair question — it would ensure the entire page has the CSS it needs. But it trades another performance trick: caching. If your CSS is in a file, the browser can cache that file so it doesn't need to be loaded over the network. Any critical CSS would be downloaded from the server in the HTML every time that page is loaded (unless you're doing E-Tag or Last-Modified/If-Modified-Since cache headers).

This is a pretty big tradeoff, in my opinion, especially given the size of your CSS. It makes sense for some sites, like those that can be cached in a CDN or require very little critical CSS or SPAs that stay open for a long time.

For others sites, you're better off keeping all your CSS in its own file with a long-lived cache policy.

You have to decide if the juice is worth the squeeze, and that typically happens with benchmarks. And if your benchmarks are sensitive enough that critical CSS makes a difference, then you're probably also in the position to craft that critical CSS by hand yourself. In which case, more power to you.