CLS issue only in field data - how to diagnose it?

The website of PageSpeed Insight is the only place, where i get CLS issue in both of field and lab data. Any other Lighthouse (by WPT, as API or by DevTools) displays CLS issue only in field data, not in the lab.

How can i diagnose correctly, which elements are causing CLS? Example.

1 Like

Best bet would be to add a performance observer to the page to listen to layout shifts and beacon the details of any detected shifts somewhere.

1 Like

i just wonder, why in many cases i get under performance tab of devtools displayed layout shifts, as on screenshot, but not in this case:

1 Like

We often found our lab data showing 0 CLS but then big shifts coming through in our field data.

As CLS continues increasing as users scroll around pages or interact with your site these shifts will not show up in lab data.

As pneenan mentioned using a performanceObserver is your best bet.

The JS snippet from https://web.dev/cls/#measure-cls-in-javascript is really useful and you can inject it into any site using a chrome extension like https://chrome.google.com/webstore/detail/custom-javascript-for-web/poakhlngfciodnhlhhgnaaelnpjljija?hl=en

You then scroll around our page keeping an eye on the Chrome dev console.

I’ve more detailed instructions on this here

I just realised that you gave a link to your website. I believe the problem elements are your quicklinks in the bottom right hand corner on mobile. They are expanding and contracting when a user scrolls on the page causing LayoutShifts.

Hope this helps!

1 Like

You can use Web Vitals JS libraries and you can debug in the Field

1 Like

@tkadlec had a great blog post on debugging layout shifts with WebPageTest that also included a sample code snippet that you can inject into pages (Advanced tab of the advanced settings has a script injection box). You probably also need to set a “minimum test time” (be generous like 60 seconds).

With the script, it will scroll the page every couple of seconds after the onload so any shifts that are a result of scrolling will show up in the WebPageTest result.

Lazy-loaded images, injected ads, that kind of thing is a common cause of layouts shifting from scroll.

If the shifts are from other types of user interaction (clicking on a menu) then it won’t pick those up.

1 Like