# Critical CSS Extraction deep dive

### What is Critical CSS?

[Critical CSS ](https://web.dev/articles/extract-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.

<figure><img src="https://154471318-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPf5QlibAKQnTygXuMIzw%2Fuploads%2FzMWzLYLGOvxa95I44Jao%2Fimage.png?alt=media&#x26;token=0118317f-18c8-45f3-84b8-f2c097127169" alt=""><figcaption></figcaption></figure>

### 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.&#x20;

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.&#x20;

<figure><img src="https://154471318-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPf5QlibAKQnTygXuMIzw%2Fuploads%2FjjkXQG6OtJxfT9uzGdgz%2Fimage.png?alt=media&#x26;token=31d42dda-4d5d-47b6-9a96-49c163ab0654" alt=""><figcaption></figcaption></figure>

### 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? <a href="#site-look-broken-after-this-feature" id="site-look-broken-after-this-feature"></a>

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.

<figure><img src="https://154471318-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPf5QlibAKQnTygXuMIzw%2Fuploads%2FDaXKT2DYCDH7XCaia5FB%2Fimage.png?alt=media&#x26;token=e7851dd2-d275-4480-b07a-e394ba251030" alt=""><figcaption></figcaption></figure>

<br>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avada.io/seo-suite-help-center/knowledge-hub/critical-css-extraction-deep-dive.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.