[Support request] Core Web Vitals CLS Failed Validation

[a1reno]

Hi,

When I test individual pages on my mobile pages in pagespeed insights I pass on the CLS scores however, in my core web vitals dashboard I am seeing all my mobile scores needing improvement in their CLS’s.

From brief research, I understand that this can occur because core web vitals is taking real user data and experience but after testing my own experience on my site in mobile I can’t seem to locate where the CLS issue is coming from. I have also tested using a live core web vitals plugin and it is telling me there is need for improvement as well.

I was wondering if you could see any obvious places the CLS on mobile is coming from? Perhaps my theme settings or something along those lines?

[David]

Hi there,

Best way to test is to open the browser developers tools ( right click > inspect ), select the Mobile responsive view and go to the Performance tab, set the Network to Slow 3G and CPU to 4x Slowdown ( this will replicate Googles mobile simulation ), Then reload the page ( icon in the Performance tab ). This will provide you with Layout Shift movements. See this screenshot from testing your example page:

https://www.screencast.com/t/0RDH9gr8cV

The first CLS element is the Amazon content, which could be the cause of the other CLS elements listed, as one item shifting will move the others that come after this.

Not sure how that content is added but the HTML doesn’t have any sizing before its content is loaded, which causes CLS.

I also notice you have a Sticky Advert at the foot of the site, those elements are also know to generate LCP, and maybe contributing to the issue.

Both of these are issues that would need to be addressed with the 3rd party providers.

Not sure if thats the kind of content you have on the other posts, so the issues may vary. But i would start with them.

[a1reno]

Hi David,

I was hoping it would be you to answer this!

Great, I’ll investigate those issues and see how it goes.

Thanks!

[David]

Glad to be of help

[a1reno]

Hi Again!

It’s also happening on pages without AAWP. I was wondering if you can spot anything else?

I tried to look myself using the instructions you mentioned but couldn’t find where to set CPU 4x slowdown.

I have also reached out to Mediavine to see what they say.

Thanks!

[David]

So on that link ( and i retested the old link ) – on a slow network i see this:

https://www.screencast.com/t/HAJKSKsArSmJ

( Be patient – i refreshed the view on slow network ) – and you can see the Featured Image hasn’t got any space reserved for it – so its forcing the entire content down after load. The image is being swapped our for a webP image – again thats something to be addressed with that plugin/service provider.

[a1reno]

Hi David,

I’m still trying to work out how to fix this.

I emailed shortpixel and they said:

ShortPixel Image Optimizer (SPIO) only replaces your physical files. They can’t and do not affect your frontend.

In your case, there is a change on your page code to display the WebP images, but it is simply changing the tags for <picture> tags, and that shouldn’t affect the CLS. There is no image swapping because the JPG never gets displayed.

To solve this, you could try specifiying the width and height to every image

Do you think that is a correct analysis? Is there a way in Generatepress to do this?

Also I did a test without Mediavine and the issue was still ocurring.

Thanks.

[David]

To solve this, you could try specifiying the width and height to every image

All your images have width and height attributes ( its baked into your image files ). And WP core img function displays them as attributes in the <img> HTML.
And those were still present on your sites markup.

I am not sure how the <picture> markup is injected ( is that Shortpixel or another plugin ? ), but there was a delay on the slow 3g network before the <img> element appeared ( this may be the webP swapping ? ) inside the picture element. Which meant the browser initially reserved the space for the empty picture element ( that has no width height attributes ) and later the image was injected. Which causes the CLS.

Looks like you disabled the image optimization ? And retesting the site i see NO CLS, and the performance test completed in a fraction of the time.

[a1reno]

Hi David,

Yes, you’re right.

I had ticked a setting in shortpixel to serve WEBP images using a picture tag so when you tested my site I had disabled that and asked WP rocket to serve the images instead.

I’ve since moved to EWWW to serve my pictures via CDN but i still appear to be getting the same CLS problem flagged in my plugin.

Is it still good on your end?

[David]

I would put money on it being that Sticky advert bar at the bottom of the screen.
Seen several of them generating CLS, as they shift into display without any user action. And each time the it cycles to a new add it too can cause CLS.

And they don’t show up in the Google PSI Lab tests as they only measure shift on DOM loaded, and that code gets injected after that. But they will show up on Search Console and PSI Field Data.

[a1reno]

Hi David,

I did test the sticky by removing and was still getting issues with reported CLS.

It does appear that it is coming from the featured image.I removed the featured image from my posts and didn’t get any CLS flagging up on the plugin.

I have opened another thread discussing on how to get the right image size displayed.

[David]

I reran a live performance test on the example URL – which does still have the Featured Image being displayed.
The only Layout Shift that i could trigger is opening and closing the submenu in the Off Canvas Panel
Which is expected as the open menu forces the items below to move down. And that shift gets marked with the hadRecentInput flag (true) – which Google ignores when gathering CLS info.

So i cannot see any CLS being recorded for that page.

[a1reno]

Hi David,

I changed the lazy load class for my logo in WP rocket (i had it put in incorrectly before) and the error seems to have stopped flagging up.

Not sure why this affects the CLS but so far it seems to be doing the trick so far!

Just out of curiosity what should I put in as the featured image class to stop lazy loading on these images. I have put the different sizes in but was wondering if there is a catch-all class for just featured images?

[David]

The featured image class is something we’re looking at adding.
The Snippet i provide here adds a first-featured-image class to the single post and the archives ( first post in the list ):

https://generatepress.com/forums/topic/add-a-class-to-the-featured-image-of-all-the-single-posts-on-my-site/#post-1816115

[Author]

Posts