Dealing with css files create by AO

have a look at “inline & defer” to make the CSS non-render blocking @fcadminn, have a look at the AO FAQ for more info on that topic. this will probably not make the “defer unused CSS” opportunity go away, that one is still being looked in (and makes less of a perf. difference anyway).

hope this helps,
frank

Hey Frank,

That’s helped a lot Frank – for desktop has eliminated the issue completely, mobile big reduction!

The only thing is that now the page is loading without css (strange and ugly) for a second before the page loads (properly). Have you seen this before? Is there an additional way to mitigate this, or is it just a choice between both scenarios?

Cheers

The only thing is that now the page is loading without css (strange and ugly) for a second before the page loads (properly)

that means that you either left the “above the fold CSS”-field empty or that the critical CSS entered there is not good enough to render the page fcadminn, have a look at this video (not mine) for info on how to proceed;

Thanks for thank Frank, After following the video both css files were still showing as unused css even after all critical css was inlined + deferring the remainder.

I’ll leave it for now and come back to it later. Would love a simple solution to this issue that works reliably, but then again could be down to my inexperience also admittedly and others might have solved this same problem.

Thanks anyway Frank

the difficulty is (using the right tool to) extract(ing) the critical CSS. in my experience criticalcss.com offers the best results, but even there one might have to tweak somewhat to make sure the above the fold page renders correctly without the full CSS having loaded. often the issue is with JS that alters the DOM (and related styles) after the page has rendered (e.g. an image carousel).

frank