累积版式转换解释：如何修正你的分数

正在为您网站上的累积版式转移问题而苦苦挣扎？ 或者不确定 Cumulative Layout Shift 到底意味着什么？

Cumulative Layout Shift，简称 CLS，是 Google Core Web Vitals 计划的一部分。

简而言之，它衡量网页内容“意外”变化的程度。 高 CLS 分数可能表示用户体验不佳，也可能拖累您网站的 SEO。

在这篇文章中，您将了解有关 Cumulative Layout Shift 的所有信息，以及它如何影响 WordPress 网站（以及一般的 Web）。

什么是累积布局偏移 (CLS)？ 解释累积布局偏移的含义

Cumulative Layout Shift 是衡量您网站上的页面在用户访问期间意外移动的程度，由标准化性能测试 API Layout Instability API 衡量。

Cumulative Layout Shift (CLS) 是 Google Core Web Vitals 计划中的三个指标之一，另外两个是 Largest Contentful Paint (LCP) 和 First Input Delay (FID)。

为了理解 Cumulative Layout Shift 的含义，从总体上讨论布局偏移很重要。

当您网站上的内容意外“移动”或“移动”时，就会发生布局偏移。

或者，用技术术语来说，就是当视口中可见的任何元素在两帧之间更改其起始位置时。

一个常见的例子是，您正在阅读一段文本……但是突然出现延迟加载的广告并将文本内容推到页面下方。

这是来自 Google 的另一张示例图片，展示了这种情况：

在浏览网页时，您几乎肯定遇到过布局变化，即使您不知道它们的名字。

一次访问可能有多个单独的布局转换事件。 因此，Cumulative Layout Shift 指标旨在通过测量页面上意外布局偏移的总量来捕捉整个画面*。

*经过 Google 的一些更改后，确切的衡量标准有点技术性，但这仍然是基本的想法。 如果您对细节感兴趣，可以在此处阅读。

为什么 Cumulative Layout Shift 不好？

Cumulative Layout Shift 不好的主要原因是它会在您的网站上造成糟糕的用户体验。

充其量，这对您的访客来说有点烦人。 在最坏的情况下，它可能会导致访问者执行他们不想执行的操作。

例如，想象一下，如果用户想要单击“取消”但不小心单击了“确认”，因为布局偏移将按钮的位置移到了用户单击的位置。

除了影响人类访问者的体验之外，糟糕的 Cumulative Layout Shift 分数也会拖累您网站的搜索引擎排名。

从 Google 的页面体验更新（于 2021 年 8 月完成推出）开始，Google 使用 Core Web Vitals 作为其 SEO 排名因素之一。 由于 Cumulative Layout Shift 是 Core Web Vitals 的一部分，这意味着它会影响您网站的搜索性能。

基本上，修复您网站上的任何 Cumulative Layout Shift 问题将有助于使其更好地为人类访问者和搜索引擎服务。

那么——是什么导致了 Cumulative Layout Shift？ 接下来让我们介绍一下……

是什么导致累积布局偏移？

以下是布局偏移的最常见原因的简要说明：

• 不为图像、iframe、视频或其他嵌入设置尺寸。
• 自定义字体加载问题，这可能导致文本在加载自定义字体时不可见或更改大小。
• 提供不同尺寸的自适应广告（例如 AdSense）（并且不为这些广告保留空间）。
• 使用插件动态注入内容（cookie 同意通知、潜在客户生成表格等）。
• 使用没有 CSS Transform 属性的动画。

我们将在本文后面更深入地探讨这些问题，向您展示如何解决每个常见问题。

如何衡量累积布局偏移：最佳测试工具

您可以使用多种工具来测试站点的 Cumulative Layout Shift 分数。

Cumulative Layout Shift 是 Lighthouse 审计的一部分，因此任何使用 Lighthouse 作为其审计一部分的速度测试工具都将包括 CLS 数据——这包括 PageSpeed Insights、GTmetrix、Chrome 开发者工具和许多其他流行的测试工具。

以下是一些因其实用性而脱颖而出的顶级 Cumulative Layout Shift 测试工具……

PageSpeed 洞察力

PageSpeed Insights 是评估网站布局变化状态最有用的工具之一，因为它为您提供了两个数据源：

• 实地数据——Chrome 用户体验报告中的真实用户数据（假设您的网站有足够的流量包含在报告中）。 这使您可以看到真实人类访客的实际 Cumulative Layout Shift 数据。 这也是谷歌用作排名信号的数据。
• 实验室数据– Lighthouse 收集的模拟测试数据（PageSpeed Insights 使用它来生成其性能分析报告）。

您还可以通过在选项卡之间切换来查看桌面和移动设备的数据。

