Let's get critical: inline CSS a must have?

In a time where Core Web Vitals is becoming more popular due to the upcoming Google ranking update (May 2021), more organisations like to use clickbait titles to attract readers and (obviously) potential customers. Critical CSS technique is part of this. Even Magento introduced CSS critical path as part of version 2.3.3.

Such increasing focus on pagespeed obviously is a good thing, but the benefits of optimizing should outweigh the costs for website developers or clients. So, here is a nuanced take on critical CSS.

Critical CSS won't improve your Core Web Vitals

Such heading could actually be clickbait as well. However, let's look at the impact of critical CSS and Core Web Vitals from a technical perspective:

• Critical CSS will improve First Contentful Paint metric (FCP) and thus perceived performance (when implemented correctly);
• However, the FCP metric isn't part of Core Web Vitals;
• Moreover, browsers already continue parsing HTML in case of render blocking CSS;
• So, critical CSS alone isn't likely to improve Core Web Vitals metrics.

Regressed Core Web Vitals

Let's look at critical CSS from another perspective:

• Most critical CSS implementations result in more layout shifts due to incomplete CSS, negatively impacting your Core Web Vitals as CLS will increase;
• Additionally, lazyloading of all other CSS is often still done too aggressively as rel=preload is being used;
• This has the risk of negatively impacting other metrics, such as LCP (actually part of Core Web Vitals) and onLoad metric. You might have learned before that you should use preloading with care.

preload fetches files very early, at the highest priority, potentially deprioritizing other important downloads, and that may be higher priority than you actually need for non-critical CSS.

filament group

So, instead of improving anything at all, chances are you might end up having a worse CLS and LCP score, putting you further away from passing Core Web Vitals and resulting in more development hours.

So, beware of what you're reading and be sure to test the outcomes yourself. Especially as critical CSS is one of the pagespeed optimizations which might take quite a bit of time.

How to actually do critical CSS

How beneficial critical CSS strategy will be, also depends on your audience and other pagespeed best practices. For example, if you aren't using a CDN, critical CSS might keep FCP and user engagement as low as possible. If your typical user doesn't have a short attention span or mostly is just browsing, critical CSS could be a very good approach.

If you consider implementing it, be sure to:

• use media=print to lazyload CSS less aggressively:
  <link rel=stylesheet href="/path/to/my.css" media=print onload="this.media='all'">
• sounds weird right? Well, all browsers will download this file (browsers do this so that it is even there when printing while being offline);
• then, on load, the print stylesheet is changed to a CSS for all media types: you just properly lazyloaded your CSS;
• and it won't deprioritize other important downloads!

Critical CSS on Performance Planet

Last year, I had the opportunity to write an article for perf planet's yearly performance calendar (each year in December). My pick of the year? Critical CSS.

So, if you want more code examples to go with this article or you would like to learn more about my critical CSS approach, then be sure to head over to perfplanet.com.