介绍
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 字体的功能。
![如何使用 Astra 主题提高 CLS 分数-HEIWP-外贸建站](https://cdn.shortpixel.ai/spai/w_698+q_lossless+ret_img+to_webp/wpastra.com/wp-content/uploads/2023/05/load-google-fonts.png)
一旦您打开此功能,它将自动在您的本地服务器上本地加载 Google 字体,并且加载速度会更快,从而提高您的整体 CLS 分数。
预加载字体
我们还提供了预加载本地字体的选项。通过字体预加载,您可以强制访问者的浏览器尽早加载重要字体,这样浏览器就可以在字体准备就绪后立即将其应用于文本,而不必等待字体加载。
![如何使用 Astra 主题提高 CLS 分数-HEIWP-外贸建站](https://cdn.shortpixel.ai/spai/w_698+q_lossless+ret_img+to_webp/wpastra.com/wp-content/uploads/2023/05/preload-google-fonts.png)
由于 Google 字体将存储在本地,因此无需向服务器发送请求。最终减少字体加载时间并为您提供零分的 CLS 分数 – 这是最好的分数!
![如何使用 Astra 主题提高 CLS 分数-HEIWP-外贸建站](https://cdn.shortpixel.ai/spai/w_698+q_lossless+ret_img+to_webp/wpastra.com/wp-content/uploads/2022/08/cls-score-ast.png)
SVG 徽标的高度
默认情况下,WordPress 不会自动计算 SVG 徽标的高度。因为它会缩小徽标并导致标题部分出现意外的布局偏移。Astra 主题会使用 Javascript 自动调整徽标大小,以进一步提高您网站的 CLS 分数。
正在加载移动标题
您是否注意到在移动设备上加载使用 Astra 标题生成器创建的标题时会出现瞬间闪烁?此问题已通过在 Astra 主题中用静态 CSS 和动态断点替换 Javascript 代码来解决。最终提高您网站的 CLS 分数。
没有维度的图像
未设置尺寸的图像始终会影响您网站的 CLS 分数。始终确保为每幅图像分配一个通用尺寸,以便它们在加载后不会改变布局。使用 Astra 主题,您只需单击图像块并设置尺寸百分比,即可确保整个图像立即加载。您也可以手动设置尺寸。
![如何使用 Astra 主题提高 CLS 分数-HEIWP-外贸建站](https://cdn.shortpixel.ai/spai/w_698+q_lossless+ret_img+to_webp/wpastra.com/wp-content/uploads/2022/08/Ast-cls-image-dimension.png)
动态注入的内容
在现有内容之上插入动态内容也会增加您网站的 CLS 分数。这些动态内容可能是 GDPR 通知、相关内容,甚至是新闻通讯订阅。这些动态内容总是需要更多时间加载并在最后弹出,导致布局发生变化,从而增加 cls 分数。始终建议在页面末尾插入任何动态内容,以避免任何不必要的 CLS。
无尺寸的 iframe
当您在现有内容中插入嵌入项目(例如 Youtube 视频或 HTML 代码,甚至是 iframe)时,它们通常需要一些时间来加载,并导致布局偏移,从而增加 CLS 分数。为了避免这种情况,您应始终为 iframe 或嵌入分配固定尺寸,这样它们就无法增加布局偏移。
![如何使用 Astra 主题提高 CLS 分数-HEIWP-外贸建站](https://cdn.shortpixel.ai/spai/w_600+q_lossless+ret_img/wpastra.com/wp-content/uploads/2022/08/ezgif.com-gif-maker-2.gif)
结论
为了减少 CLS,开发人员应专注于优化图像、字体和其他页面元素,并实施响应式设计原则。他们还应优先加载首屏内容,并避免动态插入新元素。
Google 最近宣布将把 CLS 作为其搜索算法的排名因素之一,因此网站所有者和开发人员更有必要优先考虑减少 CLS。通过遵循减少 CLS 的最佳做法和指南,网站可以为用户提供无缝的浏览体验,从而提高参与度、提高转化率,并最终提高企业的成功率。