How do you extract critical CSS?

[zoltankundi]

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?

[oreoorbitz]

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.