# Critical CSS for CMS-based, Server-rendered Websites


- Presented on: 24-Sept-2021
- Event: CSS loading and Critical CSS
- Location: Online
- Slides: <iframe class="speakerdeck-iframe" style="border: 0px none; background: rgba(0, 0, 0, 0.1) padding-box; margin: 0px; padding: 0px; border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 40px; width: 100%; height: auto; aspect-ratio: 560 / 314;" src="https://speakerdeck.com/player/7f34a3c3001c42f489ba25c533c98903" title="Critical CSS for CMS-based Server-rendered Websites" allowfullscreen="true" data-ratio="1.78343949044586" frameborder="0"></iframe>
- Video: <iframe src="https://player.vimeo.com/video/620571591" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
- Tags: Performance, Web Development
- URL: https://miranj.in/blog/2021/critical-css-for-cms-websites


Our sites have [undeniably][web] grown in complexity over the years. Each year we [send more data][bytes], [show bigger images][img] and [process lots more JavaScript][js] 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.

[web]:https://httparchive.org/reports/state-of-the-web "Report: State of the Web"
[bytes]:https://httparchive.org/reports/page-weight#bytesTotal "Report: Page Weight - Total Kilobytes"
[img]:https://httparchive.org/reports/state-of-images "Report: State of Images"
[js]:https://httparchive.org/reports/state-of-javascript "Report: State of JavaScript"

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

[event]:https://hasgeek.com/jsfoo/css-loading-and-critical-css/ "CSS loading and Critical CSS"
[jsfoo]:https://hasgeek.com/jsfoo "JSFoo"
[gt]:https://www.guidingtech.com/ "Guiding Tech"
[obv]:https://obvious.in/ "Obvious"

<div class="stretch clearfix" style="clear: both"><div class="embed-16-9">
<iframe src="https://player.vimeo.com/video/620571591?h=36464b3a2f&title=0&byline=0&portrait=0" loading="lazy" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
</div></div>

<p class="caption"><a href="https://vimeo.com/miranj/critical-css-for-cms-websites">Critical CSS for CMS-based, Server-rendered Websites</a> on <a href="https://vimeo.com">Vimeo</a>.</p>

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][critical npm] 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.

[gulp]:https://gulpjs.com/
[critical npm]:https://github.com/addyosmani/critical "addyosmani / critical"