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

zoltankundi
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)

oreoorbitz
Shopify Partner
253 29 130

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 freelance. I specialize in speed improvement and theme development.
https://www.upwork.com/fl/orionholmes



You can also contact me directly if you prefer.