Wrong CLS metrics

Question

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.

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>

score 1 · Accepted Answer · answered Jul 15 '21 at 06:12

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

Graham, thanks for the answer. But how then, can the CLS values for the pages be improved if the "user interaction" data is lefted behind the scenes, E. how to understand what exactly this analyzer does not like? — iqmaker, Jul 15 '21 at 13:28
Ah, for that you need Real User Metrics (RUM). There is a library https://github.com/GoogleChrome/web-vitals that you can pipe to your analytics or a custom API to gather this info. You can then combine that with screen size information to narrow down the problem still further. In the end I rolled my own using ` PerformanceObserver` (it has `entryType == "layout-shift"` you can gather) as I needed fine grained control so that is another possibility, neither are easy solutions though. — GrahamTheDev, Jul 15 '21 at 18:09

Wrong CLS metrics

1 Answers1