WordPress 中的累积布局偏移 (CLS)：如何消除它

在关于累积布局转变的这一章中，我们为 WordPress 用户提供的关于核心 Web 生命线的迷你系列即将结束。 在前面关于最大内容绘制和首次输入延迟的章节中，我们已经讨论了这些术语的确切含义以及如何针对每个术语优化您的网站。 现在，我们想为 CLS 做同样的事情。

在下文中，我们将介绍累积布局偏移到底是什么、它是如何计算的、如何测试您的网站在该领域的性能以及目标的良好价值。 之后，我们将向您提供分步说明，帮助您解决 WordPress 网站上可能存在的任何 CLS 问题并进行改进。

完成后，连同本系列中的其他两篇文章，我们希望您做好准备让您的网站符合 Google 的批准标志。

累积布局偏移是什么意思？

像往常一样，让我们​​从定义开始。 简而言之，CLS 会测量网页上发生的某些变化导致网页上的元素在无需用户交互的情况下移动（或移动，如果您愿意的话）。

您正在阅读的文章中的表格或广告可能加载较晚，并向下移动到您正在阅读的段落，因此您必须滚动才能再次找到您的位置。 或者更糟糕的是，它会在不合适的时刻更改按钮或链接的位置，因此您最终会单击您不想单击的内容。

因此，它可以是从轻微烦人到彻底令人愤怒的任何事情。 累积布局偏移是捕获此行为的指标，以便了解问题以便您可以纠正它。

它为什么如此重要？

一个不稳定的网站会完全扰乱您当前正在做的事情，甚至可能会在现实生活中产生令人烦恼的后果。 正如您可以想象的那样，这对用户体验来说确实很糟糕，并且可能会导致访问者离开。 在智能手机上尤其如此，由于屏幕尺寸的原因，微小的变化比台式机产生的影响更大。

由于它具有如此大的颠覆性，谷歌非常关注这个指标，使其成为其判断网站的核心价值之一。 因此，如果您想同时取悦访问者和决定您在搜索结果中显示位置的人（我的意思是机器人），请尽力消除网站上的累积布局转变。

CLS 的病因是什么？

网站元素发生变化的原因通常是因为网页文件的加载速度不同。 另一个因素是在页面加载期间或之后动态添加的页面元素。 典型例子包括：

• 没有正确定义尺寸的图像或视频等视觉效果
• 第三方内容，例如广告、横幅、嵌入内容或 iframe
• 比最初显示的后备字体更小或更大的 Web 字体

CLS 的另一个来源可能是 CSS 和 JavaScript 标记冲突。 当它们相互阻塞时，就会停止网页的加载过程。

累积布局偏移是如何计算的？

与之前的版本相比，Cumulative Layout Shift 的计算稍微复杂一些。 为了理解它，我们需要首先确定一些术语：

• 布局移位——页面上已经可见的元素在渲染后从其起始位置移动。 这类元素被称为不稳定元素（我知道是创造性的）。
• 预期与意外的布局变化——布局变化只有在用户没有预料到的情况下才会产生负面影响。 还有一些预期和欢迎的布局变化，例如在与网页交互之后（例如提交表单）。 CSS 动画和过渡是预期布局变化的其他示例。 考虑到这一点，CLS 认为用户交互后 500 毫秒内发生的所有布局变化都是预期的。
• 影响分数— 移动元素影响的视口（屏幕上网站的可见部分）的百分比，以十进制数表示（例如，如果影响屏幕的 50%，则为 0.5）。
• 距离分数- 距离在移动过程中不稳定元素移动的屏幕百分比。 也以十进制数形式给出。
• 布局偏移分数— 这是通过将影响分数乘以距离分数来计算的（例如 0.4 x 0.15 = 0.06）。 因此，移动长距离的大元素比移动短距离的小元素获得更高的分数。

CLS 捕获五秒间隔内出现最多的意外布局偏移分数。 显然，越低越好。

最后，您实际上不需要了解具体细节。 您需要知道的是如何衡量 CLS 以及您的网站应追求什么价值。

什么是好的布局移位分数？

良好的分数是 CLS 值为 0.1 或更低。 最多 0.25 需要改进，任何高于该值的值都是不好的，并且可能会导致搜索性能下降。

如何测试累积布局偏移

为了能够提高您网站上的 CLS 分数，您首先需要知道自己的立场。 很难知道它是否会发生，因为网页在不同设备上的行为并不总是相同。 因此，您可能在开发站点上看不到它，但访问者仍然可以遇到它。 因此，最好对其进行测试。

有多种方法可以检查累积布局偏移是否是您的 WordPress 网站上的问题。 它们与其他 Core Web Vitals 指标几乎相同。 您的第一个停靠点应该始终是 PageSpeed Insights，它在其结果页面上显示指标。

请注意，它使用实验室结果以及 Chrome 用户体验报告中的实际数据。 它甚至显示布局变化和源元素的图像。 这样，您就可以更好地了解问题是什么以及问题发生在哪里。

此外，PageSpeed Insights 还为您提供每个元素对 CLS 分数贡献的比率。 这使您可以优先考虑具有最大负面影响的事情。

除此之外，您还可以使用以下内容：

• Google Search Console 内的 Core Web Vitals 报告
• Chrome浏览器开发者工具
• 灯塔
• web-vitals JavaScript 库

