累积布局偏移 (CLS) 衡量页面加载时的视觉稳定性。它通过查看元素有多大以及它们移动的距离来做到这一点。它是 Google 用于衡量页面体验的三个Core Web Vitals 指标之一。

CLS 是在发生最多偏移窗口的五秒内计算的。

边注:

预期的布局变化（例如用户操作后）是正常且符合预期的。用户交互后 500 毫秒内的变化被排除在计算之外。

测量方法如下：

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

或者用更容易理解的方式来说，就是：

布局移动分数 = 已更改的视口百分比 x 不稳定元素移动的距离

CLS 之所以重要，是因为当您尝试单击页面上移动的某些内容，然后最终单击了您不想要的内容时，这会很烦人。 

这种事经常发生在我身上。我点击了一件事，突然间，我发现自己点击了一个广告，甚至不在同一个网站上。作为一名用户，我觉得这很令人沮丧。

CLS 的常见原因包括：

• 没有尺寸的图像。

• 没有尺寸的广告、嵌入内容和 iframe。

• 使用 JavaScript 注入内容。

• 在加载后期应用字体或样式。

让我们看看您的 CLS 分数应该是多少以及如何提高它。

什么是好的 CLS 分数？  

良好的 CLS 分数小于或等于 0.1，并且应基于 Chrome 用户体验报告 (CrUX) 数据。这是来自您网站上并选择共享此信息的 Chrome 实际用户的数据。您需要 75% 的页面加载才能获得 0.1 或更低的 CLS 分数。

您的页面可能会被归类为以下类别之一：

• 良好：<=0.1

• 需要改进：>0.1 且 <=0.25

• 较差：>0.25

CLS数据  

截至 2023 年 4 月，72.8% 的网站具有良好的 CLS 分数。这是整个网站的平均分数。正如我们提到的，您需要 75% 的页面加载才能获得 0.1 或更低的 CLS 分数才能被归类为良好。

自 Google 推动更快的网站以来，CLS 是最能促进 Core Web Vital。 

当我们使用站点审核数据在页面级别进行研究时，我们发现 CLS 在桌面和移动设备上是相似的。

我们还注意到许多网站在 CLS 方面遇到困难，尤其是在连接速度较慢的情况下。

CLS 在页面级数据中比原始数据更差。人们很可能正在改进他们的主页，从而获得更多流量，同时留下许多其他页面的分数不及格。

如何测量 CLS  

测量 CLS 的方法有多种：现场数据和实验室数据。 

现场数据来自Chrome 用户体验报告 (CrUX)，这是来自选择共享数据的 Chrome 真实用户的数据。这可以让您更好地了解现实世界的 CLS 性能。这也是 Google 实际衡量Core Web Vitals的标准。 

实验室数据基于相同条件下的测试，以使测试具有可重复性。Google 不会将其用于 Core Web Vitals。但它对于测试很有用，因为 CrUX/现场数据是 28 天的滚动平均值，因此需要一段时间才能看到变化的影响。

测量 CLS 的最佳工具取决于您想要的数据类型（实验室/现场）以及您是否想要将其用于一个或多个 URL。

测量单个 URL 的 CLS  

Pagespeed Insights会提取您无法在 CrUX 数据集中查询的页面级字段数据。它还基于 Google Lighthouse为您运行实验室测试，并为您提供原始数据，以便您可以将页面性能与整个网站进行比较。

测量多个 URL 或整个网站的 CLS  

您可以在 Google Search Console 中获取 CrUX 数据，这些数据分为良好、需要改进和较差的类别。

单击其中一个问题即可查看受影响的页面组的详细信息。这些组是具有相似值且可能使用相同模板的页面。您在模板中进行一次更改，该更改将在组中的各个页面上得到修复。

如果您想要大规模的实验室数据和现场数据，获得这些数据的唯一方法是通过 PageSpeed Insights API。您可以通过 Ahrefs 的站点审核轻松连接到它，并获取详细说明您的绩效的报告。对于拥有Ahrefs 网站管理员工具(AWT) 帐户的经过验证的网站来说，这是免费的。

请注意，显示的 Core Web Vitals 数据将由您在设置期间为爬网选择的用户代理确定。如果您从移动设备抓取，您将从 API 获取移动 CWV 值。

如何提高CLS  

在PageSpeed Insights中，如果您在“诊断”部分选择 CLS，您可以看到所有相关问题，例如“避免较大的布局变化”。这些是您想要解决的问题。

在大多数情况下，为了优化 CLS，您将解决与图像、字体或可能的注入内容相关的问题。让我们看看每个案例。

1. 为图像、视频、iframe 预留空间 

对于图像，您需要做的是保留空间，这样就不会发生移位，并且图像只是填充该空间。这可能意味着通过在  标记中指定图像的高度和宽度来设置图像，如下所示：

<img src=“cat.jpg" width="640" height="360" alt=“cat with string" />

对于响应式图像，您需要使用如下所示的 srcset：

<img
width="1000"
height="1000"
src="puppy-1000.jpg"
srcset="puppy-1000.jpg 1000w, puppy-2000.jpg 2000w, puppy-3000.jpg 3000w"
alt="Puppy with balloons" />

您还需要预留视频和 iframe 等所需的空间。对于广告等动态内容，您需要保留所需的最大空间。

还有一个相对较新的 CSS 属性，称为宽高比，它允许您根据屏幕尺寸设置动态宽度，浏览器将为您计算合适的高度。

2.优化字体

对于字体，目标是尽可能快地将字体显示在屏幕上，并且不与其他字体交换。加载或更改字体时，最终会出现明显的变化，例如不可见文本闪烁 (FOIT) 或无样式文本闪烁 (FOUT)。

如果您可以使用系统字体，请这样做。无需加载任何内容，因此不会出现导致替换的延迟或更改。

如果您必须使用自定义字体，当前最小化 CLS 的最佳方法是结合<link rel=”preload”>（这将尝试尽快获取您的字体）和 font-display: optional（这将为您的字体提供一小段加载时间）。 

如果字体没有及时加载，初始页面加载将仅显示默认字体。然后，您的自定义字体将被缓存并显示在后续页面加载中。

3.使用不触发布局变化的动画

有一些 CSS 属性值会触发布局转换，例如“box-shadow”、“box-sizing”、“top”、“left”等不应设置动画的值。相反，您需要使用“transform”动画来避免布局变化。 

4. 确保您的页面符合 缓存条件

后退/前进缓存将页面保留在浏览器缓存中。它允许立即加载已加载的页面，这意味着不会发生布局变化。

这一优化工作相当可观。下面列出了主要策略，

主要策略：

• 切勿使用卸载事件

• 尽量减少使用 Cache-Control：无存储

• bfcache 恢复后更新陈旧或敏感数据

• 避免 window.opener 引用

• 在用户离开之前始终关闭打开的连接

• 进行测试以确保您的页面可缓存

最后的想法

自从引入 CLS 以来，我们已经看到了缓存和 CSS 纵横比等创新技术来帮助解决这个问题。我预计未来我们会看到更多创新和更多新方法来防止布局变化。

翻译作品，原作者：Patrick Stox

更多文章：

Google SEO: 如何使用 PageSpeed Insights

Core Web Vitals ：页面速度现在对 SEO 更为重要