优化 Cumulative Layout Shift

了解如何避免突发的布局偏移，以提升用户体验

Addy Osmani
Barry Pollard

发布时间：2020 年 5 月 5 日，上次更新时间：2025 年 2 月 7 日

Cumulative Layout Shift (CLS) 是三项 Core Web Vitals 指标之一。它通过以下方式衡量内容的不稳定性：将视口中可见内容的偏移量与受影响元素的移动距离相结合。

布局偏移可能会让用户分心。假设您正在阅读一篇文章，突然间，网页上的元素四处移动，让您感到困惑，需要重新找到自己的位置。这种情况在网络上非常常见，包括在阅读新闻或尝试点击“搜索”或“添加到购物车”按钮时。这种体验在视觉上会让人感到不适和沮丧。当由于另一个元素突然添加到网页或调整大小而导致可见元素被迫移动时，通常会发生这种情况。

为了提供良好的用户体验，网站应尽力使至少 75% 的网页访问事件的 CLS 值不超过 0.1。

良好的 CLS 值低于 0.1，较差的值高于 0.25，介于两者之间的值需要改进
良好的 CLS 值是 0.1 或更低。较差的值大于 0.25。

与其他核心网页指标（以秒或毫秒为单位的时间值）不同，CLS 得分是一个无单位的值，它基于对内容移动量和移动距离的计算。

在本指南中，我们将介绍如何优化导致布局偏移的常见原因。

CLS 较差的最常见原因如下：

  • 没有尺寸的图片。
  • 没有尺寸的广告、嵌入内容和 iframe。
  • 动态注入的内容，例如没有尺寸的广告、嵌入内容和 iframe。
  • 网络字体。

了解布局偏移的原因

在开始寻找常见 CLS 问题的解决方案之前，请务必先了解您的 CLS 得分以及发生位移的位置。

实验室工具中的 CLS 与实际环境中的 CLS

我们经常听到开发者认为 Chrome 用户体验报告 (CrUX) 测得的 CLS 不正确，因为它与他们使用 Chrome 开发者工具或其他实验室工具测得的 CLS 不一致。Lighthouse 等 Web 性能实验室工具可能无法显示网页的完整 CLS，因为它们通常会对网页进行基本加载，以衡量一些 Web 性能指标并提供一些指导（不过，Lighthouse 用户流确实允许您进行超出默认网页加载审核范围的衡量）。

CrUX 是 Google 的网页指标计划数据集，因此 CLS 是在网页的整个生命周期内衡量的，而不仅仅是在实验室工具通常衡量的初始网页加载期间。

在网页加载期间，由于系统会提取所有必要的资源来初始呈现网页，因此布局偏移非常常见，但布局偏移也可能在初始加载后发生。许多加载后偏移可能是用户互动的结果，因此不会纳入 CLS 得分中，因为这些偏移是预期的偏移，前提是它们发生在相应互动后的 500 毫秒内。

不过，如果用户没有进行符合条件的互动，但页面上仍出现了用户意想不到的其他加载后位移，则可能会包含这些位移。例如，如果您进一步滚动页面，系统会加载延迟加载的内容，从而导致位移。加载后 CLS 的其他常见原因是过渡互动，例如单页应用上的过渡互动，这些互动所花费的时间超过了 500 毫秒的宽限期。

PageSpeed Insights 会在“了解真实用户的体验”部分中显示网址的用户感知 CLS，并在“诊断性能问题”部分中显示基于实验的加载 CLS。这些值之间的差异很可能是加载后 CLS 造成的。

PageSpeed Insights 显示网址级数据，突出显示实际用户 CLS，该值远大于 Lighthouse CLS
在此示例中，CrUX 测得的 CLS 比 Lighthouse 测得的 CLS 大得多。

识别加载 CLS 问题

如果 PageSpeed Insights 的 CrUX 和 Lighthouse CLS 分数大致一致，通常表明存在 Lighthouse 检测到的加载 CLS 问题。在这种情况下，Lighthouse 将通过两项审核来提供更多信息：一是关于因缺少宽度和高度而导致 CLS 的图片，二是列出网页加载时发生偏移的所有元素及其 CLS 贡献。您可以通过过滤 CLS 审核来查看这些审核：

