CLS issues Pagespeed insights

Hi there,

CLS happens when “data” the browser requires to render the page correctly is either a ) Not available such as a missing width attribute on an image or b) is late loaded such as CSS Style or Font.

In this case it looks to be the latter causing the issue. ie. the styles for the GB blocks is being loaded after the page has first been rendered.

If you check the Thumbnails in the filmstrip on the Pagespeed report you will see the images are really large occupying a single column. And later the columns are loaded.

So the issue comes from whatever optimization / cache plugins you’re using. Debug by temporarily disabling any plugins that “optimize” the site. Wait a while before retesting on Pagespeed as Google or in between server may have cached your page.

Thank you I will try that later.

You’re welcome

Hi David, thanks for your advice. I deactivated Jetpack and have just re-run PageSpeed Insights. The scores have definitely improved Mobile 94 and Dekstop 96. I guess I will leave it deactivated if things have improved.

I notice that it still says about ‘Properly size images’. I am a bit confused here as I upload photos after they have been compressed by Tinypng (there might be a few outstanding ones). And I also have Customized the Featured Image on the Archives/Pages/Posts to 500 width and 300 height – Attachment size – Medium-Large. Is there something else I should be doing?

Google reckons you could load a smaller image ( based on file size ) on desktop view as its only around 250px wide when viewed in 3 columns.

The problem though; you actually need the larger image for mobile.

Personally i would ignore the warning on desktop and only look to optimize the image if it complains about them in mobile.

Thanks for your help David. Greatly appreciated.