如何改进 WordPress 网站的累积布局偏移 (CLS)

想知道累积布局转变意味着什么以及对您的 UX 和 SEO 性能有何影响？继续阅读！您将了解什么是 CLS、如何测试它以及影响其分数的因素。您将了解如何避免较大的布局变化并修复移动和桌面上的不良成绩（累积布局变化超过 0.25 或 0.1 秒）。

目录

• 什么是累积布局偏移 (CLS) 又为何重要？
• 什么是好的 CLS 分数
• 如何查找和测量累积布局偏移 (CLS)
• 哪些因素会影响 CLS 并导致评分低
• 如何修复移动设备和桌面设备上的累积布局偏移

---

右键点我复制链接地址，分享页面有积分。

---

---

什么是累积布局偏移 (CLS) 又为何重要？

累积布局变化是一个核心 Web 重要指标，用于衡量页面的视觉稳定性。视觉稳定性是根据在不与页面交互的情况下发生的意外布局变化的次数来计算的。每次内容发生变化（不是因为您单击了链接等）都算作布局变化。

所有这些偏移的总和决定了累积布局偏移分数。

有多少次您正在阅读一篇文章，却因为一些新广告而导致内容下移？或者，您是否曾经尝试单击一个按钮，但最终单击了另一个链接，因为新的大图像突然将内容推低了？

所有这些例子都是布局变化——它们是由页面上的某些元素不稳定并改变它们在页面上的位置引起的。
元素由于不同的原因而改变其位置。例如，在首屏（页面顶部）加载的新图像或广告会迫使某些内容向下并占据页面的另一部分。

你可以想象这种体验对于用户来说是多么烦人。

这就是为什么累积布局转变是评估页面用户体验的三个核心 Web Vitals 指标之一。除了最大内容绘制和首次输入延迟之外，CLS 还将作为页面体验排名因素的一部分于 2021 年 6 月推出。

累积布局偏移占 PageSpeed 得分的 25%，它是与用户体验和新排名因素高度相关的指标。因此，它也可能会影响您的 SEO 性能。

---

什么是好的 CLS 分数

正如我们所解释的，CLS 是页面上发生的所有意外内容变化的总和。根据所有轮班的总和，您的 CLS 成绩可能会通过 Google 的评估。

良好的 CLS 分数应等于或小于 0.1。

CLS 分数在 0.1 到 0.25 之间意味着性能“需要改进”。

如果 CLS 大于 0.25，则等级为“差”。

---

如何查找和测量累积布局偏移 (CLS)

有多种方法可以通过实验室和数据工具来衡量 CLS 分数。以下是您可以使用的最流行的工具：

实验室数据工具：

• Lighthouse (only Lab Data)
• PageSpeed Insights
• Chrome DevTools (only Lab Data)
• Chrome User Experience Report (CrUX)
• Search Console – Core Web Vitals Report
• WebPageTest (only Lab Data)
• GTmetrix (only Lab Data)

您可以在我们关于 PageSpeed Insights 的文章中了解有关实验室数据和现场数据之间差异的更多信息。

让我们看看 PageSpeed Insights 和 Search Console 如何帮助您查找和衡量累积布局变化。

使用 PageSpeed Insights 测量和查找 CLS

PageSpeed Insights 是测量和查找累积布局偏移的最佳工具之一。

该工具为您提供实验室和现场数据的 CLS 分数，以便您可以测量受控数据和用户数据。

PageSpeed Insights 还向您显示导致布局变化的潜在元素。

下面的示例显示 CLS 的现场数据和实验室数据得分都很差：

让我们看几个例子。

跳转到“诊断”区域，您可以在“避免较大的布局变化”部分下找到导致问题的原因。

在这种情况下，只有一个元素影响 CLS。它是页面上包含的预格式化文本，用于解释如何在 JavaScript 中测量 CLS：

正如您所看到的，PSI 为您提供与每个元素相关的分数，以便您可以了解每个元素对总体 CLS 分数的贡献程度。

如果本节中列出了多个元素，则应开始修复对不良成绩影响最大的元素。通过解决最相关的问题，您可能会获得足够好的分数来通过 Google 的评估。