显示 CLS 审核的 Lighthouse 屏幕截图，其中包含更多信息，可帮助您找出并解决 CLS 问题
Lighthouse 的详细 CLS 诊断信息。

开发者工具中的“性能”面板可提供有关布局偏移的丰富信息：

在 Chrome 开发者工具的“性能”面板中显示布局偏移记录。
在“性能”面板中记录新轨迹后，结果的布局偏移轨道会填充紫色条，显示 Layout Shift 集群。点击菱形会在摘要面板中显示偏移的动画效果和详细信息。

布局偏移会在布局偏移轨道中突出显示。紫线将轮班分组为轮班集群，菱形表示相应集群中的各个轮班。菱形的大小与变化幅度成正比，因此您可以重点关注变化幅度最大的数据。

点击某个位移后，系统会显示一个弹出式窗口，其中包含该位移的动画，并以紫色突出显示元素位移。

此外，Layout Shift 记录的摘要视图还包括开始时间、轮班得分以及轮班的元素。这对于详细了解加载 CLS 问题特别有用，因为使用重新加载性能配置文件可以轻松重现此问题。

此链接还指向左侧数据分析面板中显示的布局偏移的罪魁祸首数据分析，该数据分析会在顶部显示总 CLS，以及可能导致布局偏移的原因。

识别加载后 CLS 问题

如果 CrUX 和 Lighthouse CLS 得分不一致，通常表示存在加载后 CLS。如果没有实地数据，很难找出这些变化的原因。如需了解如何收集实地数据，请参阅衡量实地 CLS 元素。

通过“性能”面板的实时指标视图，您可以与网页互动并监控 CLS 分数，以找出导致布局发生大幅偏移的互动。

在 Chrome 开发者工具的“性能”面板的实时指标屏幕中显示的布局偏移记录。
借助“性能”面板的实时指标视图，您可以在与网页互动的同时监控网页的 CLS 得分。

除了使用开发者工具之外，您还可以浏览网页，同时使用粘贴到控制台中的性能观测器记录布局偏移。

设置好偏移监控后，您可以尝试重现任何加载后 CLS 问题。CLS 通常发生在用户滚动浏览网页时，当延迟加载的内容在没有预留空间的情况下完全加载时，就会发生 CLS。用户将指针悬停在内容上时，内容发生位移是另一种常见的加载后 CLS 原因。在上述任一互动期间发生的任何内容偏移均视为意外偏移，即使偏移发生在 500 毫秒内也是如此。

如需了解详情，请参阅调试布局偏移。

确定 CLS 的任何常见原因后，您还可以使用 Lighthouse 的时间段用户流程模式来确保引入布局偏移不会导致典型用户流程出现倒退。

衡量现场的 CLS 元素

在实际环境中监控 CLS 对于确定发生 CLS 的情况和缩小可能的原因范围非常有价值。与大多数实验室工具一样，现场工具仅测量发生变化的元素，但通常足以提供用于确定原因的信息。您还可以使用 CLS 字段测量结果来确定哪些问题需要优先修复。

web-vitals 库具有归因函数，可用于收集这些额外信息。如需了解详情，请参阅在现场调试性能。其他 RUM 提供商也已开始以类似方式收集和呈现此数据。

CLS 的常见原因

确定 CLS 的原因后，您就可以开始着手解决问题了。在本部分中，我们将介绍一些导致 CLS 的常见原因，以及您可以采取哪些措施来避免这些原因。

未设置尺寸的图片

请务必为图片和视频元素添加 width 和 height 大小属性。或者，使用 CSS aspect-ratio 或类似方法预留所需空间。此方法可确保浏览器在图片加载时能够在文档中分配正确的空间量。

未指定宽度和高度的图片。
指定了宽度和高度的图片。
Lighthouse 报告，显示了在图片上设置尺寸后，累积布局偏移 (CLS) 的前后影响
设置图片尺寸对 CLS 的 Lighthouse 6.0 影响。

图片上 width 和 height 属性的历史记录

在 Web 的早期，开发者会在 <img> 标记中添加 width 和 height 属性，以确保在浏览器开始提取图片之前，页面上已分配足够的空间。这样可以最大限度地减少重排和重新布局。

