Lazy load causes flash of unstyled content

Hey cag8f;
I had a look and the biggest layout shifting seems to be due to the google fonts being loaded a tad later (which is good for performance). The Maybe give the font-display trick explained here a go?

Re. lazyload you might want to exclude your logo; when lazyloaded the text underneath is visible a fraction of a second and as that has a font-size of 48px it is bigger then the actual logo, I guess that is part of what you’re seeing.

Hope this helps,
frank

Hi Frank,

Thanks for looking into it. I’m unfortunately still seeing the issue when Autoptimize is activated–the issue goes away when I deactivate the plugin. To be clear, the issue I observe is a flash of unstyled content, specifically with the “Imagine This Ring On Your Finger” text in the middle of the page. Here’s what I’ve tested:

–Google Fonts settings: Regardless of what I select here, the issue remains present.

–Lazy-load setting: If I disable this, the issue goes away. When I re-enable this setting, the issue re-appears.

I agree with you that the front-end issue makes it seem like the issue appear to be related to fonts, and unrelated to lazy load. But my testing indicates lazy load is the culprit. Thoughts on that?

OK, think I’ve got it;

* the text you mention uses a (Google) webfont (Josefin)
* there is no fall-back font defined for Josefin
* browsers wait up to 3s to display text if font is not available
* and the link with lazyload: the webfont in the current setup is loaded after AO’s lazyload JS which likely makes it load slower then when lazyload is not active;

<script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://staging-e43sehju.versionpress.com/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script><link rel='stylesheet' id='vc_google_fonts_josefin_sans100100italic300300italicregularitalic600600italic700700italic-css' href='https://fonts.googleapis.com/css?family=Josefin+Sans%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C600%2C600italic%2C700%2C700italic&ver=5.2.1' type='text/css' media='all' />

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

The root cause is the lack of fall-back fonts in the inline CSS for the title & sub-title which at the very least should be font-family:'Josefin Sans',sans-serif; instead of just Josefin Sans as you have now (in lots of places in your HTML, below is just an example):

<h1 style="font-size: 53px;text-align: center;font-family:Josefin Sans;font-weight:400;font-style:normal" class="vc_custom_heading jba-test" >Imagine This Ring On Your Finger</h1><h2 style="font-size: 32px;color: #777;text-align: center;font-family:Josefin Sans;font-weight:400;font-style:normal" class="vc_custom_heading" >Aron created designs for iconic brands. And now he wants to create his next masterpiece. For you.</h2>

So yeah, I still think it’s a font issue ??

You can find more info on font-family usage and defining fallbacks on e.g. https://css-tricks.com/css-basics-fallback-font-stacks-robust-web-typography/

Hope this clarifies,
frank

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.

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?

Thoughts on that?

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.

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

>> 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’m positive, see this screen recording;

fout

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

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

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?

It’s better, but not 100% yet as:
* 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
* 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?

see 2 screenshot at https://imgur.com/a/qtUFoYp

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

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

that actually depends on the browser by default. only when specifying specific font-display behavior you’ll get more consistent results.

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.

depends on browser and which system-fonts are available really.

Do you think it’s a browser caching issue? I’ve tried a hard refresh, and still don’t see a flash :-/

that’s also part of it; I only see the behavior if I do a hard refresh (ctrl-f5).

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.

you’re welcome cag8f, feel free to leave a review of the plugin and support here! ??

enjoy your sunday!
frank