注意：假设您的现场成绩很差，但实验室成绩很好 – 是的，这种情况有可能发生！在这种情况下，您应该确保您在现场数据中的 CLS 也获得良好的分数。请记住，现场数据与真实的用户体验相关。
对于 CLS，实验室数据仅考虑页面加载期间的布局变化。另一方面，字段数据统计整个访问期间（从进入到页面关闭）的所有布局变化。因此，它比实验室数据更能代表您的站点。Google 使用字段数据进行搜索排名并非巧合。

在 Search Console 上测量和查找 LCP

除了测量 CLS 分数并查找导致布局变化的元素之外，您还应该分析站点范围的性能。

Search Console 中的 Core Web Vitals 报告是查找受同一问题影响的所有网址的最佳方式。例如，在移动或桌面报告的“详细信息”选项卡中，您可能会看到“ CLS 问题：超过 0.1（移动） ”。

通过单击特定行，您将找到出于相同原因需要修复的 URL 列表。

桌面上最大的内容绘制示例

一旦解决了问题，就可以轻松验证受同一问题影响的所有页面的修复。

现在让我们了解导致 CLS 分数不佳的原因以及如何解决它。

---

哪些因素会影响 CLS 并导致评分低

WordPress 上累积布局偏移等级较差的最常见因素是：

• 没有尺寸的图像和视频
• 没有尺寸的广告、嵌入内容和 iframe
• 导致无样式文本闪烁 (FOUT) 或不可见文本闪烁 (FOIT) 的 Web 字体
• 在更新 DOM 之前等待网络响应的操作（尤其是广告）
• 动态注入的内容（例如动画）。

请记住，CLS 对移动设备的影响最为重大，移动设备是优化性能最关键和最具挑战性的设备。原因有很多，从较小的视口到具有挑战性的移动网络以及较弱的中央处理单元 (CPU)。

没有尺寸的图像和视频

没有尺寸的图像和视频是布局变化的常见原因。

如果不指定宽度和高度尺寸属性，浏览器不知道加载这些元素时需要分配多少空间。预留的空间可能不够。因此，一旦这些元素完全加载，它们将占用比预期更多的空间——已经显示的内容将会发生变化。

您可以通过以不同方式在图像和视频元素上包含图像尺寸来解决此问题。我们已在专门部分为您介绍！

没有尺寸的广告、嵌入和 Iframe

同样的“维度”问题也适用于广告、嵌入内容和 iframe。再次，没有预留足够的空间会使这些动态元素压低已经显示的内容。因此，页面上将发生新的布局变化。

您可以通过为广告分配固定尺寸并通过特定策略管理为此类元素保留的尺寸来解决此问题。

网页字体导致无样式文本 (FOUT) 或不可见文本 (FOIT) 闪烁

网络字体可能会导致布局变化，并在渲染页面时带来非常不愉快的用户体验。这是关于字体加载速度有多慢。您可能会面临两个不同的问题：无样式文本的闪烁 (FOUT) 或不可见文本的闪烁 (FOIT)。

一方面，您可以看到页面上的文本风格“不太好”（FOUT）。这是因为自定义字体需要一些时间来加载。与此同时，您会看到后备字体。一旦自定义字体准备就绪，它将取代后备字体。然后，您会看到页面上的字体发生变化，内容也将不可避免地发生变化。

另一方面，您可以稍等一下才能看到显示的任何文本。这是因为自定义字体仍在加载（FOIT）。仅在渲染自定义字体后，您才会在页面上看到内容。完全加载后，该内容可能会导致布局发生变化。

解决此问题的主要方法是预加载字体，稍后您将了解到。

在更新页面上注入的 DOM 和内容之前等待网络响应的操作

页面上注入的动画和动态内容（例如横幅、广告或 Instagram feed）也可能导致布局变化。再次，这是因为没有为这些元素保留足够的空间。

此时，您知道为吸引用户且不应该破坏用户体验的元素分配空间是多么重要。

让我们看看如何解决这些问题。

您可以通过改进首字节时间、使用 CDN 以及尽早建立第三方连接来解决该问题。

渲染阻塞 JavaScript 和 CSS

浏览器发出请求并从服务器获取内容。此时浏览器就会渲染内容并显示出来了，对吧？没那么快。

