Unfolding Critical CSS
JP de Vries

I’m surprised you haven’t got many responses to this article.

CriticalCSS is something that I’ve been HUGELY in favour of since it was first suggested through the Filament Group (citation needed). Since then I’ve showed clients many times how much faster we can make their website appear by loading the Critical CSS in the head…. although I leave off the how and just show them the results.

Your point about the 20kb of additional critical CSS of subsequent page requests is a really good argument, that can really add up over many visits. I will say though that the idea is to get the first part of the “fold” within the first 14kb of the entire HTML document, so we’re not really talking about 20kb of additional content (although your argument still holds fast just with less kb).

The better approach is to send the critical CSS in the head through on the first visit, download the full CSS file, set a cookie, and then include the <link> tag back in the head to replace the critical CSS. This does require some configuration on what the server is generating and might not be as straight forward for some sites, and it can have additional complications around CDN’s and caching URI’s as well…. but then the web is just getting more and more complicated these days.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.