cag8f

OK thanks. We can consider this resolved.

OK thanks. To give some more reason why I’d like this issue resolved, Google’s PageSpeed Insights reports my slider image as not being scaled properly at mobile screen widths (screenshot). I believe the reason is because the tag is missing the src and srcset attributes.

Thanks.

OK sounds good. Thanks for all the help!

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?

>> 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.

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.

>> 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?

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?

OK then, thanks for all that info. Maybe I’ll play around with font-display to see if I can change things. Thanks for the help. We can consider this resolved.

>> on my system (Ubuntu Linux + Firefox) the sans-serif is slightly bigger, resulting in the “On” going to the next line but that’s minor

OK gotcha. With this solution, it’s expected that the text will briefly flash as sans-serif font, before the Poppins font loads–correct?

>> the subtitle and the “request”-button underneath don’t have a fallback-font defined yet, so I would do it for that one (and ideally all other fonts being used) as well?

Right O, I’ll ensure they all eventually receive the same solution.

But I’m still trying to understand why I can’t see the same flash that you see. It’s unsettling that I think everything is perfect, while others are seeing a slight flash.
Do you think it’s a browser caching issue? I’ve tried a hard refresh, and still don’t see a flash :-/ I don’t think my site has any server-side caching enabled.

OK, I added sans-serif as a fallback font to the Poppins font (you may need a hard refresh in your browser). On my end, I continue to see no flash. But what about on your end? Does that remove the flash?

>> I’m positive, see this screen recording;
>> https://imgur.com/a/KqFUHfz

OK got it–I see that, thanks. Are you adding any throttling during that test? Or have you slowed down that video? Or is that normal bandwidth/normal speed?

>> Re. fallback font; why not just add (at least) sans-serif in the CSS where you added Poppins?

Well I didn’t add it because on my end, it wouldn’t have made any difference–the flash was already gone. But let me add it, then notify you so you can have test on your end. I’ll need a few hours to do that. I’ll follow-up here when I do so.

>> I think the main thing is that that font (Poppins) is loaded earlier then the other (Josefin Sans) and as such is not slowed down by the execution of AO’s lazyload.

OK gotcha.

>> But I still see a very brief flash of unstyled text, so I actually would advice you to specifify a fallback font ??

OK are you positive that you’re still seeing the flash of unstyled text? Because on my end, I don’t see any at all. That’s why I was angling toward an alternate solution to the fallback font–a solution in which I specify the font family via CSS, rather than inline style. I say that because, at least on my end, that appears to resolve the issue. But I could perhaps do some more testing on that to confirm. I’ll also look into specifying a fallback font. If I can do that relatively easily (e.g. via theme options), that could be the path of least resistance.

I noticed that the font in my case is set via inline style. So I couldn’t easily assign a fallback font. But another test I did was remove the inline style, and set the font-family via CSS. This time I used a different font, and also omitted a fallback font. In this case, it appears that the issue has gone away. You can load the site now as a test if you want.

Does that change anything? Looks like the issue is related (caused by?) the fact that the font-family is set via inline style. Thoughts on that?

OK let me try to add a fall-back font to see if that helps the issue. Give me some time to test.

>> But based on my test the issue is also present when Autoptimize is not active, see screenshot below;

OK. If I load that same URL (https://staging-e43sehju.versionpress.com/?ao_noptimize=1), I also continue to experience the issue. But I can say with high certainty that if I deactivate the plugin, the issue goes away. I’m happy to give you an admin login to my site if you want to test.