错误的 CLS 指标 - 编程之家

如何解决错误的 CLS 指标

即使对于具有非常简单限制的页面，Google Search Console 也会显示较高的 CLS 值。例如，您可以使用一个包含一个单词内容的页面：https://poncy.ru/tst/cls.html (link)，该页面既没有 CSS 也没有 JS，分析器显示 Cumulative Layout Shift (CLS) 值为 0.13 for for桌面。如何解决这个问题？正因为如此，谷歌搜索控制台用这个虚假指标标记了所有页面，让我很紧张））。非常感谢。

源页面：

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

解决方法

您正在查看起源摘要。

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

此外，对于现实世界中的累积布局偏移（而不是作为综合测试的“实验室数据”），他们对其进行测量直到页面卸载，因此它可以捕获和进一步向下发生的布局偏移页面等。您需要牢记这一点，因为即使您在实验室数据中测试每个页面的 CLS 为 0，也可能存在其他屏幕尺寸/网站部分发生布局偏移。

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

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

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

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