How can I extract and load critical CSS in a large theme file?

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
253 29 130

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.

You can also contact me directly if you prefer.