> For the complete documentation index, see [llms.txt](https://help.appplaza.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.appplaza.app/speed-optimizer/speed-up/critical-css.md).

# 🎨 Critical CSS

{% hint style="info" %}

### Who can use this feature?

Critical CSS is available on the **Expert** plan.
{% endhint %}

### What is Critical CSS?

Your store loads a big stylesheet with rules for the entire page — every section, every popup, every footer link. Normally the browser has to download the whole thing before it can show anything.

Critical CSS pulls out just the styles needed for the top of the page (what customers see when they first land). That tiny slice loads instantly so your page appears right away. The rest of the styles load quietly in the background.

### Why use Critical CSS?

* **Faster first paint** — your page appears right away instead of after the full stylesheet downloads.
* **Better Core Web Vitals** — improves perceived load speed and FCP/LCP, which Google rewards.
* **No visual change** — customers see the same design; it just renders sooner.
* **Set and forget** — turn it on once and apply; the styling split happens automatically.

### ⚙️ How to use Critical CSS

#### Step 1: Open Self-optimize

Go to **Speed up → Self-optimize**.

*\[Screenshot: Speed up page with Self-optimize tab open]*

#### Step 2: Turn on Critical CSS

Turn on **Critical CSS**.

*\[Screenshot: Critical CSS toggle switched on]*

#### Step 3: Apply to your theme

Click **Speed up now** and pick a theme to apply changes.

*\[Screenshot: Speed up now button and theme selection modal]*

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

To check it's working, look in your theme code for `preload` tags on the stylesheets.

*\[Screenshot: theme code showing preload link tags]*

### 📌 Merchant Notes

* Your theme has to be **published** before Critical CSS can run.
* Always click **Speed up now** after turning this on to apply the changes.
* This feature requires the **Expert** plan.
* For an overview of all optimization features, see **Speed up**.

Contact us in live chat if you have any problems.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://help.appplaza.app/speed-optimizer/speed-up/critical-css.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.