Critical CSS in Shopify: eliminate render-blocking CSS
Critical CSS in Shopify in short
Critical CSS is a collection of CSS rules needed for first rendering. These rules are placed inline in the head of the page so the browser can start rendering without waiting for external CSS files to download.
Shopify does not support automated critical CSS. It has excellent infrastructure (2025 Web Almanac data shows Shopify leading all ecommerce platforms with 95% good TTFB and 92% good LCP on desktop), but only 48% of Shopify stores pass all Core Web Vitals on mobile. Render-blocking CSS is one of the main reasons. The 2025 Web Almanac found that 85% of mobile pages still fail the render-blocking resources audit.
Last reviewed by Arjen Karel on March 2026
What is critical CSS?
All modern browsers block rendering until external CSS files have been downloaded and parsed. When a page loads one or more CSS files, rendering can easily be blocked for 100ms or longer.
Critical CSS solves this by extracting only the CSS rules needed to render the visible part of the page (above the fold) and placing them inline in the <head>. The browser can start rendering immediately, while the full stylesheets download in the background. This directly improves the First Contentful Paint (FCP) and Largest Contentful Paint (LCP).
The modern approach: inline_asset_content
If your theme uses separate CSS files per section or component (like Shopify's Dawn theme and most Online Store 2.0 themes), you can use the inline_asset_content Liquid filter to inline CSS directly from your asset files:
<style>
{{ 'section-hero.css' | inline_asset_content }}
</style>
This inlines the contents of the CSS file as a <style> block, eliminating the render-blocking request entirely. You can also conditionally inline CSS only for above-the-fold sections:
{%- if section.index0 < 2 -%}
<style>
{{ 'section-hero.css' | inline_asset_content }}
</style>
{%- else -%}
{{ 'section-hero.css' | asset_url | stylesheet_tag }}
{%- endif -%}
Sections with an index below 2 (the first two sections on the page, which are almost always above the fold) get their CSS inlined. Everything else loads as a regular stylesheet. This is the approach I recommend for modern Shopify themes.
The classic approach: generate and inline critical CSS
If your theme uses one large stylesheet (common in older themes and heavily customized stores), you need to extract the critical CSS yourself. This is a six-step process.
1. Duplicate your theme
When editing the core behaviour of a template in Shopify, always work on a copy first. Navigate to your current theme via 'Online Store' > 'Themes' and duplicate it by clicking 'Actions' > 'Duplicate'.
2. Generate critical CSS
I use the Critical Node.js module in combination with manual adjustments. That takes some effort, but it produces the best results.
If that is too technical for you, use an online generator. Our own Critical CSS Generator does this for you. Enter your URL, copy the generated critical CSS, and proceed to the next step.
3. Upload critical CSS
In your duplicated theme, navigate to the snippets folder and create a new file called critical-css.liquid. Wrap the generated CSS in <style> tags and paste it in your new file.
4. Edit the layout file
Open theme.liquid in the Layout folder. Two changes are needed.
First, render the critical CSS snippet in the <head>:
<head>
{% render 'critical-css' %}
Note: Shopify deprecated {% include %} in favor of {% render %}. If your theme still uses include, it works but you should migrate.
Then change the existing CSS references to load in the background. The cleanest pattern (used by Shopify's own Dawn theme) is the media="print" trick:
<link
rel="stylesheet"
href="{{ 'theme.scss.css' | asset_url }}"
media="print"
onload="this.media='all'; this.onload=null;" />
This tells the browser to treat the stylesheet as a print stylesheet (non-render-blocking) during initial load, then switch it to media="all" once downloaded. Your critical CSS renders the page immediately while the full stylesheet loads in the background. This media="print" approach replaced the older rel="preload" pattern because it is simpler and needs no <noscript> fallback.
5. Test the new theme
On the theme page click 'Actions' > 'Preview' to test the copied theme. Pay particular attention to the Cumulative Layout Shift (CLS). Incomplete or incorrect critical CSS causes a flash of unstyled content where elements render without their final styles, then jump into position once the full CSS loads. That is layout shift.
Run PageSpeed Insights on the preview URL and compare FCP and LCP before and after. You should see a clear improvement in both. For ongoing monitoring after you go live, track your field data with Real User Monitoring to verify the improvement holds for real visitors.
6. Publish the new theme
Navigate to Themes in the left menu under 'Online Store' and under 'Actions' select 'Publish' for your new theme.
Limitations you cannot control
Shopify forces content_for_header into the <head> of every page. This injects analytics scripts, app scripts, and other platform code that you cannot defer or modify. Every installed Shopify app can add scripts through this mechanism. This is an unavoidable render-blocking cost, which makes optimizing everything you do control (your CSS, your fonts, your own scripts) even more important. Uninstalling unused apps is one of the most effective things you can do.
Another limitation: Shopify does not allow reading or sending cookies in the Liquid editor. Ideally you would only serve critical CSS to first-time visitors and serve the cached full stylesheet to returning visitors. That is not possible on Shopify. Still, the speed gain from critical CSS makes it worth it. The median Shopify store on mobile has an LCP of 2.26 seconds according to Shero Commerce's 2025 benchmark, right at the edge of the 2.5 second threshold. Shaving even 200ms off that by eliminating render-blocking CSS can be the difference between passing and failing Core Web Vitals.
What else can you do?
Critical CSS is one piece of the puzzle. For a complete Shopify optimization strategy, see our Core Web Vitals guide for Shopify. Other high-impact wins include preloading your LCP image, self-hosting your Google Fonts, and understanding resource prioritization. Shopify also supports Speculation Rules for instant page navigations and 103 Early Hints for preloading resources before the HTML even arrives.
If you are still fighting unused CSS warnings, tackle that first. Removing CSS you do not need is always better than inlining CSS you do.
Performance degrades the moment you stop watching.
I set up the monitoring, the budgets, and the processes. That is the difference between a fix and a solution.
Let's talk
