累积布局偏移 CLS：如何测量并提高分数
较高的累积布局偏移分数可能会导致令人沮丧的用户体验，以及搜索引擎排名的可见性下降。
为了给用户提供最佳体验，Google 的排名因素不仅关注网站的内容或权威性，还关注其加载速度。Google 的排名系统现在包含核心网页指标 (CLS)，其中核心网页指标 (CLS) 是关键组成部分，旨在提升网页性能。
通过对重要元素使用一致的布局和大小，并确保图像和视频具有适当的纵横比来降低 CLS。
文章目录
什么是累积布局偏移 (CLS)？为什么它很重要？
累积布局偏移 (CLS) 是一种 Web 性能指标，用于计算给定网页的视觉稳定性。计算方法是测量页面整个生命周期内的所有布局偏移分数，并选择单个会话窗口内最大的一组布局偏移。
自 2021 年 6 月 Google 推出“网页体验更新”以来， CLS 已成为一项排名因素 。这意味着您的 CLS 分数（连同 “最大内容绘制” 和 “首次输入延迟” 指标）现在会影响您的 SEO。虽然它可能只是一个次要的排名因素，但您的 CLS 分数（以及其他核心网络指标） 可能会反映您从 Google 和其他搜索引擎获得的流量。
此外，CLS 与用户行为指标相关。跳出率可能不会影响 Google 排名，但控制跳出率对于留住网站访客并防止他们转向竞争对手至关重要。
对于用户来说，多次更改布局可能会带来各种负面影响，轻则略感厌烦，重则导致误购。这不仅会给公司带来差评，还会阻碍用户再次访问网站，甚至会吓跑新客户。
通过优化的 CLS 提供更好的用户体验
另一方面，重视 CLS 评分的网站更能赢得 Google 的信任。用户也会认为这些网站更加现代、优雅，并且不会用干扰性广告分散用户的注意力。
经过优化的 CLS 布局稳定，用户更容易融入可预测的环境。在一个没有令人困惑的切换的网站上，用户可以更快地找到所需内容，从而增加他们在对网站失去耐心之前订购您的产品或服务的可能性。
累积布局偏移量较高的常见原因
页面上缺少指定空间的每一个内容都会影响 CLS 分数，导致其意外加载并取代其他内容，从而给用户带来困惑。
据 Google 称 ，导致 CLS 过高的最常见原因有：
- 源代码中未提供尺寸的图像，
- 无尺寸的动态广告、嵌入广告和 iframe，
- 动态注入的内容，
- Web 字体导致 FOIT/FOUT（不可见文本闪烁和无样式文本闪烁），
- 更新 DOM 之前等待网络响应的操作。
什么是好的 CLS 分数？
分数越低，布局越稳定。Google 性能衡量工具使用的官方 CLS 阈值如下：
- 良好 – CLS 低于 0.1，
- 需要改进 – CLS 介于 0.1 和 0.25 之间，
- 差 – CLS 高于 0.25。
为了达到“良好”的 CLS 门槛，Google 建议将 75% 的页面浏览量的 CLS 分数保持在 0.1 以下。
如何计算 CLS
CLS 比较两个渲染的帧来计算页面元素移动了多少以及受布局偏移影响的视口比例。
CLS 包含两个因素：影响分数和距离分数。
影响分数
要计算影响分数，首先需要计算影响区域。
影响区域定义了布局偏移所影响的区域。Google 会将原始框架与布局偏移后的框架进行比较，并识别所有受影响的页面元素，从而定义影响区域。
影响区域通常是一个矩形，但如果有多个布局变化（水平和垂直），它可能会是一个更复杂的形状。
现在我们来谈谈影响分数。
要定义影响分数，将影响区域除以视口的面积（无需向下滚动即可在屏幕上看到的页面部分）：
影响区域面积/视口面积=影响分数
距离分数
首先需要计算移动距离。
移动距离定义了元素在布局移动前后的位置距离。它基本上回答了这个问题：元素移动了多远？
一旦计算出移动距离，就可以通过将最大移动距离除以视口高度来计算距离分数：
最大移动距离/视口高度=距离分数
计算单帧的布局偏移
谷歌的研究人员决定实施一种在会话窗口中对布局变化进行分组的机制。
会话窗口本质上是页面生命周期内的时间框架，其中总结了布局变化。
当页面发生布局切换时，会打开一个会话窗口。该窗口最多持续 5 秒，但如果在初始切换后 1 秒内没有发生连续的布局切换，则会提前关闭。
然后，布局变化会在会话窗口内汇总。给定页面的最终 CLS 得分是总得分最高的会话窗口的得分——其他会话窗口不会影响你的 CLS。
举个例子：
- 页面开始呈现。
- 1秒后，布局发生0.1的偏移。
- 0.5秒后，再次发生0.2的偏移。
- 两秒后，发生0.25的偏移，然后页面关闭。
两个初始布局转变发生在同一会话窗口内，因此我们将分数加在一起。
第三次布局切换发生在 2 秒后，因此它应该放在一个单独的会话窗口中。上一个会话窗口在第二次布局切换后一秒关闭。
因此，在这种情况下，页面的最终 CLS 得分将是 0.1 + 0.2 = 0.3！第三次布局调整不会影响最终得分。
关于 CLS 应该了解的其他事项
在我们深入探讨如何衡量和提升网站的 CLS 之前，全面了解 CLS 至关重要。这需要理解另外三个关键点。
有意改变布局
CLS 会忽略用户输入后半秒内出现的所有布局变化。这被称为输入排除窗口。这意味着每次用户与网站互动后，CLS 测量都会停止 500 毫秒。因此，如果布局更改是用户故意为之，并且是由用户引起的，则不会影响你的 CLS。
生成布局偏移
通常，布局转变发生在页面加载时 – 但它们也可能稍后发生，并且如果它们发生在输入排除窗口之外，则会影响 CLS 分数。
如何测量累积布局偏移？
由于 CLS 可以在实验室和真实用户交互中进行测量 ， 因此可以并且应该同时查看你的 CLS 实验室分数和您的 CLS 真实用户数据。
使用实验室数据测量 CLS
实验室数据是指使用工具模拟用户的体验。它与实验室测试完全一样——几乎真实，但在受控的环境中，结果仅涵盖一小部分可能的情况。
通过下面提到的性能工具访问 CLS 实验室数据。
使用真实用户数据测量 CLS
真实用户数据是基于真实用户互动的数据。这些数据由 Google 和其他第三方收集，可以更全面地了解情况。将真实用户数据与实验室结果进行比较。对于 Google 而言，真实用户数据的主要来源是 Chrome 用户体验报告（也称为 CrUX）。
CrUX 数据可以通过以下方式访问：
JavaScript API
基于真实用户数据的 CLS 的另一个来源是 JavaScript API – 如果有一些编码经验，那么可以用它做一些有趣的事情，例如按分钟测量 CLS。
如何找到导致 CLS 分数较低的因素
使用我们上面讨论的工具来识别有助于提高 CLS 分数的页面元素。最简单的方法是打开 Google Search Console 中的“核心网页指标”报告。
点击“打开报告”按钮，查看损害网站性能的 URL 列表。CLS 是报告中列出的三个潜在问题之一。
现在，对每个已显示的 URL 进行 Lighthouse 审核。Chrome DevTools 可以帮助你查看页面上突出显示的变动元素。
如何解决累积布局偏移问题？
让我们通过修复 CLS 问题来提升网站的用户体验和搜索引擎排名。我们将介绍优化图片加载、预留空间以及减少意外布局更改等方法。
如何避免布局发生较大变化的技巧
预防胜于事后处理。CLS 问题可以补救，但我们首先来了解一些简单的技巧，以便彻底避免这些问题。
从懒加载排除英雄图片
使用懒加载，优化页面加载并减轻启动时的负担。然而，英雄图像可能并不适合延迟加载，尤其是当它出现在首屏的显著位置时，因为这种技术可能不是这类元素的最佳解决方案。
使用 CSS 实现动画
动画可能会导致布局变化，但并非所有动画都会计入你 的 CLS 分数。Google 会忽略 CSS 变换更改 – 因此，如果动画使用了 CSS 变换属性，它不会影响 CLS。
使用 CDN
内容分发网络 (CDN) 是一组地理位置分散的服务器，它们负责缓存内容并协作以缩短响应用户请求的时间。服务器响应时间过慢可能会导致布局偏移，因此投资 CDN 可以帮助您避免页面加载时间过长。
对菜单和标题进行硬编码
对标题和菜单元素进行硬编码可以使页面布局更加一致和稳定，因为标题和菜单的位置和外观始终相同。
使用字体：显示值和链接 rel = preload
如果网站使用外部托管的字体，它们可能是 FOIT（不可见文本闪烁）和 FOUT（无样式文本闪烁）的主要原因。
当浏览器从外部服务器下载字体时，通常会显示空白，直到自定义字体加载完成。下载并显示字体后，布局通常会移动。这被称为 FOIT（Flashes Of the Invisible Text，不可见文本闪烁）。
另一种情况是，浏览器会一直显示系统字体，直到自定义字体下载完成。我们称之为 FOUT（Flashes of The Unstyled Text）。由于系统字体可能与自定义字体不同，因此占用的空间大小也不同。因此，自定义字体加载后，网站的布局可能会发生显著变化。
为了避免这种情况，使用 font:display 值，例如 auto、swap、block、fallback 和 optional。为了获得更好的效果，还可以使用以下方式预加载字体文件：<link rel=preload> 对于关键字体——这样，它们将作为优先资产下载。
包括视频和图像的宽度和高度元素
在互联网发展的早期，Web 开发者常常在网站的任何地方都包含 width 和 height 元素。它看起来像这样：
<img src=”example.jpg” width=”800″ height=”300″ alt=”Example Image”>
随着响应式网页设计的兴起，这种方法变得不那么流行了。由于这种新方法的出现，开发人员开始使用 CSS 来调整图像大小。
这对他们是好事，但对受 CLS 影响的用户来说就不是那么好了。
使用这种方法，只有在浏览器开始下载图片后才会分配空间。所有图片显示完毕后，布局才会移动，从而造成不必要的偏移。
调整图像大小的一个更好的解决方案是使用纵横比。 纵横比是指宽度与高度的比例（例如 16:9）。
使用纵横比可以让浏览器计算显示图像所需的空间 – 这样可以降低布局偏移的风险。
如果正在处理响应式图像，则可以使用 srcset 属性。 它允许设置多种照片尺寸，并让浏览器显示最佳尺寸。
使用 min-height 和 min-width CSS 属性
使用 min-height 和 min-width CSS 属性分别设置元素的最小高度和最小宽度。它们可以防止元素小于指定的大小，无论其包含的内容量如何。
大小可以用任何长度单位指定，例如像素或百分比，例如：
div {
min-height: 300px;
min-width: 400px;
}
此解决方案适用于不需要响应尺寸而是固定高度或宽度的元素。
正确实现动态注入的内容
动态注入的内容绝不能出现在已加载内容的上方。此规则的唯一例外是当更改是由用户交互引起时。正如我之前提到的，如果此类内容在交互后 500 毫秒内加载完成，则不会影响 CLS。
如果正在寻找有关优化 CLS 的更多资源，Google 发布了一份非常有用的 CLS 优化指南 – 我强烈推荐它。
为广告留出空间
网站是否显示第三方广告？网站上最常见的做法是在加载过程中或加载后动态添加该内容。随着页面其余部分的继续加载，非广告内容可能会逐渐被用户看到。
如果没有足够的空间容纳即将投放的广告，广告可能会在到达时取代可见的非广告内容，正如你所知，这会导致累积布局偏移分数过高。按照以下方法解决这个问题：
- 使用 CSS <div> 标签为静态广告预留适当的空间，
- 如果广告位接受多种尺寸，请预留空间用于投放最大或最小尺寸。或者，使用 Google Ad Manager 报表中的历史填充数据来确定最有可能投放的尺寸。
某些类型的广告无法避免布局变化。流动广告位会根据接收的内容自动调整其大小，为广告创作者提供更大的创作自由。如果必须使用流动广告位，请确保它们在所有页面元素之间尽快加载，并将其放置在首屏以下。
利用动画来提供页面变化的上下文
有效的动画和过渡可以通过平滑地更新页面内容而不会引起任何意外来改善用户体验。
突然且不可预测地移动的内容几乎总是会导致糟糕的用户体验，但从一个位置逐渐自然地移动到另一个位置的内容可以帮助用户理解变化。
请记住为动画使用 CSS，因为 Google 在计算CLS 分数时会忽略它们。
累积布局转变常见问题解答
我希望我已经向你证明了，优化 CLS 是网站所有者普遍关注的问题，而且幸运的是，有很多方法可以改进它。为了完善我们的指南，我们将回答一些关于 CLS 的常见问题。
什么是预期和意外的布局转变？
创建网站时，尽可能低的 CLS 分数不应该成为首要目标。一个好的网站重视稳定性，而不是沉闷乏味，并通过元素的移动吸引用户的注意力。这就是为什么在 SEO 中，我们会区分预期布局变化和意外布局变化。
预期布局偏移发生在用户交互之前。当用户有意识的操作导致元素位置发生变化时，例如，当用户决定展开目录并下推其他内容时，就会发生这种情况。
预期的布局变化应在用户点击后 500 毫秒内发生，如果满足此要求，则将其排除在 CLS 分数计算之外。
基于相反的情况，意外的布局变化会在没有用户干预的情况下发生，这会让用户感到惊讶并干扰他们参与内容的能力。
延迟加载是否会影响累积布局偏移？
是的，延迟加载有时可能会降低 CLS 分数。此技术的目标是通过不一次性加载所有资源来最大限度地减少用户查看页面的等待时间。插图可能不如文章标题重要，因此可以在用户阅读标题后再加载。
可能已经猜到了，如果开发人员在插图出现时没有为其分配足够的空间，它就会将文章的文本向下推，从而导致布局偏移。
当依赖延迟加载时，必须确保指示尚未加载元素大小的 CSS 属性处于正确的位置。关闭特定组件（例如位于文本上方的英雄图像）的延迟加载可能会有所帮助。
CLS 分数是否仅针对首屏内容进行计算？
不会。初始加载时首屏内容本身并不能决定分数。CLS 分数的计算会考虑用户滚动页面时的任何布局变化。
如何在开发阶段预防 CLS？
如果希望在场地建设阶段就限制未来的布局变化，请遵循以下规则：
- 使用 CDN 避免增加服务器响应时间，
- 对主标题和菜单进行硬编码，以便更好地控制它们的位置，
- 使用 font-display CSS 属性来防止由于网页字体加载导致的不可见文本闪烁和布局偏移，
- 在图像和视频元素上使用宽度和高度 CSS 属性来为其外观保留空间，
- 利用相关的 CSS 属性为广告和其他动态内容预留空间，
- 使用动画提供页面变化的上下文。
总结
累积布局偏移量衡量网站的视觉稳定性，重点关注加载过程中布局中发生的任何意外变化。较高的 CLS 分数可能会导致用户体验不佳，并对搜索引擎排名、转化率和跳出率产生负面影响。
要计算 CLS，需要将会话窗口中每次移动的影响分数（元素移动的视口部分）乘以距离分数（相对于视口的移动量）。
指定媒体尺寸，预留广告空间，并避免延迟加载内容以提高 CLS。
后续步骤
Nat H.
您好！我是Nat，imrnat的创始人。感谢您将宝贵的时间托付给我们，我希望您在这篇博文中找到了问题的答案。
如果您仍然想知道如何确切地推进您的自然增长，请查看我们的服务页面并安排一次免费的对话，我们将为您完成所有繁琐的工作。
希望能尽快与您交谈！
