什么是累积布局偏移（CLS），如何改善它

累积布局偏移（CLS）衡量页面加载过程中的视觉稳定性，具体考察元素的大小和移动的距离。它是 Google 用来衡量页面体验的三项核心网页指标。

CLS 在布局偏移最严重的那个五秒窗口内计算。

计算方式如下：

布局偏移分数 = 影响比例 × 距离比例

换一种更易懂的说法：

布局偏移分数 = 发生变化的视口百分比 × 不稳定元素移动的距离

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 是改善幅度最大的核心网页指标。

我们用 Site Audit 的数据在页面层级开展研究时发现，桌面端与移动端的 CLS 表现相近。

用 Site Audit 免费检查你的核心网页指标（包括 CLS）

我们还注意到，许多网站在 CLS 上表现不佳，尤其是在较慢的网络连接下。

在页面层级的数据中，CLS 比来源（origin）层级更差。很可能是因为人们只改善了流量较大的主要页面，许多其他页面仍保留不合格的分数。

如何测量 CLS

测量 CLS 有不同的方式：现场数据（field data）和实验室数据（lab data）。

现场数据来自 Chrome 用户体验报告（CrUX），即来自选择共享数据的真实 Chrome 用户。它能最真实地反映真实世界中的 CLS 表现，也是 Google 在核心网页指标上实际用来评估你的依据。

实验室数据基于在相同条件下开展的测试，以保证测试可重复。Google 不会把它用于核心网页指标。但它对测试很有用，因为 CrUX/现场数据是 28 天的滚动平均值，所以要过一段时间才能看到改动带来的影响。

测量 CLS 的最佳工具取决于你想要的数据类型（实验室/现场），还有你是想针对一个 URL 还是多个 URL。

测量单个 URL 的 CLS

PageSpeed Insights 能够拉取你在 CrUX 数据集中无法以其他方式查询的页面层级现场数据。它还会基于 Google Lighthouse 为你运行实验室测试，并提供来源层级数据，便于把单个页面的性能与整个网站对比。

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

你可以在 Google Search Console 中获取 CrUX 数据，它被分为良好、需要改进和较差三个类别。

点击其中某个问题，就能看到受影响的页面分组明细。这些分组是数值相似、很可能使用同一模板的页面。你在模板中修改一次，该分组内所有页面的问题就会一并修复。

若想大规模地同时获得实验室数据和现场数据，唯一的方法是通过 PageSpeed Insights API。你可以用 Ahrefs 的 Site Audit 轻松接入它，并获得详细说明你性能表现的报告。对于拥有 Ahrefs Webmaster Tools（AWT）账户的已验证网站，这项功能是免费的。

免费工具：一次检查最多 10 个页面或网站的桌面端和移动端核心网页指标与 Lighthouse 指标

这是另一个免费工具，可用于一次检查最多 10 个页面或网站，了解你与竞争对手相比如何。

设置：

• 把你的 Google PageSpeed Insights API 密钥填入指定的输入字段。（点此了解如何生成 API 密钥。）
• 添加你想分析的 URL（每行一个）。

运行分析：

• 点击 "Check CWV" 按钮开始获取指标。进度指示器会显示请求的状态。

查看结果：

• 结果会以分类整齐的评分卡形式展示：
• 每项指标都用颜色标注以显示表现：

核心网页指标批量检查器（Core Web Vitals Bulk Checker）

以下是一个示例输出，用来展示速度评分卡的样子。你可以把它当作一个独立工具使用：网站速度测试。

如何改善 CLS

在 PageSpeed Insights 中，如果你在“诊断”（Diagnostics）部分选择 CLS，就能看到所有相关问题，例如“避免大幅布局偏移”。这些就是你需要解决的问题。

多数情况下，优化 CLS 要处理与图片、字体，或注入内容相关的问题。下面逐一来看。

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

对于图片，你需要做的是预留空间，这样就不会发生偏移，图片只需填充那块空间即可。这可以通过在 <img> 标签内指定图片的高度和宽度来实现，如下所示：

<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 属性叫 aspect-ratio，它允许你根据屏幕尺寸设置动态宽度，浏览器会为你计算出合适的高度。

2. 优化字体

对于字体，目标是尽可能快地把字体显示到屏幕上，并且不用另一种字体来替换它。当字体被加载或替换时，就会出现明显的偏移，比如不可见文本闪烁（FOIT）或无样式文本闪烁（FOUT）。

如果能用系统字体，那就用。系统字体无需加载，因此不会产生延迟或引起偏移的变化。

如果你必须使用自定义字体，目前将 CLS 降至最低的最佳方法是结合使用 <link rel=”preload”>（它会尽快抓取你的字体）和 font-display: optional（它会给你的字体一个较小的加载时间窗口）。

如果字体没能及时加载，首次页面加载只会显示默认字体。之后你的自定义字体将被缓存，并在后续的页面加载中显示出来。

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

有些 CSS 属性值会触发布局偏移，比如 “box-shadow”“box-sizing”“top”“left” 等等，这些都不应被用于动画。相反，你应当使用 “transform” 动画来避免布局偏移。

4. 确保你的页面符合 bfcache 的使用条件

往返缓存（back/forward cache，bfcache）会把页面保留在浏览器缓存中。它能让已加载过的页面瞬间加载，意味着不会发生布局偏移。

这一项优化涉及的内容不少。主要策略列在下面，你也可以点此了解更多。

主要策略：

• 绝不使用 unload 事件
• 尽量减少 Cache-Control: no-store 的使用
• 在 bfcache 恢复后更新过时或敏感的数据
• 避免引用 window.opener
• 在用户离开页面前始终关闭已打开的连接
• 测试你的页面是否可被缓存

最后总结

自 CLS 推出以来，我们已经看到 bfcache 和 CSS aspect-ratio 等有助于解决该问题的创新。我预计未来还会出现更多创新，还有更多防止布局偏移的新方法。

如果你有任何问题，可以在 Twitter 上给我留言。