示例 CLS 距离偏移

[ahbappy250]

如何测量累积布局偏移（CLS）？
CLS 是通过对页面浏览量最差的“会话窗口”期间发生的每个意外布局偏移的所有单独布局偏移分数的总和来衡量的。

会话窗口是用户访问页面时发生的任何 5 秒的转换时间跨度。Google 会查找转换惩罚最多的 5 秒间隔，并将其作为该页面浏览的分数。

为了计算布局偏移分数，Google 将影响分数和距离分数相乘。我将逐一解释。

影响分数是指不稳定元素在两帧之间占用的视口面积。

在下面的示例中，您可以看到元素占据了原始视口 台灣手機號碼 的 50%，但随后向下移动了 25%。在两帧之间，元素占据了视口的 50% 加 25%，导致影响分数为 75%。

视口中的 CLS 布局偏移示例。
两个框架之间的布局转换示例，Google Developers

距离分数是不稳定元素移动的距离。下面的示例显示元素移动了视口高度的 25%。

视口中的距离偏移示例，Google Developers

总结一下：CLS 是通过布局偏移分数来衡量的，其计算方式如下：

影响分数 * 距离分数 = 布局偏移分数

以上述示例为例，计算如下：0.75 * 0.25 = 0.1875。Google 表示，网页在所有页面或页面浏览量中的 CLS 应小于 0.1。此示例超出了该目标，因此得分较低。

下图可以让你更清楚地了解 CLS 的评分方式：如果视口内的所有内容在一帧内移出视口，则布局得分为 1.0。（请参阅GitHub 上的其他示例。）

页面上在视口中移动的元素越多，您的得分就可能越低。

累积布局转变目标分数。
Google 的 CLS 分数目标

您可以在此处阅读有关布局转换分数的更多信息，以及在此处了解 Google 如何定义其阈值。

累积布局偏移 (CLS) 如何影响 SEO？
与其他核心网络生命力一样，CLS 有助于确保访问者在移动设备和桌面设备上获得流畅的页面体验。