[Resolved] CLS Help.

[Benjamin]

Hi Team,

I am trying to optimize for Core Web Vitals but I’m having trouble with CLS issues on some pages, I run Ezoic ads on my site but the CLS issues are also coming from pages where I’ve had ads disabled for a few months now.

I’m not sure what the cause could be since everything seems to load fine when I check the page in incognito, however, the Core Web Vitals chrome extension, as well as Search Console, is giving me CLS errors for those pages.

Maybe it could have something to do with the elements feature in GP since I do use that to load an advertisement above my content? (This advertisement isn’t from Ezoic and is on all pages, basically just an HTML image with a link).

Anyway, It’s not too bad only around 0.2 for most mobile pages; somehow 0.4-0.6 for most desktop pages, but unfortunately, that’s still unacceptable by Google. I’ll leave some URLs where the issues are from if you could maybe just have a look I’d really appreciate that? Thanks.

[David]

Hi there,

i can see a Flash of unstyled text ( FOUT ) on load. Which aligns with the fact the CLS elements PSI reports are all text elements. To check if this is the issue switch to System Stack fonts and clear any cache plugins.

If thats the issue then the only way to stop it from happening is to preload the font you want to use… or go through the pain of finding a font that matches the fallback font that is displayed on load.

[Benjamin]

Hello David,

Sorry for the delay in my reply.

I switched to system stack fonts and did a few tests, it does seem that it does something… but I’m not quite sure. Right after clearing the cache, some pages will display a CLS of 0 when testing and then go back to the normal CLS, while others will consistently display a lower CLS. So maybe it’s that, maybe not.

What do you suggest? I’m really not quite sure if this is the cause or not. Is there maybe something else that could be affecting CLS?

It did also make the page slower and push the LCP over 2.5s (before it was 1.9s), but I read up and it looks like system stack fonts is a bit of a heavier font system-wise (it’s stacking a few fonts as far as I understand).

Furthermore, I’m not quite sure how to preload fonts into the GP theme, I’m familiar with some basic CLS and HTML, but not sure how to edit the GP theme.

Thank you,
Benjamin

[David]

Ok so lets go through some options:

1. Serve the fonts locally and preload the font.
The simplest method is to use the OMGF plugin:

https://wordpress.org/plugins/host-webfonts-local/

Make sure you have caches disable when you run the auto option.
You’ll also find a preload option in its settings.

2. Lazyloading logos is not a good thing and cause some shifts. In your lazy loader plugin check to see if it has an exclude images with a specific CSS class … if it does then use: is-logo-image

3. The Cookie Notice animation is also registering CLS. Might want to check if theres a non animated method of displaying it.

[Benjamin]

Marked as resolved.

[David]

Glad to hear that!

[Author]

Posts