Autoptimize & Elementor Pro

I’m using Elementor Pro page builder and for each of the pages that I have created a different autoptimize_3b0e3b52dedf32695834850deff7ae57.css file is been created as well.

do you mean each page has a different autoptimized CSS file (ie. the “random” string in the filename is different each time? In that case you’ll have to exclude the specific CSS that is busting AO’s cache. Try deactivating “also aggregate inline CSS” first. If that does not work, you’ll have to look into the HTML of an un-autoptimized page and find what file you have to exclude (you can try adding wp-content/cache, wp-content/uploads to the comma-separated CSS optimization exclusion list).

to fix this I have generated “above the fold CSS” with Critical Path CSS Generator

well, if the issue is a different AO’ed CSS file on each page, then doing “inline & defer” will help hide that problem.

for each of the pages and copy it to the “Inline and Defer CSS” box.
This is solving the issue, but as a result, I now have a lot of code as all the the pages getting all other optimized css as well.

the better solution would be to either install the https://wordpress.org/plugins/per-page-add-to/ plugin or to use to the “Autoptimize criticalcss.com power-up” which you can add to a paying subscription at https://criticalcss.com/ and which allows you to create rules to inject specific critical CSS for types of pages (blogpost, page, archive, home pages, …) or for specific pages.

hope this helps,
frank