<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons">

此示例中的 width 和 height 不包含单位。这些“像素”尺寸可确保浏览器在网页布局中预留 640x360 的区域。无论实际尺寸是否与此空间相符，图片都会拉伸以适应此空间。

自适应网页设计推出后，开发者开始省略 width 和 height，转而使用 CSS 来调整图片大小：

img {
  width: 100%; /* or max-width: 100%; */
  height: auto;
}

不过，由于未指定图片大小，因此在浏览器开始下载图片并确定其尺寸之前，无法为其分配空间。随着图片加载，文字会向下移动以留出空间，从而造成令人困惑和沮丧的用户体验。

这时就需要考虑宽高比了。图片的宽高比是指其宽度与高度的比率。通常用两个以冒号分隔的数字来表示（例如 16:9 或 4:3）。对于 x:y 宽高比，图片宽度为 x 个单位，高度为 y 个单位。

这意味着，如果我们知道其中一个维度，就可以确定另一个维度。对于 16:9 的宽高比：

  • 如果 puppy.jpg 的高度为 360 像素，则宽度为 360 x (16 / 9) = 640 像素
  • 如果 puppy.jpg 的宽度为 640 像素，则高度为 640 x (9 / 16) = 360 像素

了解图片的宽高比后，浏览器便可计算并预留足够的高度和相关区域空间。

设置图片尺寸的现代最佳实践

由于现代浏览器会根据图片的 width 和 height 属性设置图片的默认宽高比，因此您可以通过在图片上设置这些属性并在样式表中添加上述 CSS 来防止布局偏移。

<!-- set a 640:360 i.e a 16:9 aspect ratio -->
<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons">

然后，所有浏览器都会根据元素的现有 width 和 height 属性添加默认宽高比。

此属性用于在图片加载之前根据 width 和 height 属性计算宽高比。它会在布局计算开始时提供此信息。一旦图片被告知具有特定宽度（例如 width: 100%），系统就会使用宽高比来计算高度。

此 aspect-ratio 值由主要浏览器在处理 HTML 时计算得出，而不是使用默认的用户代理样式表（如需深入了解原因，请参阅这篇博文），因此显示的值略有不同。例如，Chrome 在“元素”面板的“样式”部分中会显示如下内容：

img[Attributes Style] {
  aspect-ratio: auto 640 / 360;
}

Safari 的行为类似，使用 HTML 属性样式来源。Firefox 不会在其检查器面板中显示此计算出的 aspect-ratio，但会将其用于布局。

上述代码中的 auto 部分非常重要，因为它会在图片下载后使图片尺寸覆盖默认宽高比。如果图片尺寸不同，这仍然会导致图片加载后出现一些布局偏移，但这样可以确保在图片可用时仍使用图片宽高比，以防 HTML 不正确。即使实际宽高比与默认宽高比不同，它造成的布局偏移也比未提供尺寸的图片的 0x0 默认尺寸造成的布局偏移要小。

如需深入了解宽高比，并进一步思考自适应图片，请参阅利用媒体宽高比实现无卡顿的网页加载。

如果图片位于容器中，您可以使用 CSS 将图片调整为容器的宽度。我们设置了 height: auto;，以避免使用固定的图片高度值。

img {
  height: auto;
  width: 100%;
}

自适应图片呢？

使用自适应图片时，srcset 用于定义您允许浏览器在哪些图片之间进行选择以及每张图片的大小。为确保可以设置 <img> 宽度和高度属性，每张图片应使用相同的宽高比。

<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"
/>

图片宽高比也可能会因艺术指导而发生变化。 例如，您可能希望在窄视口中显示图片的裁剪版本，而在桌面设备上显示完整图片：

<picture>
  <source media="(max-width: 799px)" srcset="puppy-480w-cropped.jpg" />
  <source media="(min-width: 800px)" srcset="puppy-800w.jpg" />
  <img src="puppy-800w.jpg" alt="Puppy with balloons" />
</picture>

Chrome、Firefox 和 Safari 现在支持在给定 <picture> 元素内的 <source> 元素上设置 width 和