Performance

Critical CSS

Critical CSS refers to the minimum CSS required to render the above-the-fold content of a page — the part visible without scrolling. Inlining critical CSS in the HTML <head> allows the browser to paint the initial view immediately, without waiting for the full CSS file to download.

Why It Matters for Shopify Stores

When CSS is loaded as an external file (which Shopify themes typically do), it blocks rendering until the entire stylesheet downloads. Inlining the styles needed for the first visible screen eliminates this blocking delay. For Shopify stores, inlining critical CSS is usually handled by the theme developer, not the merchant. However, choosing a theme that's optimized for critical CSS delivery (check PageSpeed scores) is one of the best performance decisions a merchant can make.

How to Check Your Store

Google PageSpeed Insights 'Eliminate render-blocking resources' diagnostic flags non-inlined CSS. Chrome DevTools Performance tab shows the critical CSS rendering path.

Use the free shopify speed test tool

How to Fix It

This is primarily a theme developer task. Tools like Penthouse.js extract critical CSS automatically. If you're comfortable editing theme code, inline your critical above-the-fold styles in layout/theme.liquid's <head>.

Related Terms

Check your store's Critical CSS with our free tools

Get a full audit across all 6 performance categories — including performance — in under 60 seconds.

Run a Free Store Audit