Why is there a CLS problem with real user data but not with the lab data?

Question

when I test the page in DevTools, there is no problem with CLS.

But, with pagespeed-insights there appears a difficulty with the mobile page CLS.

Not for the lab data, but only for the real data:

https://federhilfe.de/rotkehlchen-anlocken-im-garten-ansiedeln-fuetterung-nisthilfen/

https://pagespeed.web.dev/report?url=https%3A%2F%2Ffederhilfe.de%2Frotkehlchen-anlocken-im-garten-ansiedeln-fuetterung-nisthilfen%2F&hl=de

Do you have any idea how to solve this problem?

Thank you very much!

Alex

Answer 1

The guide at web.dev/lab-and-field-data-differences mentions a few reasons why CLS may be different across lab and field measurement:

• CLS may depend on real-user interaction, while lab tests do not simulate any interactions (by default)
• Personalized content from real users may affect CLS, which may not be represented in lab testing
• Real users may have warm caches, so content may not need to load, minimizing CLS, whereas lab tests traditionally run with empty caches

To help identify why CLS is happening to real users, the first step I'd recommend is to use the website yourself with something like the Web Vitals extension enabled. Just from scrolling to the bottom of the page with the heads-up display (HUD) turned on, I can see CLS values gradually increasing and exceeding the "good" threshold of 0.1

I'd also recommend measuring Web Vitals in the field to ensure that you have additional debug data about what might be causing CLS to your real users.

Even though this kind of interaction-induced CLS wouldn't be reproduced by lab testing, it could still identify possible causes of real-user CLS. The PageSpeed Insights link you shared, you can click Show audits relevant to: CLS. For the desktop results, there are two audits that need attention:

• Image elements do not have explicit width and height
• Avoid large layout shifts