注意– 实验室数据只能测量页面加载期间发生的布局变化，因此如果您在页面加载后发生布局变化，您的真实用户结果可能会略高。

Chrome 开发者工具

Chrome 开发者工具提供了一些有用的资源，用于测量 CLS 和调试网站上发生的个别布局变化。

首先，您可以运行 Lighthouse 审核以查看您网站的 CLS 分数。 这是如何做：

1. 打开 Chrome 开发者工具。
2. 转到灯塔选项卡。
3. 配置您的测试。
4. 单击Analyze page load按钮运行测试。

稍等片刻后，您应该会看到常规的 Lighthouse 审核界面（看起来很像 PageSpeed Insights）。

但是，Chrome 开发人员工具还可以让您通过其渲染分析更深入地了解 CLS。 这将使您突出显示站点中的各个布局转换区域，从而帮助您调试它们。

这是如何做：

1. 点击 Chrome 开发者工具界面右上角的“三点”图标。
2. 选择More Tools → Rendering ，这应该会在底部打开一个新界面。
3. 选中Layout Shift Regions复选框。

现在，重新加载您要测试的页面，Chrome 应该会使用蓝色框突出显示布局发生变化的任何区域。 这些突出显示将在内容加载时出现在实际页面上，并在班次结束后消失。

如果亮点出现得太快以至于您无法跟上，您可以放慢网站速度并使用“性能”选项卡逐帧观看它的加载。

谷歌搜索控制台

虽然 Google Search Console 不允许您运行实验室测试来确定 Cumulative Layout Shift，但它确实为您提供了一种简单的方法来查看您网站上的 Cumulative Layout Shift 问题，正如 Chrome UX 报告所衡量的那样。

与其他工具相比，使用 Google Search Console 的优势在于它可以让您快速查看整个网站的问题，而不是逐页测试。

查看您网站上的潜在问题的方法如下：

1. 转到谷歌搜索控制台。 如果您还没有验证您的网站，您可以按照我们关于如何验证 Google Search Console 的指南进行操作。
2. 打开Experience下的Core Web Vitals报告。
3. 单击移动或桌面旁边的打开报告，具体取决于您要分析的内容。

如果适用，Google 将突出显示具有有问题的 Cumulative Layout Shift 分数的 URL。

注意– 只有当您的网站有足够的每月流量可以包含在 Chrome 用户体验报告中时，您才会在此处看到数据。

布局转换 GIF 生成器

顾名思义，Layout Shift GIF Generator 会在您的网站上生成布局转换的 GIF，以便您可以准确查看导致问题的内容。 它还会为您提供分数，尽管这不是该工具的主要重点。

您所要做的就是添加要测试的 URL，然后在移动设备或桌面设备之间进行选择。 然后，它将生成您网站的 GIF，其中绿色高亮显示正在移动的确切元素。

通过查看哪些元素正在四处移动并为您的 Cumulative Layout Shift 分数做出贡献，您可以确切地知道在提高网站分数时应该关注哪里。

什么是好的累积布局分数？

根据 Google 的 Core Web Vitals 计划，良好的 Cumulative Layout Shift 得分为0.1 或更低。

如果你的 Cumulative Layout Shift 得分在 0.1 到 0.25 之间，谷歌将其定义为“需要改进”。

如果你的 Cumulative Layout Shift 分数高于 0.25，谷歌将其定义为“差”。

这是来自 Google 的 Core Web Vitals 网站的图表，直观地展示了这些分数：

如何修复 WordPress（或其他平台）中的累积布局偏移

既然您了解了 Cumulative Layout Shift 发生了什么，是时候转向一些关于如何修复 WordPress 中的 Cumulative Layout Shift 的可操作技巧了。

虽然这些技巧确实来自 WordPress 的角度，但它们都是通用的，您可以将它们应用于其他网站构建工具。

始终指定图像的尺寸

布局偏移的最常见原因之一是延迟加载图像移动内容，尤其是当您使用延迟加载等策略时。

为避免这种情况，您可以在嵌入图像时在代码中指定图像的尺寸。 这样，即使图像尚未加载，访问者的浏览器也会保留该空间，这意味着图像不需要移动内容。

如果您通过 WordPress 编辑器（Gutenberg 块编辑器或经典的 TinyMCE 编辑器）嵌入图像，则无需手动指定图像尺寸，因为 WordPress 会自动为您执行此操作。

Elementor、Divi、Beaver Builder 等流行的页面构建器插件也是如此。

但是，如果您使用自己的代码手动嵌入图像，可能会出现问题，如果您向插件添加内容、编辑子主题的模板文件等，则可能会发生这种情况。

基本图像嵌入的 HTML 代码如下所示：

<img src="https://kinsta.com/example-image.jpg" alt="An example image">

