CSS loading and Critical CSS

CSS loading and Critical CSS

Solving for CSS loading optimizations

Prateek Rungta

Prateek Rungta

@rungta

Critical CSS for CMS-based Server Rendered Websites

Submitted Sep 2, 2021

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.

Comments

{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}