介绍
CLS 或累积布局偏移是影响网站速度的重要因素。CLS 分数为 0 不仅可以缩短网站的加载时间，还可以帮助您在 Google 搜索引擎中获得更好的排名。
什么是 CLS？
累积布局偏移量 (CLS) 是当前正在加载的视觉页面内容的意外布局偏移量。简单来说，当您网站上的某些部分比其他部分加载时间更长时，其他元素会从一个位置移动或转移到另一个位置，为加载较慢的项目腾出空间。这种变化称为累积布局偏移量。很容易理解，CLS 越小，您的网站速度就越快。
什么原因导致 CLS？
以下是 CLS 最常见的原因：
- 正在加载字体
- SVG 徽标的高度
- 正在加载移动标题
- 没有维度的图像
- 动态注入的内容
- 无尺寸的 iframe
如何使用 Astra 主题改进 CLS？
在最新版本的 Astra 主题中，我们改进了很多功能，以确保您的网站性能达到最佳水平。以下是我们所做的更改：
本地加载 Google 字体
数以百万计的网站使用了广泛使用的 Google 字体库中的 1000 多种字体。Astra 和许多其他 WordPress 主题都利用了这个库，并提供了一个集成，让用户可以访问各种排版选项。
通常，这种类型的连接需要请求 Google 服务器，然后加载字体文件。通常以这种方式加载任何 Google 字体。但是，由于数据从您的网络主机传输到 Google 的服务器需要几毫秒的时间，这会降低您的 CWV 分数。
为了在本地加载 Google 字体，您需要导航到 Astra > 设置 > 性能并打开在本地加载 Google 字体的功能。
一旦您打开此功能，它将自动在您的本地服务器上本地加载 Google 字体，并且加载速度会更快，从而提高您的整体 CLS 分数。
预加载字体
我们还提供了预加载本地字体的选项。通过字体预加载，您可以强制访问者的浏览器尽早加载重要字体，这样浏览器就可以在字体准备就绪后立即将其应用于文本，而不必等待字体加载。
由于 Google 字体将存储在本地，因此无需向服务器发送请求。最终减少字体加载时间并为您提供零分的 CLS 分数 – 这是最好的分数！
SVG 徽标的高度
默认情况下，WordPress 不会自动计算 SVG 徽标的高度。因为它会缩小徽标并导致标题部分出现意外的布局偏移。Astra 主题会使用 Javascript 自动调整徽标大小，以进一步提高您网站的 CLS 分数。
正在加载移动标题
您是否注意到在移动设备上加载使用 Astra 标题生成器创建的标题时会出现瞬间闪烁？此问题已通过在 Astra 主题中用静态 CSS 和动态断点替换 Javascript 代码来解决。最终提高您网站的 CLS 分数。
没有维度的图像
未设置尺寸的图像始终会影响您网站的 CLS 分数。始终确保为每幅图像分配一个通用尺寸，以便它们在加载后不会改变布局。使用 Astra 主题，您只需单击图像块并设置尺寸百分比，即可确保整个图像立即加载。您也可以手动设置尺寸。
动态注入的内容
在现有内容之上插入动态内容也会增加您网站的 CLS 分数。这些动态内容可能是 GDPR 通知、相关内容，甚至是新闻通讯订阅。这些动态内容总是需要更多时间加载并在最后弹出，导致布局发生变化，从而增加 cls 分数。始终建议在页面末尾插入任何动态内容，以避免任何不必要的 CLS。
无尺寸的 iframe
当您在现有内容中插入嵌入项目（例如 Youtube 视频或 HTML 代码，甚至是 iframe）时，它们通常需要一些时间来加载，并导致布局偏移，从而增加 CLS 分数。为了避免这种情况，您应始终为 iframe 或嵌入分配固定尺寸，这样它们就无法增加布局偏移。
结论
为了减少 CLS，开发人员应专注于优化图像、字体和其他页面元素，并实施响应式设计原则。他们还应优先加载首屏内容，并避免动态插入新元素。
Google 最近宣布将把 CLS 作为其搜索算法的排名因素之一，因此网站所有者和开发人员更有必要优先考虑减少 CLS。通过遵循减少 CLS 的最佳做法和指南，网站可以为用户提供无缝的浏览体验，从而提高参与度、提高转化率，并最终提高企业的成功率。
