避免布局突然变化以提升用户体验的方法

发布日期：2020年5月5日，最后更新日期：2025年2月7日

累计布局偏移（CLS）是三个核心网页指标之一。CLS 通过结合视口内可见内容的偏移程度以及受影响元素的移动距离，来衡量内容的不稳定性。

布局偏移会分散用户的注意力。假设你刚开始阅读一篇文章，突然页面中的元素发生了移动，导致难以阅读，不得不重新开始。这种情况在浏览新闻网站、点击”搜索”按钮或”加入购物车”按钮时经常发生。这种体验在视觉上令人不快且容易让人感到沮丧。通常，这是由于其他元素突然添加到页面或调整大小，导致已显示元素被迫移动。

要提供优质的用户体验，建议在至少75%的页面访问中将CLS控制在0.1以下。

良好的CLS标准

• 良好的CLS值应低于0.1
• 较差的CLS值通常高于0.25

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

本指南将介绍如何优化布局偏移的常见原因。

CLS的主要成因包括：

• 未设置尺寸的图片
• 未设置尺寸的广告、嵌入内容和iframe
• 动态插入的未设置尺寸内容（如广告、嵌入内容和iframe）
• 网页字体

注意：要了解本指南内容的概述，请观看 Google I/O 2020 关于优化核心网页指标的视频。

理解布局偏移的原因

在探讨CLS常见问题的解决方案之前，了解CLS得分及其变化原因至关重要。

实验室工具与实际用户数据中的CLS

通常，通过Chrome用户体验报告（CrUX）测量的CLS可能与Chrome DevTools和其他实验室工具测量的结果不一致，这并不表示数据有误。像Lighthouse这样的网页性能实验室工具通常只进行基本页面加载，并测量部分网页性能指标以提供指导，因此可能无法捕获页面的全部CLS（不过Lighthouse用户流程可以超越默认的页面加载审计进行测量）。

CrUX是核心网页指标计划的官方数据集。因此，CLS不仅会在首次页面加载时测量（实验室工具通常如此），还会在整个页面生命周期内进行测量。

布局变化在页面加载过程中非常常见，因为此时需要获取首次渲染所需的所有资源。然而，它们也可能在初始加载后发生。许多加载后的偏移可能是用户交互的结果，如果这些偏移发生在交互后的500毫秒内，则会被视为预期偏移，不计入CLS得分。

但是，用户未预期的加载后偏移（例如，进一步滚动页面时延迟加载的内容被加载，从而导致偏移）可能会被计入，如果这些偏移发生在没有合格交互的区域。加载后CLS的常见原因包括单页应用等过渡交互。在这种情况下，偏移可能超过500毫秒的宽限期。

PageSpeed Insights在”了解真实用户如何使用”部分显示来自URL的用户CLS，在”诊断性能问题”部分显示基于实验室的加载CLS。这些值之间的差异可能是由加载后的CLS引起的。

在此示例中，通过CrUX测量的CLS远大于通过Lighthouse测量的CLS。

注意：PageSpeed Insights在存在URL级别数据时显示该数据，否则回退到源站级别数据。请务必检查显示的数据，以免浪费时间跟踪源站其他页面实际存在的CLS问题。在上面的示例中，图像右上角显示这是URL级别的数据。

识别加载相关的CLS问题

如果PageSpeed Insights中的CrUX和Lighthouse CLS得分大致相同，通常表明存在Lighthouse检测到的加载CLS问题。此时，Lighthouse的两项审计提供了详细信息，说明由于未指定宽度和高度而导致CLS的图片。同时，它还列出了页面加载时发生偏移的所有元素及其对CLS的影响。通过筛选CLS审计可以查看这些审计。

Lighthouse的详细CLS诊断信息。

注意：Lighthouse识别的是发生移动的元素，但通常这些是受影响的元素，而非导致CLS的根本原因元素。例如，当新元素插入DOM时，其下方的元素会出现在此审计中，但根本原因是上方添加的新元素。尽管如此，偏移元素的信息通常足以识别和解决根本原因。