还有一个名为 CLS Visualizer 的 Chrome 扩展。 它突出显示网页上不断变化的元素。 对于 Firefox，请尝试 SpeedVitals。

如何减少 WordPress 网站的累积布局变化

如果您发现 CLS 是您的 WordPress 网站上的一个问题，您可能需要修复它。 这就是本文其余部分的全部内容。

提供媒体尺寸

当您查看上面累积布局偏移的原因时，许多解决方案已经变得清晰。 如前所述，CLS 的常见罪魁祸首是没有定义width和height值的图像和其他媒体。 如果没有固定的尺寸，浏览器不知道要为它们保留多少空间。 对于稍后出现在页面上的媒体尤其如此，例如延迟加载。

不幸的是，响应式设计的常见做法是不给出特定的图像尺寸。 大多数情况下，图像被设置为width或max-width: 100%; 和height: auto; 。 然后，由浏览器在下载图像时计算出实际尺寸。

在过去，这常常导致我们试图避免的行为类型。 图像突然出现，带动了周围的一切。 因此，您应该始终提供视觉效果的尺寸或至少 CSS 长宽比。

幸运的是，如果您使用 WordPress，您的网站会自动设置图像尺寸。 因此，这个问题通常不会出现。

如果特定图像不是这种情况，您可以在古腾堡编辑器中更正它。

处理广告、嵌入内容和类似内容

加载到页面中的第三方内容通常是 CLS 的最大来源之一。 在这些情况下，您不一定能控制最终产品的尺寸。 其出版商也不提前知道其出现的网站上有多少可用空间。 因此，您需要以与图像相同的方式声明其大小。

对于 WordPress 用户来说，幸运的是，当使用古腾堡编辑器自动将来自社交网络、视频门户或类似供应商的内容嵌入到您的内容中时，编辑器会自动添加适当的width和height声明。

这样，即使内容的加载时间比页面其他部分长，它也已经保留了正确的大小。 因此，布局在出现时不会发生变化。

对于手动添加的其他类型的内容，请务必手动添加width和height 。 如果您不知道广告或其他元素的确切高度，至少为其添加一个min-height属性。 这仍然允许使用更大的元素，但保留一些空间，并且可以消除或至少减少页面上的 CLS。

最小化 WordPress 中第三方内容的累积布局偏移的另一种技术是避免将其放置在页面的较高位置。 它越高，它下面可以下推的内容就越多，你的 CLS 分数就越高。 因此，如果可以的话，请将其放置在中间或底部。

优化动态内容

动态内容是在页面加载后添加到页面的页面元素。 之前的示例是延迟加载图像，但它通常还包括横幅、表单甚至滚动显示的相关产品等内容。

当然，如果您没有正确规划这些，也可能导致布局变化。 以下是一些避免这种情况的方法：

• 预先预留空间- 与上面类似，如果您有一个可以将内容加载到其中的固定大小的容器，即使稍后再加载，它也会保持布局稳定。 固定容器也可以是旋转木马或类似的东西。
• 将其与用户交互连接起来——如果内容在用户操作后动态加载，即使布局发生变化，也不会给 CLS 造成任何损失。 但请记住 500 毫秒的截止时间。
• 将内容加载到屏幕外— 如果您在视口之外加载内容，然后向用户提供该内容可用的通知以及滚动到该内容的选项，则也没有 CLS。 社交媒体平台喜欢在新的更新时这样做。

改进网页字体处理

网络字体也会导致布局变化。 两种常见的形式是，您要么在网页字体出现之前首先看到无样式文本（Flash of Unstyled Text 或 FOUT），要么一开始根本看不到文本，然后它与网页字体一起出现（Flash of Invisible Text 或 FOUT）。 FOIT）。

两者都可能导致布局变化，您可以采取以下措施：

• 使用正确的字体格式- 如果您将自定义字体加载到 WordPress 网站中，请务必使用 WOFF2 或 WOFF 格式。 它们占用空间最小，加载速度最快，有助于避免上述问题。
• 使用正确的后备字体——如果您使用的后备字体与实际字体非常不同，那么切换发生的那一刻可能会导致布局移动。 您可以通过使用接近最终产品的辐射字体来避免这种情况。 字体样式匹配器可以帮助您找到一个。
• 预加载字体— 将 Web 字体资源放置在文档的早期位置，并向其中添加rel=preload 。 这样，浏览器就会优先考虑它们。

它还有助于在本地托管字体，或者至少使用 CDN 让用户尽快使用它们。 这样，您就可以减少在加载过程中后期切换字体并导致布局变化的可能性。

不要让累积布局变化影响您的 WordPress 网站

累积布局偏移是 Google 认为至关重要的三个指标之一，也是本深入系列中的最后一个指标。 它是用户体验的重要指标，因为它衡量页面布局在加载期间甚至加载后的稳定性。

与 Core Web Vitals 中的其他指标一样，它不仅对用户很重要，而且还影响搜索排名，因此对于网站的成功非常重要。

到现在为止，您已经知道它是什么、它是如何计算的、导致它的原因以及如何测试和处理它。 愿你的布局永远坚固，我的朋友。

对于如何防止 WordPress 中的累积布局偏移，您还有其他提示吗？ 请在下面的评论中告诉我们！