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.

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.

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:

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!