要指定其尺寸，您可以添加高度和宽度参数。 下面是一个 600x300 像素图像的示例：

<img src="https://kinsta.com/example-image.jpg" alt="An example image" width="600" height="300" >

许多 WordPress 性能插件还包括自动执行此操作的功能，例如 WP Rocket 或 Perfmatters 中的添加缺失图像尺寸功能。

始终为视频、iframe 和其他嵌入指定尺寸

与图像一样，无论何时添加视频、iframe 或其他嵌入，您都需要指定尺寸。

大多数网站的嵌入工具应自动指定嵌入的尺寸。

例如，如果您查看 YouTube 嵌入代码，您会发现它包含维度：

许多其他服务也是如此。

但是，如果您的嵌入代码未指定高度和宽度，您可以手动将这些尺寸添加到嵌入代码中。

修复和优化字体加载

字体加载和优化问题可能是通过两个潜在问题导致布局变化的另一个常见原因：

• 不可见文本闪烁 (FOIT) – 页面最初加载时根本没有出现任何文本内容。 加载自定义字体后，文本会突然出现（这可能会导致现有内容移动）。
• 无样式文本闪烁 (FOUT) – 使用系统字体（无样式）加载文本内容。 加载自定义字体后，文本会更改为该自定义字体，这可能会导致内容发生变化，因为文本大小和间距可能不同。

为避免这些问题，您需要优化在网站上加载字体的方式（这也可以对网站的性能产生一些好处）。

本地托管字体和预加载字体

通过在本地托管字体并使用预加载，您可以告诉访问者的浏览器将更高的优先级放在加载自定义字体文件上。

通过在其他资源之前加载字体文件，您可以确保在浏览器开始呈现您的内容时字体文件已经加载，这可以防止 FOUT 和 FOIT 出现问题。

要了解如何在 WordPress 本地托管字体，您可以阅读我们在 WordPress 本地托管字体的完整指南。

从那里，您可以手动或使用插件设置字体预加载。 大多数性能插件都包含预加载字体的选项，包括 WP Rocket、Perfmatters、Autoptimize 等。

如果您使用的是 Google 字体，您还可以使用免费的 OMGF 插件在本地托管字体并预加载它们。

您还可以通过将代码添加到站点的<head>部分来手动预加载字体。

这是一个代码示例——确保将其替换为您要预加载的字体文件的实际名称/位置：

<link rel="preload" href="https://kinsta.com/fonts/roboto.woff2" as="font/woff2" crossorigin>

您可以使用 WordPress 子主题直接添加它，或者使用 wp_head 挂钩和代码片段之类的插件注入它。

将字体显示设置为可选或交换

CSS Font-Display 属性可让您控制网站上字体的呈现行为并避免 FOIT。

本质上，它允许您在自定义字体尚未加载的情况下使用后备字体。

您可以使用两个主要选项来解决 CLS：

• 交换——在加载自定义字体时使用后备字体，然后在加载字体后将其更改为您的自定义字体。
• 可选——让浏览器根据访问者的连接速度确定是否使用自定义字体。

使用Swap ，浏览器在加载后将始终更改为自定义字体。

虽然Swap完全解决了 FOIT，但它也可能导致 FOUT。 为了尽量减少这种情况，您应该确保后备字体使用与自定义字体相同的间距（至少尽可能多）。 这样，即使字体样式发生变化，也不会导致布局发生变化，因为间距是相同的。

使用Optional ，浏览器将为自定义字体提供 100 毫秒的加载时间。 但是，如果届时自定义字体不可用，浏览器将只使用后备字体，永远不会将其更改为该页面浏览的自定义字体（它将为后续页面浏览使用自定义字体，因为字体很可能到那时文件已经下载并缓存了）。

虽然Optional可以同时解决 FOIT 和 FOUT，但缺点是访问者可能会在第一次页面浏览时使用后备字体。

如果您觉得使用 CSS 很舒服，您可以在子主题的样式表中手动编辑 Font-Display 属性。

如果您觉得这样做不方便，您还可以找到一些有帮助的插件：

• 交换谷歌字体显示——轻松启用谷歌字体的字体显示交换。
• Asset CleanUp – 支持免费的 Google Fonts 和 Pro 版本的自定义本地字体。
• Perfmatters – 为谷歌字体提供一个功能。

如果您使用的是 Elementor，Elementor 还包含一个内置选项来执行此操作。 转到Elementor → 设置 → 高级。 然后，您可以根据自己的喜好将Google Fonts Load下拉菜单设置为 Swap 或 Optional：

太复杂？ 考虑一个系统字体堆栈！

如果所有关于预加载和字体显示的讨论有点令人困惑，一个简单的解决方法是只使用系统字体堆栈而不是自定义字体堆栈。

