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?
Solved! Go to Solution.
Topics help categorize Community content and increase your ability to discover relevant content.
Views
Replies
Total Likes
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
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
You can also try the below methods
Store Critical CSS in AEM: