Search code examples
nginxpagespeedgoogle-pagespeedgoogle-search-consolecumulative-layout-shift

Wrong CLS metrics

Google Search Console shows high CLS values even for pages with very simple restraint. For example, you can use a page with one word content: https://poncy.ru/tst/cls.html (link), the page has neither CSS nor JS, and the analyzer shows that the Cumulative Layout Shift (CLS) value is 0.13 for the desktop. How can this be fixed? Because of this, the google search console marks all pages with this fake metric and makes me nervous)). Many thanks. enter image description here

source page:

<!doctype html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta charset="utf-8">
    </head>
    <body >
        <p>АКАРА</p>
    </body>
</html>
Solution

  • You are looking at Origin Summary.

    This gives you real world data across the whole site.

    Also for Cumulative Layout Shift in the real world (rather than the "lab data" which is a synthetic test) they measure it until page unload, so it captures and layout shifts that happen further down the page etc. You need to bear that in mind as even if every page gets 0 CLS when you test it in lab data there may be other screen sizes / parts of the site where a Layout Shift occurs.

    The section above "Page Summary" doesn't have enough data (that is real world data for that specific page) so isn't showing. But that would be the one to look at for a specific page if there is enough data to show it.

    For clarity this page is not (necessarily) experiencing any layout shifts, those are occurring on other pages on the site as the information shown is for every page combined.

    If you run Page Speed Insights for that page you will see there is no layout shift etc. in the lab data part.

    https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fponcy.ru%2Ftst%2Fcls.html