🎨 Critical CSS

Load only the styles needed for the part of the page customers see first — so they don't stare at a blank page while everything else downloads.

Who can use this feature?

Critical CSS is available on the Expert plan.

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.

Last updated 3 days ago