DevTools的”性能”面板提供了丰富的布局偏移信息。

在”性能”面板中记录新跟踪时，结果的”布局偏移”轨道会添加显示布局偏移簇的紫色条。点击菱形可以查看偏移动画，并在”概要”面板中显示详细信息。

布局偏移在”布局偏移”轨道中高亮显示。紫色线条将偏移分组到偏移簇中，簇内的单个偏移用菱形表示。菱形的大小与偏移大小成正比，因此您可以关注最大的偏移。

点击偏移会显示一个弹出窗口，其中包含偏移动画，偏移元素以紫色高亮显示。

此外，”概要”视图中的布局偏移记录显示了开始时间、偏移得分和发生偏移的元素。这对于深入了解加载CLS问题特别有帮助，这些问题可以在重新加载性能配置文件中轻松复现。

它还会链接到左侧”洞察”面板中显示的”布局偏移原因”洞察。该洞察顶部显示总CLS以及布局偏移的可能原因。

识别加载后的CLS问题

当CrUX和Lighthouse的CLS得分不一致时，通常表明存在加载后的CLS。没有实际用户数据的情况下，这类变化可能难以追踪。关于收集实际用户数据的信息，请参阅测量实际环境中的CLS元素。

“性能”面板的实时指标视图允许您在操作页面的同时监控CLS得分，从而识别导致布局偏移的交互。

性能面板的实时指标视图允许在操作网页时监控CLS得分。

除了使用DevTools，您还可以在浏览网页时使用粘贴到控制台的Performance Observer来记录布局变化。

设置好偏移监控后，尝试复现加载后的CLS问题。CLS通常在用户滚动页面时发生，当延迟加载的内容在没有为其预留空间的情况下完全加载。用户将指针悬停在内容上导致内容移动也是加载后CLS的常见原因。在这些操作期间发生的内容偏移，即使是在500毫秒内，也被视为意外偏移。

有关详细信息，请参阅调试布局偏移。

识别CLS的常见原因后，您还可以使用Lighthouse的持续时间用户流程模式，确保常见的用户流程不会因引入布局偏移而降低。

测量实际环境中的CLS元素

在实际环境中监控CLS对于识别CLS发生的情境和缩小可能原因非常有用。与大多数实验室工具类似，实际环境工具只测量发生变化的元素，但通常提供足够信息来确定原因。您还可以使用CLS实际环境测量来确定哪些问题应优先修复。

web-vitals库包含可以收集此附加信息的归因函数。有关详细信息，请参阅在实际环境中调试性能。其他RUM提供商同样开始收集和显示这些数据。

注意：在实际环境中测量CLS的RUM解决方案（如web-vitals库）可能会显示与CrUX数据不同的值，如为什么CrUX数据与RUM数据不同？一文中所述。特别是，在iframe中发生的CLS无法通过Web API测量，但对用户可见，因此包含在CrUX中。请注意，实际环境数据虽然对识别CLS问题非常有帮助，但在某些情况下可能不完整。

CLS的常见原因

识别CLS原因后，就可以开始修复问题。本节将讨论CLS的常见原因及其规避方法。

未设置尺寸的图片

请务必在图片和视频元素中包含尺寸属性width和height。或者，使用CSS aspect-ratio等方法预留所需空间。这种方法使浏览器能够在图片加载期间为文档分配适量的空间。

未指定宽度和高度的图片。

指定了宽度和高度的图片。

Lighthouse 6.0中图片尺寸设置对CLS的影响。

图片width和height属性的历史

在互联网早期，开发者会在标签中添加width和height属性，以便浏览器在开始获取图片之前为页面分配足够的空间。这有助于最大限度地减少重排和重布局。

此示例中的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 × (16 / 9) = 640像素。
• 如果puppy.jpg的宽度为640像素，则高度为640 × (9 / 16) = 360像素。

