Critical CSS Extraction deep dive

Improve your First Contentful Paint (FCP) with Critical CSS Extraction

What is Critical CSS?

Critical CSS extraction is a technique where we only inline the necessary CSS which is needed to paint what visible in the current page view. In order to paint the site content, the browser needs HTML and CSS first.

Normally, the Critical CSS technique would be implemented on as many pages as possible. However, we are in the world of eCommerce, the utmost important pages are just Home, Product, Collection, Cart, and Checkout. So, our app extracts and inlines critical CSS for home, collections, and product pages to improve the First Contentful Paint of your store. Visitors will be more patient seeing the content of the page revealed as soon as possible and get a better experience.

Why need Critical CSS in Shopify?

As we mentioned earlier, the website cannot be painted without the CSS. Most of the themes on the market will have one big CSS file containing all the most important CSS, which is used throughout the site, such as theme.css, base.css, vendor.css, main.css, or styles.css.

Unlike many high-standard themes, Shopify stores these days are still using many out-of-date themes with heavy main CSS theme files, some over 50KB. Since the page needs the main theme CSS to load the First Contentful Paint, it is quite coherent to see that when the CSS main chunk is heavy, or bundled with unused CSS lines, it poses a challenge for the browser to take time and download the file. As a result, the FCP paint has been affected by slow downloading and parsing of the main CSS. During that time, the page will remain blank, causing the customer to wonder if there is anything wrong with the website.

It depends on how large the main CSS file size is that decides how much impact this optimization technique can deliver. If the CSS file is around 5–10kb, then there would be no such difference made. But it ranges from 20–50kb; the impact can be noticeable, over 50kb, then the impact can be quite positive.

If you see a site's main CSS is ~ 50kb, then you definitely should give this technique a try.

However, one important thing is though. If we add the critical CSS to the HTML, then that would be fine, right? Not yet, we need to lazy load the BIG chunk main CSS. The web.dev recommends a developer delay all render-blocking CSS files. That seems a bit risky. Meanwhile, only a big main chunk of CSS of the theme impacts the loading of the page, so by default, our app only defers the following CSS files, which are commonly found in theme code.

What about other CSS files?

If you want to implement Critical CSS to other CSS files, we recommend reaching out to our Technical Support to implement further optimization work. We need to audit and see if deferring a CSS file will cause any trouble to the store or not.

FAQs

Site look broken after this feature?

You can check if the Avada Critical CSS app embed is enabled or not. It may be that the CSS is lazy loaded already, but critical CSS is not on the page. Make sure both things work: critical CSS inline and the deferral of the CSS files.