大多数网站都可以通过具有不同屏幕尺寸和分辨率的各种设备进行访问。因此，跨多个平台保持相同的体验可能很困难。 WordPress 让跨平台网页设计变得更容易。然而，在任何形式的软件开发中，构建通用解决方案都可能很复杂。
在 Web 开发的情况下，用户在网站上从一个页面导航到另一个页面有时可能会遇到所谓的累积布局偏移 (CLS)。当页面的视觉元素突然改变或加载不正确时。文本突然变大或变小，图像改变位置，或者整个页面布局改变。
为什么会发生这种情况，我们该如何解决？在本指南中，我们将探讨什么是 CLS 以及如何在您的网站上防止它。
什么是累积布局偏移量？
最常见的 CLS 感知形式是图像加载滞后。在具有大量视觉元素的复杂网站上，您经常会注意到文本在媒体元素之前加载。此外，当最终加载所有视觉元素时，网页的布局会发生变化。无论您是否滚动，这些事件都会发生。
当网页的 CLS 分数很高时，很难确定它何时完全加载。站点越复杂，拥有的媒体越多，布局更改的可能性就越大。
例如，一个简单的搜索引擎页面，视觉元素很少，几乎没有 CLS。然而，这并不意味着所有复杂或功能丰富的网站都具有高 CLS 分数。例如，亚马逊的在线商店充满了小部件、图像和链接，但加载速度很快，没有任何可察觉的变化。
什么导致累积布局偏移？
CLS经常发生，因为Web 浏览器以不同的时间顺序加载元素。此外，您的站点可能包含具有未知属性（例如维度）的媒体元素。
如果您不指定媒体元素（例如图像）的宽度或高度，您的网络浏览器将不知道要分配多少空间，直到页面完全加载为止。因此，剧烈的布局转变。综上所述，大多数 CLS 的主要原因是加载效率低下。
重要的是要注意，即使您没有实时注意到布局更改，也不一定意味着没有任何更改。 Web 浏览器通常会缓存网站数据，以便在您重新访问网页时可以更轻松地加载它们。衡量 CLS 分数是确定您的站点是否经历大量布局转换的最佳方法。
如何衡量网站的 CLS 分数
CLS 分数表示网页在其整个生命周期中所经历的布局转换次数。我们可以从所谓的会话窗口中得出 CLS 分数。会话窗口描述了 5 秒间隔内发生的布局转换次数。计算CLS得分，我们需要用距离得分乘以影响得分：
CLS得分=距离得分x影响得分
这个影响得分描述了不稳定元素对两帧之间的距离对感知区域的影响程度 。距离分数描述了元素在帧之间移动了多少。 0.10 及以下 (0.0 – 0.10) 的 CLS 分数是好的。 CLS 分数高于 0.10 但低于 0.25 (0.10 -0.25) 为中等且需要改进，而 CLS 分数高于 0.25 (0.25 <) 为较差。
这些概念可能有点令人困惑。幸运的是，您不必手动计算网站的 CLS。有许多在线（和离线）工具可以为您计算 CLS 分数。
目前最流行的衡量网页CLS的方法是通过谷歌的PageSpeed Insights。它允许您确定网站移动和桌面迭代的用户体验统计数据。
其他 CLS 工具包括：
- GT Matrix
- Google Web Vitals CLS Debugger
- Google Chrome Web Vitals Extension
- Google Lighthouse
- 网页测试
由于 Google 的 PageSpeed Insights 是最熟悉的，我们将在示例中使用它。
要衡量您的 CLS 分数，请导航至 PageSpeed Insight 主页，将您网页的 URL 插入顶部文本字段，然后单击“分析”按钮。根据您网站的受欢迎程度和互联网速度，PageSpeed Insights 应该会在几秒钟内给您一份报告。
要查找您的 CLS 分数，请向下滚动至核心网络生命力评估部分。
如果我们使用亚马逊的Taking以主页为例，我们很可能会发现 CLS 分数低于 0.10。在我们的测试中，我们发现移动网站的 CLS 得分为 0.01，而桌面版为 0.05。
但是当他们的网站资源如此庞大时，他们是如何做到这一点的呢？让我们看看如何获得类似亚马逊的 CLS 分数。
如何优化 CLS
查看哪些元素导致您的 CLS 得分高的最佳方法是使用 Google Web Vitals CLS 调试器。它会向您展示您网站上所有移动功能的 GIF。广告和媒体文件是高 CLS 分数的最常见罪魁祸首。其他原因可能包括字体、异步 CSS、动画和 Iframes。为了提高您的 CLS 分数，您必须优化这些元素。
确保您的网站具有良好的 CLS，并确保其具有强大的本地 SEO 和相关内容。谷歌的搜索引擎倾向于优先考虑提供良好用户体验的优化良好的网站。
为此，这里有几个步骤可以提高您网站的 CLS 分数：
为所有媒体文件添加维度属性
如果您上传媒体文件unknown attributes ，您会增加布局偏移的风险，因为您的网络浏览器需要调整图像大小并在加载后确定布局方向。这些情况更可能发生在大的、高分辨率的图像和文件上。
通过上传缺少大小属性的媒体文件，您将过多的工作交给了网络浏览器。您必须为上传的每个视觉媒体文件添加高度和宽度属性。您可以通过查看源代码并手动添加宽度和高度属性来完成此操作。
确保字体在本地加载
文本在字体加载期间必须保持可见。实现这一目标的第一步是确保字体在本地加载，而不是从第三方字体站点中提取。
如果您发现您的字体是从第三方站点提取的，您可以使用像 OMGF 这样的插件在本地托管它们并更快地加载它们。这不仅会提高您的 CLS 分数，而且还有利于环保设计。
避免 FOIT 和 FOUT
当您未能指定后备字体时，不可见文本 (FOIT)闪烁。当您的 Web 浏览器尝试加载您的字体或寻找替代字体时，用户将看到文本应该出现的空白区域。
在无样式文本 (FOUT) 闪烁期间，您将看到网络浏览器的默认后备字体，直到它可以加载您指定的字体。要解决此问题，您可以添加属性 font-display: swap。
如果您曾经从 Google 下载过字体，您会注意到它会将此标记添加到每个 URL 的末尾。自己添加此属性的最简单方法是使用 WP 上的 Swap Google Fonts Display 插件。
但是请记住，此插件仅适用于 Google 字体，它会自动将显示交换属性附加到这些 URL。如果您在本地托管字体，则可以使用 String Locator 插件查找所有字体文件并对它们进行更改。需要在WP中打开字体样式表进行修改。
或者，您可以使用缓存插件自动为您优化字体，例如通过添加字体交换属性。
预加载字体
为确保您在本地托管字体，您可以使用以下插件预加载字体：
- WP Rocket
- Pre*Party 资源提示
- Permatters
如果您无力使用这些插件，您可以预加载您的字体。只需确保在预加载字体后彻底测试您的网站。预加载太多字体可能会损坏您的网站。因此，对于任何主要的后端机会，我们建议您预先备份您的 WordPress 网站。
禁用 CSS 交付优化
如果使用 WP Rocket 优化 CSS 交付或使用 LiteSpeed Cache 异步加载 CSS，可能会导致无样式内容闪烁（FOUC）。如果您想提高 CLS 分数，我们建议您在相应的插件中禁用这些选项。
或者，您可以设置所谓的回退关键 CSS。这涉及使用关键路径 CSS 生成器等工具生成关键回退脚本。
删除渲染阻止脚本也可能会降低您的 CLS 分数。我们建议您首先在启用 CSS 交付优化的情况下测试您的 CLS，然后在禁用它的情况下进行比较。
禁用动画
如果您正在使用动画，我们建议为您网站的移动版本禁用它们，因为动画会影响您网站的加载时间。如果您坚持要为您的网站添加动画，我们建议您使用 CSS 转换和翻译选项。
或者，您可以使用 Happy Addons Elementor 插件。这使您可以在不引起布局变化的情况下为元素设置动画。
消除大多数布局变化的最佳方法是修改页面加载方式。反过来，您可以提高 WordPress 网站的速度和效率。一如既往，这是关于改善用户体验。您的网站响应速度越快，用户就越有可能将其加入书签并重新访问。