为了呈现任何内容，浏览器必须分析（或解析）页面的 HTML 并使其“可读”到页面的 HTML 结构中——这就是 DOM 树。之后，内容将被渲染并完全显示 – 除非某些脚本和样式表阻止 HTML 解析。这些脚本和样式表是渲染阻塞资源。

由于此块，解析被延迟。再次，您请求的内容需要一些时间才能加载。LCP性能再次受到影响。

您将通过推迟和删除未使用的 JS 文件来解决这些问题。不用担心！您将在下一部分中找到所需的所有信息。

资源加载时间慢

其他文件也可能导致性能不佳和用户体验不佳：图像、视频以及HTML 和 CSS 文件等块级元素。

如您所知，LCP 与页面顶部的元素相关。当这些文件呈现在首屏并且加载时间过长时，就会出现这个问题。结果，加载时间和 LCP 再次受到影响。

您将通过优化图像、缩小和压缩 CSS、JS、HTML 文件以及预加载关键资源来管理资源加载时间。

底线：浏览器接收和呈现请求内容的速度决定了 LCP 分数。

让我们详细了解如何解决所有这些问题。

---

如何修复移动设备和桌面设备上的累积布局偏移

如果您想避免 WordPress 网站出现较大的布局变化，可以通过以下方法降低不良的 CLS 分数（无论是否有插件）：

1. 在图像和视频元素上包含宽度和高度尺寸属性
2. 预加载字体（并优化它们）
3. 管理广告位的空间和大小
4. 管理嵌入和 Iframe 的空间
5. 管理动态内容
6. 添加动画的 CSS Transform 属性

通过仔细阅读每一点，您将了解如何修复 Search Console 状态：CLS 问题：超过 0.25 秒或CLS 问题：超过 0.1 秒，无论是在移动设备还是在桌面设备上。

🚀对于我们的每条建议，您都会找到一条有关其性能影响的信息（从低到高）。影响越大，遵循该特定建议后累积布局偏移等级提高的机会就越大。

一些避免大的布局变化的最佳实践不包括特定的解决方案——它们更多的是管理广告和其他关键元素的良好空间。

1. 在图像和视频元素上包含宽度和高度尺寸属性

性能影响：高🚀🚀🚀

修复 CLS 最简单的方法之一是在 WordPress CMS 中的图像和视频元素上包含宽度和高度属性：

WordPress 默认添加图像尺寸。所以，这个动作应该会自动解决。

解决此问题的另一种方法是利用 CSS 宽高比框并让浏览器设置图像的默认比例。

简而言之，您应该包含宽度或高度属性并使用 CSS 设置宽高比。浏览器将在渲染页面之前找出缺失的属性并获取图像尺寸。通过这样做，它将在加载图像时分配所需的空间。因此，内容不会移动，并且可以避免布局变化。

请记住这是有用的信息，因为许多插件（例如 YouTube 视频嵌入插件）在其输出上使用宽高比。

不要忘记响应式图像！您可以使用 srcset 属性：

[pastacode lang=”markup” manual=”%3Cimg%0Awidth%3D%221000%22%0Aheight%3D%221000%22%0Asrc%3D%22puppy-1000.jpg%22%0Asrcset%3D%22puppy-1000.jpg%201000w%2C%20puppy-2000.jpg%202000w%2C%20puppy-3000.jpg%203000w%22%0Aalt%3D%22Puppy%20with%20balloons%22%0A%2F%3E” message=”” highlight=”” provider=”manual”/]

来源: Google

感谢 srcset，浏览器可以在一组图像和相关尺寸之间进行选择。请记住，图像应使用相同的宽高比来设置图像大小。

通过包含尺寸图像，您将提供具有正确尺寸的图像并抓住 PageSpeed Insights 机会。

2.预加载字体（并优化它们）

性能影响：低（仅当网站有大文本时才高）🚀

正如我们所解释的，如果网络字体加载速度不快，就会导致糟糕的用户体验并影响 CLS 等级。

作为避免布局变化的最佳实践，您应该预加载字体。

通过预加载字体，您将告诉浏览器将字体作为最优先的资源之一加载。渲染页面时，浏览器将尽快加载字体。因此，浏览器可能会在第一次有意义的绘制中包含字体 – 即页面的主要内容完全加载并显示时。在这种情况下，不会发生布局变化。

