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

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

zoltankundi
Shopify Partner
14 1 23

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)

oreoorbitz
Shopify Partner
257 31 132

https://pegasaas.com/critical-path-css-generator/
https://criticalcss.com/generate

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 pagespeed consulting
https://www.upwork.com/freelancers/~01a19b6cd90193f4f6?viewMode=1&s=1017484851352698949