Search code examples
pagespeed-insights

Understanding CLS data and discrepancy for Pagespeed Insights

We are finding a lot of discrepancy in the Pagespeed data for our website pages, with reference to the difference between the CLS Lab data and Field data, and also in comparison with other tools such as GTMetrix.

For e.g for the URL https://www.koimoi.com/bollywood-news/varun-dhawan-was-all-set-to-play-harshad-mehta-in-a-movie-before-pratik-gandhi-ft-scam-1992/amp/

The CLS is shown as 0 for both Lab data and GTMetrix, but for Pagespeed Field data, the CLS is 0.45. This in turn causes the Core Web Vitals to show a large number of poor URLs and is definitely affecting SEO.

How can we explain these differences and what would be the best approach in fixing this?

Solution

  • This looks to be caused by something on your adverts, I haven't actually managed to see it with the naked eye but running a performance trace picked it up:

    layout shift on performance trace

    layout shift information showing div.ns-1krbc-e-3.title-line1 causes a layout shift of 0.8613

    As this appears to be an intermittent issue that would explain the CLS difference between lab data and field data (I had to run 3 profiles before it caught this, but it resulted in a CLS of over 0.8!).

    The only way you are going to track this down is to keep reloading the page (with a cold cache as well as a full cache) at different screen sizes and profile it over and over.

    Eventually you will spot the exact cause / which advert it is and can then take measures to correct the problem.

    Another thing to consider when testing is that the lab data / GT Metrix data is purely during the test. However Cumulative Layout Shift is measured until page unload for field data, so shifts that happen after a few seconds may not show on a lab test but will affect real world scores.

    The final thing to consider is the browser, device etc. If particularly poor devices are being used to view the site, or a particular screen size that causes issues then you need to fix that. The best way to get this info is from your analytics library.

    To help you diagnose all of this you should use Real User Metrics (RUM). One example of this is the Web Vitals Library, which allows you to pipe real world CLS data (and other web vitals) to your analytics or to your own server for analysis.