0

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

Alexander Böckmann
  • 1

1 Answers1

2

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

enter image description here

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

enter image description here

Rick Viscomi
  • 8,180
  • 4
  • 35
  • 50
  • Hello Rick, thank you for your prompt answer. I had a look at the web vitals extension. But it only checks the desktop version. The problem on the site is only related to the mobile version. The desktop version is actually working fine. – Alexander Böckmann May 27 '22 at 15:38
  • You can still use DevTools to emulate a mobile device and trigger the same layout shifts that real users would! Hope that's helpful to track it down. You can also configure the extension to compare your emulated mobile experience to real-user mobile experiences. – Rick Viscomi May 27 '22 at 21:41