Question

I'm working on using the critical CSS feature now available in M2 currently, but a little uncomfortable with the implementations I've seen, and wondering if anyone has developed a reliable approach which would be configured into a deployment pipeline? The approaches I've seen so far involve using e.g Penthouse to scrape a live site to grab critical CSS from key pages. I'd thought that, while Penthouse etc could be instructive as to what's critical, manually defining a subset of Less partials which compile to the critical.css file would be perhaps a more solid approach, however, this could be misunderstanding how the process works! This is the road I'm going down but would be interested in any pitfalls experienced by other devs in their implementations.

Work in progress being e.g -- web/css/source/critical

Subset of global styles deemed to be critical, so e.g header, branding, typography etc (plus product/category critical styles as required)

-- This subset is compiled to the critical CSS file

Therefore, no scraping involved other than to help potentially inform what needs to go in this subset of Less files.

Appreciate this may be a little bit open for a SE post, so happy to retract it if so.

No correct solution

Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top