累积布局偏移 (CLS) 表示网站的视觉稳定性。它衡量页面上不显著的布局偏移量。
- CLS 分数是通过将影响分数乘以距离分数来计算的。影响分数是两个框架之间视口区域中不稳定元素所占的空间量。距离分数是页面元素从原始位置移动到最终位置的空间量。
- 如果 CLS 分数小于 0.1，则为好信号。如果分数在 0.1 到 0.25 之间，则表示您的网站需要改进。如果分数高于 0.25，则为差信号。
- 可以使用现场工具（例如 Chrome 用户体验报告、Search Console 中的 Pagespeed Insights 和 Core Web Vitals 报告）以及实验室工具（例如 Chrome DevTools、Lighthouse 和 WebPage Test）来衡量累积布局偏移指标。
- CLS 的常见原因包括没有尺寸的图像和视频、广告和嵌入、动态注入的内容等。
- 确保指定图像和视频的宽度和高度。
- 根据历史数据确定广告位的大小。
- 避免在现有内容上方插入新内容，除非是为了响应用户交互。
介绍
您是否曾遇到过这样的情况：当您尝试下订单时，结帐按钮消失？
是的！这很令人沮丧。
事实是，这种事情 融合数据库 发生得太频繁了，而且发生在我们很多人身上。
值得庆幸的是，谷歌一如既往地将用户体验放在首位。
这就是为什么它在 2021 年推出了三个性能指标作为其核心网络生命力的一部分。
核心网络生命力指标旨在衡量页面的加载速度、交互性和视觉稳定性。
有三个指标代表这些：
1. 最大内容绘画 (LCP)
2. 交互到下一次绘制（INP）
3. 累积布局移位（CLS）
让我们从用户和网站管 到内容时也会迸发 理员（SEO）的角度来了解 CLS。
什么是累积布局偏移？
累积布局偏移 (CLS) 表示网站的视觉稳定性。
它测量页面上微小的布局变化量。
意外的布局变化是由于网页 CA 细胞数 在没有用户输入的情况下自行移动造成的。
Google CLS 是一种指标（信号），通过测量页面元素意外移动对用户体验的影响频率来帮助您解决问题。
当可见元素的位置从一个渲染帧改变到下一个渲染帧时，布局就会随时发生变化。
让我们尝试理解常见含义并用简单的语言定义“累积布局偏移”：
累积是数量的增加。
布局是框架
班次是指位置的改变
简而言之，累积布局偏移是网站设计位置中所有单个框架变化的总和。
图片来源于 web.dev
标准 CLS 分数应低于 0.1。
衡量该指标的一个很好的阈值是移动端和桌面端设备的页面加载量的第 75 个百分位数。
从上图中可以清楚地看出， 根据 Google 的说法：
1. 如果 CLS 分数小于 0.1，则为好信号。这意味着您的网站没有任何布局偏移问题。
2. 如果 CLS 分数在 0.1 到 0.25 之间，则意味着您的网站在视觉布局方面需要一定的改进。
3.如果CLS得分大于0.25，则是较差的信号，也意味着视觉元素的移动发生得非常频繁。
如何计算累积布局偏移？
Google 通过计算每次意外布局变化的影响分数和距离分数来计算页面的 CLS。
CLS 的影响分数
它测量不稳定元素在两帧之间的视口区域中占用的空间量。
计算 CLS 影响分数的公式
为了计算布局偏移分数，我们需要影响分数。
如何计算 CLS 的影响分数？
图形表示将帮助您更好地理解影响分数。
影响分数 = [影响区域面积] / [视口面积] 影响分数 = [330 x 490] / [375 x 667] 影响分数 = [161700] / [250125] 影响分数 = 0.645
CLS 的距离分数
它是页面元素从原始位置移动到最终位置的空间量的度量，基本上在布局中发生了变化。
为了避免过度惩罚的情况，通过引入距离分数，将大元素的移动量考虑进去。
计算 CLS 距离分数的公式
如何计算 CLS 的距离分数？
图形表示将帮助您更好地理解距离分数。
距离分数 = [最大移动距离] / [视口高度] 距离分数 = [120] / [667] 距离分数 = 0.179
计算 Google CLS 分数的公式
累积布局分数是通过将影响分数乘以距离分数来计算的：
累积布局偏移 (CLS) = 影响分数 x 距离分数 CLS = 0.645 x 0.179 CLS = 0.1154。
随着冲击力和距离分数的增加，CLS 分数不断上升。
用一个简单的例子来说明累积布局偏移。
您访问了一个网站并看到了一些有趣的内容。
您继续点击该链接。
但就在您要点击该链接时，它在网页上向下移动了半英寸，而您最终点击了位于其正上方的广告。
来源：nitropack.io
听起来不公平，对吧？
这是一个意想不到的布局转变。
这仅意味着您将被重定向到一些不需要的登录页面，您必须从该页面返回原始网页。
我们还有一种称为预期布局转变的东西。
当您单击网页上的某个内容时，就会发生这种情况，并会改变页面的当前布局。
例如，您访问某个博客来寻找特定的信息。
只要您在搜索栏中输入主题名称，它就会检索特定的博客文章，您可以在其中找到所需的信息或找到与该主题相关的几篇博客文章。
