CLS issue reported in Search console but not in Pagespeed insights

68 Views Asked by At

I've waited months before asking this question hoping it will fix on its own but its not. In Google Search Console, web vitals report poor CLS on 64 urls however if I run pagespeed insights report on those urls the CLS is close to 0. I've run this test multiple times over several weeks, my CLS is always 0. What can I do?

I've also tried "Validate Fix" but it fails after a month.

Search console

Pagespeed insights

1

There are 1 best solutions below

1
Rick Viscomi On

Check out Understanding where your shifts are coming from in the Optimize CLS docs. First, it's important to point out that there are two different CLS scores from two different sources:

enter image description here

This is just a generic image from the docs, but the CLS score in the "what your real users are experiencing" section at the top of your screenshot is 0.35, which is considered "poor" and consistent with what Search Console is reporting.

The CLS score in the "Diagnose performance issues" section is 0.001 and comes from an audit of your web page without simulating any user interactions.

The wide discrepancy between the lab-based audit and your real-user data strongly suggests that layout shifts are occurring after the page loads, as a result of user interactions.

The Identifying post-load CLS issues section of the CLS docs provides some guidance to help you figure out what is causing the layout shifts.

I figured out the URL of the website based on the logo in the screenshot, and used the Web Vitals extension to log changes in CLS as I scrolled from the top of the page to the bottom, simulating how a real user would interact with the page.

enter image description here

What I found is that while CLS is initially pretty good when the page loads, it gradually gets worse as I scroll down the page. By the time I got to the bottom, the score was 0.12, beyond the "good" threshold.

enter image description here

Drilling down into the CLS attribution info, we can see that one of the sliders has a shift score of 0.08. There's also a shift of 0.03 caused by img[src=img/banners/brands-logo-d.jpg] not having explicit dimensions.

This isn't even close to the 0.35 score you're seeing from 75% of real users, so there's definitely more that I'm not seeing. But based on this quick test you can at least see that there are legitimate layout shift issues on your page. (FWIW your screenshot shows the mobile results and I tested on desktop, but the desktop score in PSI isn't much better)

You can try to use this approach to find the other causes of layout shifts, but I'd strongly recommend measuring your CLS in the field to get this kind of attribution info at scale so you don't have to guess at what issues your users are running into.