What are the best practices for generating critical path CSS

[johns43992246]

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 solution]

Hi,

You may have a look if this help https://github.com/dmantsevich/aem-critical-css

or inline css can be used https://experienceleague.adobe.com/en/docs/experience-manager-core-components/using/developing/inclu...

However CDN & clientlib caching pr defer(& async) load may help in faster loading of pages as well.

Thanks

[sherinregi]

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.