虽然这确实会限制您的设计选项，但它将完全解决 Cumulative Layout Shift 字体问题、FOIT 和 FOUT。 此外，它还可以帮助您的网站加载速度更快。

如果您对此感兴趣，请查看 Brian 在 WordPress 上使用系统字体堆栈的指南。

为广告预留空间（如果使用展示广告）

如果您使用展示广告，请务必在网站代码中为这些广告预留空间。 这遵循与为图像、视频和嵌入保留空间相同的想法。

但是，展示广告值得特别提及，因为如果您使用任何类型的出价技术，延迟加载展示广告是很常见的。 这是因为出价技术需要时间来确定要显示的广告。

如果您有动态广告位，这也可能是 AdSense 自动广告的问题，因为除了出价问题外，AdSense 还会加载不同尺寸的广告（因此您可能无法提前知道广告的尺寸）。

如果您使用的是 Mediavine 或 AdThrive 等流行的展示广告网络之一，它们应该已经提供了一些工具来帮助您避免广告布局发生变化。 例如，如果您打开 Mediavine 的广告设置区域，您可以启用切换以针对 CLS 优化广告：

要针对 Cumulative Layout Shift 优化 AdSense，需要一些技巧。

一种常见的解决方法是在每个广告单元周围添加一个 <div> 包装元素，使用min-height CSS 属性指定最小高度。 您还可以使用媒体查询根据用户的设备更改最小高度。

Google 建议将最小高度设置为等于可能的最大广告尺寸。 如果投放较小的广告，这可能会导致空间浪费，但这是消除任何可能发生布局偏移的最佳选择。

设置此包装器元素时，请确保使用 CSS ID 而不是类，因为 AdSense 通常会从父对象中删除 CSS 类。

CSS 可能如下所示：

AdSense 嵌入可能如下所示：

在前端，您现在会看到您的网站为该广告保留了空间，即使它是空的：

使用插件动态注入内容时要聪明

很多 WordPress 站点会动态注入功能内容，例如 cookie 同意通知、相关内容、电子邮件选择加入表单等。

虽然这样做很好，但您需要小心避免以导致布局偏移的方式进行。

这里一个好的网页设计最佳实践是永远不要在现有内容之上注入内容，除非用户专门进行了交互（例如单击按钮）。

例如，如果您要添加 cookie 同意通知，您不想将其插入页面顶部，因为这会导致内容被下推（除非您已经为 cookie 同意横幅预留空间） .

相反，您应该在页面底部显示通知，这将避免下移可见内容。

要查看问题是否由动态内容引起，您可以使用上面的可视化工具（例如 Layout Shift GIF Generator）。

如果您发现来自特定插件的内容触发了布局变化，您可以考虑调整该插件的设置或切换到其他插件。

例如，一些 cookie 同意插件在布局转换方面优于其他插件，因此如果您遇到问题，值得尝试不同的插件。

如果您想更深入地了解插件行为，可以使用应用程序性能监控工具。 如果您使用 Kinsta 托管，Kinsta 的 APM 工具可在您的 MyKinsta 仪表板中免费获得，或者您可以找到其他 APM 工具。

为了帮助您测试插件，您还可以使用 Kinsta 的暂存站点或 DevKinsta 本地开发工具。

尽可能为动画使用 CSS Transform 属性

如果您在网站上使用动画，这些可能是布局变化的另一个常见罪魁祸首。

为避免动画问题导致布局偏移，您应该对动画使用 CSS Transform 函数而不是其他策略：

• 与其使用高度和宽度属性，不如使用transform: scale()
• 如果您想移动元素，请使用transform: translate()而不是top 、 bottom 、 right或left

这更像是一个技术提示，因此除非您要添加自己的 CSS，否则您不太可能需要这样做。 要了解更多信息，您可以阅读 Google 关于 CLS 和动画/过渡的页面。

概括

如果您的网站具有较高的 Cumulative Layout Shift 分数，那么修复它对于为您的人类访问者创造更好的体验并最大限度地提高您的网站在 Google 搜索结果中的表现非常重要。

两个最常见的问题是图像/嵌入的尺寸缺失和字体加载问题。 如果你解决了这些问题，你应该会取得更好的成绩。

其他网站可能需要更进一步，深入研究广告加载、动态内容和动画。 如果您正在努力自己实施这些类型的优化，您可以考虑与 WordPress 代理商或自由职业者合作。

要了解有关 Core Web Vitals 的更多信息，您可以阅读完整的 Kinsta Core Web Vitals 指南。

而且，如果您想要一个 WordPress 主机来帮助您创建一个在 Core Web Vitals 中表现良好的高性能网站，请考虑使用 Kinsta 的托管 WordPress 主机——我们将免费迁移您的 WordPress 网站！