Critical CSS for CMS-based, Server-rendered Websites

CSS loading and Critical CSS

Online · Sep 2021

Our sites have undeniably grown in complexity over the years. Each year we send more data, show bigger images and process lots more JavaScript per page than the year before, growing steadily for at least the last decade and outpacing the gains we’re making in computing and network capacity. The bloating of the web hasn’t gone unnoticed though — sites take their own sweet time to load, eat through data allowances, drain out the battery and bring the computer down to a crawl. Thankfully, the web community realises and acknowledges the problem. Performance is no longer an afterthought. Yet it is no easy band-aid either. Performance is impacted by a multitude of factors, so achieving success in this domain requires a multitude of solutions.

The folks at Hasgeek recently put together an event focused on Critical CSS (under the JSFoo(!) banner) and we got on stage to share how we approach and implement this technique on sites we build at Miranj.

Critical CSS for CMS-based, Server-rendered Websites on Vimeo.

We look at an end-to-end solution that we have evolved and battle tested over the years. Starting with a primer on Critical CSS and its place in the larger performance pie, I go over a 4‑part strategy to introduce Critical CSS generation and delivery to a CMS-based website. We look at some performance metrics impacted by Critical CSS, cover identifying target templates and page selection, leveraging the Critical library to extract critical CSS, automating the extraction process using Gulp, reducing response size for repeat visitors, and getting this entire system to work with the caching layer(s) that you may already be using.