如果知道图片的宽高比，浏览器就可以计算并预留足够空间用于高度和相关区域。

图片尺寸设置的最新最佳实践

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

所有浏览器都为元素添加了基于现有width和height属性的默认宽高比。

这会在图片加载之前根据width和height属性计算宽高比。此信息在布局计算开始时提供。

该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定义了浏览器可以选择的图片以及每张图片的尺寸。要能够设置的width和height属性，所有图片必须使用相同的宽高比。

图片的宽高比也可以通过艺术指导进行更改。例如，在窄视口中包含裁剪的图片快照，在桌面端显示完整图片。

在Chrome、Firefox和Safari中，现在可以为特定元素内的元素设置width和height。

广告、嵌入内容和其他延迟加载内容

不仅图片会导致布局偏移。动态插入的内容，如广告、嵌入内容和iframe，可能会将其后显示的内容向下推，从而增加CLS。

广告是网络上布局偏移的最大原因之一。广告网络和发布商支持动态广告尺寸。增加广告尺寸可以提高点击率和拍卖中的竞争广告数量，从而提升性能和收入。然而，这种方法可能导致次优的用户体验，因为正在查看的内容被广告推到页面下方。

嵌入小部件允许在页面中包含可移植的网络内容，例如YouTube视频、Google地图和社交媒体帖子。但是，这些小部件通常在加载前不知道内容的大小。因此，为小部件预留的空间并不总是得到保证，导致加载时发生布局偏移。

所有这些问题的处理技术都相似。主要区别在于您对插入内容的控制程度。对于由第三方（如广告合作伙伴）嵌入的内容，您可能不知道嵌入内容的确切尺寸，或者可能无法控制嵌入内容内发生的布局偏移。

为延迟加载内容预留空间

如果延迟加载内容要放置在内容流中，通过在初始布局中预留该内容的空间可以避免布局偏移。

一种方法是添加min-height CSS规则来预留空间。对于广告等响应式内容，可以使用aspect-ratio CSS属性，类似于浏览器自动为指定尺寸的图片使用的方法。

为广告预留空间可以防止布局偏移。

可能需要使用媒体查询来考虑不同外形尺寸之间广告或占位符尺寸的细微差异。

对于高度不固定的内容（如广告），可能无法精确预留完全消除布局偏移所需的空间。如果投放的广告较小，发布商可以对较大的容器设置样式以避免布局偏移，或者基于历史数据为广告位选择最合适的尺寸。这种方法的缺点是页面上的空白区域增加。

或者，也可以将初始大小设置为预期的最小尺寸，并允许在出现较大内容时发生一定偏移。如前所述，使用min-height可以在减少布局偏移影响的同时，根据需要扩展父元素。

避免在未返回广告等情况下折叠预留的占位符空间。移除为元素预留的空间可能会导致CLS增加，类似于插入内容时的情况。

将延迟加载内容放置在视口底部

通常，动态插入的内容越靠近视口顶部，其引起的布局偏移就越大。如果无法为插入内容预留空间，建议将其放置在页面靠后部分，以减轻对CLS的影响。

避免在无用户交互的情况下插入新内容

您可能遇到过这样的情况：网站加载时，用户界面元素突然从视口顶部或底部弹出，导致布局偏移。广告以及移动页面其他内容的横幅和表单经常会出现此问题。

未预留空间的动态内容。

如果需要显示此类UI组件，应提前在视口中预留足够空间（例如使用占位符或骨架屏UI）。或者，确保内容以覆盖层形式显示，不属于文档流的一部分。有关此类组件的其他建议，请参阅Cookie通知最佳实践文章。

动态添加内容有时是用户体验的关键部分，例如将商品添加到商品列表或更新实时信息流内容。为避免这些情况下的意外布局偏移，可以采用以下几种方法：

