[Resolved] CLS issue

[Bernhard]

Hello,
Search Console complains CLS issue more than 0.25 (mobile) for the whole site.
I tested with page speed insight and it says CLS field data 0.18 lab data 0
With Webpagetest it says CLS 0.184
I tested with the Chrome developer tools ->network->no cache->3G but I haven’t seen any shift.
The logo is cached (WP Fastest Cache).
Have you any suggestion how to solve the problem? Thank you.

[Leo]

Hi there,

If you look at the result from Page Speed Insight, you can see that the featured image seems to be the issue:
https://www.screencast.com/t/qKMBeJxrT6m

Looks like it might be lazy loaded?

Can you try disabling your caching plugin to test?

Thanks 🙂

[Bernhard]

Hi Leo,
this brings the CLS to 0 also in Webpagetest.

So I have to check this with WPFastest Cache, right?

During my tests I found that the featured images, and the background images in page hero, are loaded full size even on mobile. I think, this is one of the main reasons why I have so bad load times on mobile. Is there a way to load scaled images?

Thank you.

[Leo]

I think you just have to exclude featured image from lazy loading.

Does WP Rocket allows you to specify the classes to be excluded from lazy loading?

[Bernhard]

Hello,
I have now disabled lazy load in WP Fastest Cache and enabled in Autoptimize. This seems to solve the CLS problem.

The remaining question is, why featured images and page hero backgrounds are not scaled on mobile. I mean, the full size is loaded and not a smaller resized image.

Page hero sample

Featured image sample

[David]

Hi there,

Page Hero images are loaded as CSS backgrounds, there is no simple way to load a different sized image for different device sizes.

Featured Images are displayed responsively using src-set images.
In your case your src-set only contains the original image size 672 x 345px and the thumbnail size of 300 x 154px
The browser will choose the most suitable size images.
You could register another thumbnail size of say 400px for the browser to choose from BUT as the majority of Mobile devices are HD/Retina then they will still load the larger image.

[Bernhard]

OK, probably I will prepare the page hero background in a lower resolution or with another compression.

For the featured image, would it be possible to block loading on mobile devices or (slow) mobile connections?

[David]

There isn’t a reliable solution for disabling featured images only on Mobile device. As your servers Page Caching will generally capture the images and still serve them up on mobile devices.
Maybe the best thing would be to reduce the number of posts you’re displaying in your arhives.

[Bernhard]

OK, thank you.

[David]

You’re welcome

[Author]

Posts