"Ensure text remains visible during webfont load" Core Web vitals error

Update: Had to change back from SVG to font, but problem remains

Hi Andrew,

Switching from font to svg is the first step to go.

Can you do so and clear cache?

Let me know :)

Hi Ying, as mentioned I did try that - It didn't stop the font loading issue (cache was cleared) and it also made square symbols appear in my menu next to the arrows, so I had to switch back anyway.

Hi Andrew,

This issue is being flagged because the font asset for icons is causing FOUT.

The way to go is with having SVG icons and then clear all kinds of cache so you don't see that square placeholder for icons. :)

Hi Elvin

Thanks, I tried that again and put it on a staging site (see link below)

As you can see, it doesn't solve the issue on the page speed test, and it makes squares appear next to the arrows on the menu, which disappear as soon as the cursor is moved.

Any ideas on an alternative fix?

Thanks
Andrew

The SVG doesn't seem to be applying properly as the site still seems to be using font icons.

You may have to check if the site has some sort of page caching that's messing up how the page looks.

Consider disabling all plugins except GP Premium as well to check if its a conflict with plugins. :)

ok thanks, the site uses WP Rocket, Kinsta & Sucuri - all the caches have been cleared and have never caused any issues before - do you think it could be any of those?

Also with regards to plugins, is there any particular type of plugin which is likely to cause this? just to help me narrow it down a bit

Thanks
Andrew

Also with regards to plugins, is there any particular type of plugin which is likely to cause this? just to help me narrow it down a bit

I'd lean towards caching related things first. I'll check everything. (CDNs, object-cache, page cache, etc)

As for plugins, I'm not sure but the best way to find out is by copying the site on a staging site and disable everything first. You enable them one by one to figure out which one. :D

Thanks Elvin

I've solved the font loading issue now - I switched to SVG and regenerated the critical CSS in WP-Rocket.

However, even with that fixed, I'm still seeing low scores for FCP and LCP in the Core Web Vitals tests, but with nothing specific being cited by Google in the reports, which is strange.

Any idea what might be causing that from a theme perspective?

Thanks
Andrew

Hi there,

i checked the latest URL you shared and on mobile the FCP / LCP are both 1.7s on mobile, which is brilliant.
Is there a different link i should look at ?

Hi David

Thanks for the quick response

Whats really strange is that sometimes the FCP & LCP are low - sometimes they are really high

If you use the page below as an example, run the test a couple of times and you will see what I mean

Thanks
Andrew

I ran 6 tests - one every 5 minutes and each time the results were within CWV recommendations. Tiny fluctuations if any.
If you see the odd glitch, i wouldn't be overly concerned, the tests are simulated and sometimes they glitch out. Only an issue if you see it consistently.

Thats strange, I'm still seeing it happen more than half of the times a run test, which means it will likely fail the web vitals test over 28 days

Is there anything else at all you think my be causing this?

Thanks
Andrew

Hard to say without seeing it.
Do you have a page speed insights showing the delayed times ?