• 在固定大小的容器内将旧内容替换为新内容，或使用轮播并在过渡后删除旧内容。在加载新内容期间，禁用链接和控件，防止误点击或轻点。过渡完成后重新启用。
• 允许用户启动新内容的加载（例如”加载更多”或”刷新”按钮）。建议在用户操作之前预取内容，以便立即显示。请注意，用户输入后500毫秒内发生的布局偏移不计入CLS。
• 在屏幕外无缝加载内容，并显示一个覆盖层通知用户内容可用（例如”向上滚动”按钮）。

动态加载内容而不引起意外布局偏移的示例。左：Twitter加载实时信息流内容。右：Chloé网站的”查看更多”示例。请参阅YNAP团队如何优化内容加载时的CLS。

注意：如果内容加载可能超过500毫秒（例如需要网络请求），请在该500毫秒期间内预留预期空间，并预先考虑未来偏移的影响，以确保偏移不计入CLS得分。

动画

更改CSS属性值有时需要浏览器响应这些更改。诸如box-shadow和box-sizing等值会触发重布局、重绘和合成。更改top和left属性会导致布局偏移，即使移动的元素位于其自己的图层上。请勿使用这些属性制作动画。

可以更改其他CSS属性而不会触发重布局。例如，使用transform动画来移动、缩放、旋转或倾斜元素。

使用translate的合成动画不会影响其他元素，因此不计入CLS。有关触发布局偏移的CSS属性的更多信息，请参阅高性能动画。

网页字体

通常，网页字体的下载和渲染在网页字体下载之前以下列方式之一处理：

• 回退字体与网页字体交换，导致无样式文本闪烁（FOUT）。
• 在网页字体可用且文本可见之前，使用回退字体显示”不可见”文本（FOIT - 不可见文本的闪烁）。

这两种方法都可能导致布局偏移。即使文本不可见，它也会使用回退字体进行布局，因此当网页字体加载时，文本块及其周围内容会发生移动，与使用可见字体时的情况类似。

要最小化文本偏移，请使用以下工具：

• font-display: optional 确保网页字体仅在初始布局时可用的情况下使用，从而避免重布局。
• 确保使用了合适的回退字体。例如，使用font-family: "Google Sans", sans-serif; 会在”Google Sans”加载期间使用浏览器的无衬线回退字体。仅使用font-family: "Google Sans" 而不指定回退字体，将使用默认字体。在Chrome中，这是衬线字体”Times”，其匹配度低于默认的无衬线字体。
• 使用新的size-adjust、ascent-override、descent-override和line-gap-override API，最小化回退字体和网页字体之间的尺寸差异，如改进字体回退博客文章中所述。
• 使用字体加载API可以缩短获取所需字体所需的时间。
• 使用”尽快获取关键的网页字体。预加载的字体更有可能赶上首次绘制，从而避免布局偏移。

有关其他字体推荐做法，请参阅字体推荐做法。

通过使页面符合bfcache条件来减少CLS

降低CLS得分的一个有效方法是确保网页符合前后缓存（bfcache）的条件。

bfcache将页面在离开后短暂保存在浏览器内存中，因此当用户返回时，页面会以完全相同状态恢复。这意味着页面立即可用，且不会发生加载期间可能出现的偏移。

然而，首次页面加载时仍可能发生布局偏移。如果无法完全解决，至少在bfcache导航中避免偏移，从而减轻影响。

前后导航在许多网站中很常见，例如内容页面、类别页面、返回搜索结果等操作。

当此功能在Chrome中推出时，CLS得到了显著改善。

虽然bfcache在所有浏览器中默认启用，但由于各种原因，某些网站可能不符合bfcache条件。请参阅bfcache指南，详细了解如何测试和识别阻碍使用bfcache的问题，并充分利用此功能来提升网站的整体CLS得分。

总结

如本指南前半部分所述，有多种技术可用于识别和改进CLS。核心网页指标内置了容忍度，因此即使无法完全消除CLS，使用这些技术中的一些也可以减轻其影响。这将帮助您保持在限制范围内，并提高网站用户的便利性。