在我们的 PSI 数据中，我们看到一些页面的 CLS 数字非常惊人，我们无法重现或理解这些数字。事实上，这里有一个页面有 2.52 的示例，但我什至认为不可能超过 1.0 的分数，这将是屏幕上所有内容的完全转变，对吗？数据/chrome是否有问题，因为这不是一个孤立的事件……大约一个月前，我们的网站页面突然开始遭受可怕的CLS数据，我们在GSC的Core Web Vitals区域感到困惑。
查看 CLS...2.52 的现场数据，但实验室数据是 0.044。PSI 链接
问问题
195 次
1 回答
1
为什么实验室数据和现场数据之间存在差异？
实验室测试（综合测试）中的 CLS 纯粹用于初始页面加载和首屏。
现场数据（现实世界）中的 CLS 是从第二个第一个（从技术上讲是第二个）绘制事件直到page unload测量的。
因此，如果有人滚动页面时会发生布局变化，这些页面会不断添加到您的 CLS。
如何让 CLS 大于 1？
想象一下你滚动页面，突然出现滚动条，这会改变整个页面。现在 CLS 基于页面移动的百分比。因此，如果整个页面向左移动 10 像素，您将获得几乎为 1 的 Layout Shift（将 1 视为可见页面的 100%，0.5 将是移动的可见页面的 50% 等）。
假设当您进一步滚动页面时，滚动条突然消失，整个页面现在向右移动 10 像素。这将导致几乎 1 的额外布局偏移。
现在您有两个几乎为 1 的布局移位 - 您的累积布局移位几乎为 2。
我已经简化了布局偏移的计算方式，但我认为上面的例子更容易理解这个原理。
真实用户指标 (RUM) 是捕获此类问题的方法。
至于 CLS 数据突然变化，我建议使用类似web Vitals 库之类的东西将数据传输到自定义后端或您的分析，这样您就可以查看这是否是特定设备、屏幕尺寸等导致的。
发现开发人员工具的问题
要查看布局移位区域，请转到开发人员工具 -> 渲染 -> 选中“布局移位区域”，然后加载页面几次，调整大小等。
我唯一能看到的是你的移动菜单有一些非常奇怪的布局移位区域，这些区域在大屏幕尺寸下特别糟糕。除此之外，页面加载时会发生巨大变化，但不应超过 1。
我知道问题出在桌面上，但我不记得他们是把平板电脑数据放在桌面还是移动现场数据......如果是桌面，那么你可能有答案！
于 2021-03-09T08:19:04.803 回答