错误的 CLS 指标

Question

Google Search Console 显示高 CLS 值，即使对于限制非常简单的页面也是如此。比如你可以用一个word内容的页面：https://poncy.ru/tst/cls.html (link），该页面既没有CSS也没有JS，分析器显示桌面的Cumulative Layout Shift (CLS)值为0.13 .这怎么能解决？因此，google 搜索控制台用这个虚假指标标记了所有页面，这让我很紧张））。非常感谢。

源页面：

<!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>

Answer 1

您正在查看起源摘要。

这为您提供 真实世界的数据 整个站点。

他们还测量了现实世界中的累积布局偏移（而不是综合测试的“实验室数据”）直到页面卸载，因此它会捕获和布局发生在页面下方的偏移等。您需要记住这一点，因为即使在实验室数据中测试时每个页面都获得 0 CLS，也可能有其他屏幕尺寸/网站的某些部分发生布局偏移。

“页面摘要”上方的部分没有足够的数据（即该特定页面的真实数据），因此未显示。但如果有足够的数据来显示它，那将是查看特定页面的那个。

为清楚起见，此页面没有（必然）发生任何布局变化，这些变化发生在网站的其他页面上，因为显示的信息适用于每个页面的组合。

如果您运行该页面的 Page Speed Insights，您将看到实验室数据部分没有布局偏移等。

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

错误的 CLS 指标

Wrong CLS metrics

nginx

pagespeed

google-pagespeed

google-search-console

cumulative-layout-shift