您可以将 rel=preload 添加到关键网络字体中：

[pastacode lang=”markup” manual=”%3Clink%20rel%3D%22preload%22%20href%3D%22font.woff2%22%20as%3D%22font%22%20type%3D%22font%2Fwoff2%22%20crossorigin%3E” message=”” highlight=”” provider=”manual”/]

通过预加载字体，您将解决“确保文本在 Webfont 加载期间保持可见”PageSpeed Insight 建议。

关于这一点还有更多。为了防止任何 FOIT 和 FOUT 问题，您应该将 rel=preload （或启用 WP Rocket 功能）与 CSS 行 font-display: 可选结合起来。

CSS 字体显示描述符决定浏览器如何下载和显示字体文件。
使用 font-display: 可选时，浏览器将下载并缓存字体文件，以使它们立即可用于渲染。因此，尽管 font-display 有多个值，但您应该使用 option 值。

减少 FOUT 问题的另一个有用技巧是在字体显示属性上添加 display:swap;missing 。如果您缩小/合并 CSS 文件，WP Rocket 可以帮助您做到这一点。

还有其他方法可以更快地加载字体：

将图标字体转换为 SVG。字体图标需要一段时间才能加载，并且对可访问性没有帮助。没有理由使用它们。使用 SVG，字体渲染速度会更快，并且您将加载所需的确切字体。

提供多种字体格式。通过这样做，浏览器将选择兼容的格式并仅加载其字体。以下是一些有关字体格式的信息，可能会对您有所帮助：

1. 避免 TTF。它通常比 WOFF 重 10 – 20%。
2. 在 Safari 中使用 SVG。它通常比 WOFF 小一点。
3. 对于现代浏览器使用 WOFF2。它是最小的尺寸 – 比 WOFF 和 SVG 小约 30%。
4. 当无法使用 SVG 或 WOFF2 时，实现 WOFF 作为后备方案。

在本地托管您的字体或使用 CDN 缓存它们。您将避免任何延迟并更快地交付字体。

优化您的字体，使其尽可能小且速度更快。

通过应用这些建议，您将优化字体并避免多次布局变化。您将在 WordPress 网站上解决 PSI 建议：“确保文本在 Web 字体加载期间保持可见”。

3.管理广告位的空间和大小

性能影响：高🚀🚀🚀

有几种最佳做法可以避免广告布局发生变化：

• 为广告分配固定尺寸，以便为要加载的广告预留足够的空间。
• 为广告预留尽可能大的空间。历史数据可以方便地评估每个广告位的最佳尺寸。
• 为未展示的广告保留所有空间。换句话说，您不应折叠视口上的任何区域。您可能更愿意包含占位符或后备元素。
• 将非粘性广告放置在页面中间——无论如何，远离视口顶部。

WP Rocket 提供的延迟JavaScript 执行功能可以帮助您像 Google Ads 一样控制首屏动态内容。该功能可用于停止动态交互、内容注入（广告）和动态类更改，直到页面上出现交互。

您将再次解决“提供具有正确尺寸的图像”PSI 建议。下一节也是如此。

4. 管理嵌入和 Iframe 的空间

性能影响：高🚀🚀🚀

管理嵌入和 iframe 的建议与管理广告的建议类似。

特别是，您应该为此类元素预先计算足够的空间。历史数据再次有助于了解您应该保留多少空间。

占位符或后备是管理未知嵌入大小的绝佳解决方案。

5.管理动态内容

性能影响：高🚀🚀🚀

横幅等动态内容也会影响累积布局变化。这就是为什么您应该避免显示新内容，除非它是由用户交互触发的。如您所知，CLS 仅计算用户未与页面交互时发生的布局变化。

正如“管理广告位的空间和大小”部分中所述，您可以利用 WP Rocket 提供的延迟 JavaScript 执行选项来控制首屏的动态内容。

通过管理动态内容，您将注意以下 PageSpeed 建议：

• 避免较大的布局变化
• 避免巨大的网络负载。

6. 添加动画的 CSS Transform 属性

性能影响：低 🚀

确保视觉稳定性的最后一个最佳实践是处理动画。您可以使用 CSS 属性：transform，它不会触发任何布局更改。

您将解决“避免非合成动画”PageSpeed 建议。