wordpress - 如何解决 WordPress 中消除渲染阻塞后产生的布局移位问题（CLS）？

Question

我们使用 Astra 主题和海狸页面构建器插件在 WordPress 中开发了我们的网站。为了提高网站得分，我们使用了 WP-Rocket 插件进行优化。现在 WP-Rocket 正在优化 CSS 和 JavaScript 并最终加载 CSS 和 JS 文件。因此，由于海狸页面构建器样式（布局 CSS）加载较晚，并且在页面速度洞察力中产生了 CLS 问题。有什么方法可以在第一次加载时加载这些布局 CSS 文件。
注意：对于每个页面，这些布局 CSS 文件由海狸页面构建器自动生成。

Answer 1

您可以轻松解决 CLS 问题。如果您使用 WP Rocket 或任何其他缓存插件，他们还会创建 CSS 和缓存文件。什么是 CLS。基本上，CLS（累积布局偏移）测量页面整个生命周期内发生的每个意外布局偏移的所有单独布局偏移分数的总和。分数对于任何正数都是零，其中零表示不移动，数字越大，页面上的布局移动越多。这很重要，因为在用户尝试与之交互时让页面元素发生变化是一种糟糕的用户体验。

怎么解决：

为了解决 CLS 问题，我们有三个解决方案：

1.使用CDN

CDN 允许快速传输加载 Internet 内容所需的资产，包括 HTML 页面、javascript 文件、样式表、图像和视频。CDN 服务的受欢迎程度持续增长，如今大部分网络流量都是通过 CDN 提供的，包括流量。我们有各种 CDN 平台，例如： https ://www.cloudflare.com/

您也可以参考托管服务提供商，他们还为您的域提供 CDN。您可以向托管服务提供商询问 CDN

2.图像优化

您必须优化所有站点图像以在最短的时间内交付大量内容，您也可以使用该插件进行图像优化。

3.使用预加载器

该解决方案是非常有效的解决方案。您可以在您的站点上使用加载程序，它可以轻松解决 CLS 问题并且 100% 正常工作。对于加载器，您可以使用预加载器插件。

希望您了解解决方案及其要求。

谢谢