# 🧩 Critical CSS

{% hint style="info" %}
**Who can use this feature?**\
This feature is available for **Enterprise users**.
{% endhint %}

### What is Critical CSS?

Critical CSS helps your page load faster by identifying and loading only the essential CSS needed to render the visible part of the page (above the fold).\
Other CSS is loaded later, ensuring quicker initial rendering and a smoother user experience.

***

### Why use Critical CSS?

* Prioritizes key visual elements for faster first paint
* Significantly improves **First Contentful Paint (FCP)**
* Reduces render-blocking styles
* Helps pass Core Web Vitals and improves SEO performance

***

### 🎮 Try it in action

{% embed url="<https://app.arcade.software/share/Xf2n6T9NP91Kb2nhQt4C>" %}

***

### ⚙️ How to Set Up Critical CSS

#### Step 1: Enable the feature

1. Go to **Avada SEO Suite > Speed Up > Custom > Settings**
2. Find **Critical CSS** and toggle it ON

#### Step 2: Apply changes

3. Return to **Speed Up Now**
4. Select your theme and click to optimize

#### Step 3: Verify it's working

**A. In theme code**

* Go to **Online Store > Themes > Actions > Edit Code**
* After running optimization, check your `.liquid` files
* You’ll see a `preload` code snippet automatically added

**B. On your storefront**

* Visit your store frontend
* Check your **FCP** score using Google Lighthouse or PageSpeed Insights
* If the feature is active, FCP should be significantly improved

***

{% hint style="info" %}

#### 📌 Merchant Notes

* Always run **Speed Up Now** after enabling the feature to apply changes to your chosen theme
* Make sure that your theme is published
* Look for `preload` tags injected into `.liquid` files — these help load critical CSS faster
  {% endhint %}


---

# 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/site-speed-up/speed-up-custom-mode/critical-css.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.