New Shopify Certification now available: Liquid Storefronts for Theme Developers

How do you extract critical CSS?

Shopify Partner
14 1 22

I have a theme.css that's almost 1 MB, but evidently most of it isn't used above the fold. So I'd like to load the critical parts and defer the rest.


Is there a shopify specific way to deal with this situation? If there isn't a standard way, what tools do you use or recommend?

Reply 1 (1)
Shopify Partner
229 27 126

Be sure to generate diferent CSS for diferent templates, or you'll run into issues, also you'll need to update critical CSS whenever you update your main CSS.

See my footer for a enterprise solution for implementing critical CSS, and other optimizations.

Available for freelance. I specialize in speed improvement and theme development.

If your looking for a pagespeed solution for your Website, take a look at: