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

Question

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

Answer 1

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

怎么解决：

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

1.使用CDN

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

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

2. 图像优化

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

3. 使用预加载器

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

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

谢谢