CLS可能超过1？

Question

在我们的PSI数据中，我们看到了一些带有令人无法理解的CLS数字的页面。事实上，这里有一个有2.52的页面的例子，但是我甚至不认为它有可能超过1.0的分数，这将是屏幕上所有东西的一个完全的变化，对吗？数据/chrome是否有问题，因为这不是一个孤立的incident...our站点页面，大约一个月前突然开始遭受可怕的CLS数据，我们感到困惑，在GSC的Core区域。

查看CLS.2.52中的字段数据，但是实验室数据是.044。PSI链接

Answer 1

为什么实验室数据和现场数据有区别？

实验室测试(合成测试)中的CLS纯粹用于初始页面加载和折叠以上。

字段数据(真实世界)中的CLS从第二次(第一次(技术上是第二次)画图事件)开始测量，直到页面卸载为止。

因此，如果在有人滚动页面时发生布局转换，那么页面将一直添加到CLS中。

怎样才能有一个大于1的CLS？

假设您滚动页面，滚动条突然出现，这将移动整个页面。现在CLS基于移动页面的百分比。因此，如果整个页面向左移动10 be，您将得到一个几乎为1的布局偏移(假设1是可见页面的100%，0.5是可见页面移动的50%等等)。

让我们假设，当您进一步滚动页面时，滚动条突然消失，整个页面现在向右移动10 by。这将导致更多的布局变化几乎1。

现在，您已经有了两个几乎为1的布局转移--您的累积布局转移将几乎为2。

我已经简化了布局移位的计算方法，但是我认为上面的例子更容易理解这个原则。

真正的用户度量(RUM)是捕捉这类问题的方法。

至于CLS数据突然发生变化，我建议使用类似网络生命图书馆的方法将数据输送到自定义后端或分析端，这样您就可以看到这是否是导致这种变化的特定设备、屏幕大小等。

用开发工具发现问题

要查看布局移位区域，请转到Developer Tools ->呈现->检查“布局移位区域”，然后加载页面几次，调整页面大小等。

我唯一能看到的是，您的移动菜单有一些非常奇怪的布局移位区域，特别是在大屏幕大小时。除此之外，当页面加载时会发生巨大的变化，但这不应该超过1。

我知道问题在桌面上，但我不记得他们是否把平板电脑数据放在桌面或移动字段data...if，它是桌面，那么你可能有你的答案！