What are the best practices for generating critical path CSS

Question

Hello, I was wondering if there are any recommended approaches for creating critical path CSS so your each page could use preloaded styles to render above the fold components on first paint? I have looked at some services and also some open source projects such as
https://github.com/pocketjoso/penthouse

I am wondering if there is a way one could generate the CSS as part of either the AEM workflow or in a continuous integration where you crawl the page and generate the CSS and then somehow install content package containing the critical path CSS. Make sure the headlibs sly tags use a page property to include that critical path CSS. Is there already some feature like this OOB that I have not seen?

MukeshYadav_ · Accepted Answer

Hi,You may have a look if this help https://github.com/dmantsevich/aem-critical-cssor inline css can be used https://experienceleague.adobe.com/en/docs/experience-manager-core-components/using/developing/including-clientlibs#inlining However CDN & clientlib caching pr defer(& async) load may help in faster loading of pages as well. Thanks

sherinregi-1 · Answer

You can also try the below methods Puppeteer: For crawling and simulating page rendering in headless browsers.Webpack Plugins: Webpack plugins can be configured to generate critical CSS as part of your build process.Store Critical CSS in AEM:Once generated, the critical CSS can be uploaded to the DAM or stored as a client library in AEM. This allows you to manage the CSS within AEM and reference it in your components.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded