Autoptimze CSS files and render blocking

Ah, I seem to have missed this one;

So yes, all AO’ed CSS-files should be preloaded when “inline & defer” is active, check the HTML source to make sure. It is possible GPSI still complains about a file even if preloaded, if it contains CSS that is needed to render the above-the-fold page anyway, which would mean the “critical CSS” is not complete.

hope this clarifies,
frank

OK thanks for that. But to be clear, I don’t have ‘inline & defer’ enabled. I have ‘inline all CSS’ enabled. How would that change things? Can I expect all Autoptimize CSS files to be preloaded? Or might GPSI still complain about a file?

ah, if you “inline all CSS” then the CSS that matches the CSS optimization exclusions will not be inlined and will not be preloaded either. easiest fix (if possible) is to adapt your CSS opt. exclusion ??

do take into account that inline all CSS has some serious disadvantages (much larger HTML, meta-tags pushed down and not ‘readable’ for e.g. the Facebook scraper, non-cacheable CSS, …) though.

>> ah, if you “inline all CSS” then the CSS that matches the CSS optimization exclusions will not be inlined and will not be preloaded either. easiest fix (if possible) is to adapt your CSS opt. exclusion ??

OK understood. But when I ‘inline all CSS’ and leave “Exclude CSS from Autoptimize:” as default, should I expect all Autoptimize CSS files to preload? GPSI is still reporting one Autoptimize as ‘render blocking.’

>> do take into account that inline all CSS has some serious disadvantages (much larger HTML, meta-tags pushed down and not ‘readable’ for e.g. the Facebook scraper, non-cacheable CSS, …) though.

Right O, I did indeed see those warnings. My site is relatively small, and has relatively little traffic. So for now, I’m hoping ‘inline all CSS’ is safe. But moving forward, is there a way (or ways) to check if/when ‘inline all CSS’ *does* indeed to begin to cause issues?

But when I ‘inline all CSS’ and leave “Exclude CSS from Autoptimize:” as default, should I expect all Autoptimize CSS files to preload?

there is no preloading when “inline all css” is active no; most CSS is inlined, excluded CSS is loaded normally (so indeed render-blocking).

But moving forward, is there a way (or ways) to check if/when ‘inline all CSS’ *does* indeed to begin to cause issues?

well, those issues are there already actually, doesn’t matter if your site is small or not ??

OK I’m slowly getting there ??

>> most CSS is inlined,

So does that apply to CSS files belonging to Autoptimize, e.g. autoptimize_single_ec307c1928bcd3f7b7f9ac586f6d7fae.css? Or should that file be loaded via a <link> tag? What I’m seeing is that the file is loaded via a <link> tag, and is not preloaded. Just wondering if that’s expected or not. Earlier you mentioned a CSS file may not be preloaded if, “…it contains CSS that is needed to render the above-the-fold page anyway…” But does this particular Autoptimize CSS file contain above the fold CSS? I’m not sure on that.

>> well, those issues are there already actually, doesn’t matter if your site is small or not ??

Right O. So are these the main issues with inlining all css:

* non-cacheable CSS
* larger HTML
* meta-tags pushed down

I had a look at your FAQ, and it seems to mention the first two only.

the autoptimize_single_*.css file is an excluded file (which AO minifies because the original filename does not indicate it is minified already), so it’s not inlined but linked in the normal manner, indeed not preloaded. when using “inline all CSS” no CSS will be preloaded and it does not bother about “above the fold” or not.

I had a look at your FAQ, and it seems to mention the first two only.

maybe I should add it then ??

>> the autoptimize_single_*.css file is an excluded file

Ah OK, that answers my question. Since I didn’t see it in the ‘excluded’ field, I didn’t realize think it was excluded. OK then, thanks for clarifying. I think I’m all set now.

We can consider this resolved.

Actually wait, what about that last question I asked, about the effects of ‘inline all CSS?’ Specifically, are these the main issues with inlining all css:

* non-cacheable CSS
* larger HTML
* meta-tags pushed down

Are those indeed the main issues I should keep in-mind when inlining all CSS?

Are those indeed the main issues I should keep in-mind when inlining all CSS?

yes ??

OK sounds good. Thanks for all the help!