CSS loading and Critical CSS

A super fast website often involves inlining your critical CSS while lazy loading the non-critical CSS. You understand what that means, but you’ve got a CMS-based website with many templates and hundreds or more (server rendered) pages but no simple switch or plugin to “Turn on Critical CSS”. This talk will show you how to marry Critical CSS with a site like yours to produce webpages that load quickly and get your green scores in your performance monitors.

We’ll look at an end-to-end solution that we have evolved and battle tested over the years at Miranj. I’ll cover identifying target templates, leveraging the Critical & Penthouse libraries 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.