CLS 超过 1 可能吗？ 真实用户指标 (RUM) 是捕获此类问题的方法

如何解决CLS 超过 1 可能吗？ 真实用户指标 (RUM) 是捕获此类问题的方法

在我们的 PSI 数据中，我们看到一些页面的 CLS 数字惊人，我们无法重现或理解这些数字。事实上，这是一个页面的示例，它有 2.52，但我什至不认为有可能超过 1.0 的分数，这将是屏幕上所有内容的完全转变，对吗？数据/chrome 是否存在一些问题，因为这不是一个孤立的事件……大约一个月前，我们的网站页面突然开始遭受糟糕的 CLS 数据，我们在 GSC 的 Core Web Vitals 区域感到困惑。

查看 CLS 的现场数据...2.52，但实验室数据是 0.044。 PSI Link

解决方法

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

实验室测试（综合测试）中的 CLS 纯粹用于初始页面加载和首屏。

现场数据（真实世界）中的 CLS 是从第二个（技术上是第二个）绘制事件到页面卸载测量的。

因此，如果在有人滚动页面时发生布局变化，这些会不断添加到您的 CLS。

如何让 CLS 大于 1？

想象一下你滚动页面，突然出现滚动条，这会移动整个页面。现在 CLS 是基于移动页面的百分比。因此，如果整个页面向左移动 10px，您将获得几乎 1 的布局偏移（将 1 视为可见页面的 100%，0.5 将是可见页面的 50% 移动等）。

假设当您进一步滚动页面时，滚动条突然消失，整个页面现在向右移动 10 像素。这将导致几乎 1 的额外布局偏移。

现在您有两个几乎为 1 的布局转换 - 您的累积布局转换将接近 2。

我已经简化了 how layout shift is calculated，但我认为上面的例子更容易理解原理。

真实用户指标 (RUM) 是捕获此类问题的方法。

对于突然变化的 CLS 数据，我建议使用诸如 the web vitals library 之类的东西将数据通过管道传输到自定义后端或您的分析，以便您可以查看这是否是特定设备、屏幕尺寸等导致的

发现开发者工具的问题

要查看布局转换区域，请转到开发者工具 -> 渲染 -> 选中“布局转换区域”，然后加载页面几次，调整大小等。

我唯一能看到的是您的移动菜单有一些非常奇怪的布局移位区域，在大屏幕尺寸下尤其糟糕。除此之外，页面加载时会发生巨大的变化，但不应超过 1。

我知道问题出在台式机上，但我不记得他们是将平板电脑数据放在台式机还是移动现场数据中……如果是台式机，那么您可能会有答案！