CLS 超过 1 可能吗？答案

【问题标题】：CLS over 1 possible?CLS 超过 1 可能吗？
【发布时间】：2021-06-06 18:16:44
【问题描述】：

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

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

【问题讨论】：

标签： pagespeed-insights core-web-vitals cumulative-layout-shift

【解决方案1】：

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

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

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

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

如何让 CLS 大于 1？

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

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

现在您有两个几乎为 1 的 Layout Shift - 您的 Cumulative Layout Shift 几乎为 2。

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

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

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

使用开发者工具发现问题

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

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

我知道问题出在桌面上，但我不记得他们是否将平板电脑数据放在桌面或移动字段数据中......如果是桌面，那么您可能会有答案！

【讨论】：

这个答案非常彻底和赞赏。帮了我很多。我读到布局偏移分数 = 影响分数 * 距离分数。当我阅读您关于滚动条消失的示例时，我了解到 100% 的查看区域受到影响。影响分数不是 1 吗？但是对于距离分数，页面几乎没有移动，只是向右移动了 20px。也许如果有些事情变短了，那么有些事情就会上升。但是要获得 1 的总分，您必须有 1 x 1，而我只是在您的示例中看不到距离分数，它怎么可能是 1？
不，这就是示例的重点，我试图演示 CLS 如何大于一，这就是我说它被简化的原因。现在您对它有了更多的了解，在我的示例中，如果屏幕是 360 像素宽，那么 CLS 将是 10 像素移位/360 像素总宽度 * 1，因为它是整个页面 = 0.03。一个更现实的例子，如果加载图像并将页面的 50% 向下移出屏幕，则为 50% * 50% = 0.25。对不起，如果我给出的插图令人困惑，这纯粹是为了说明原理，而不是实数。