简体繁体 English

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

[英]How to solve layout shifting issue (CLS) generated after eliminating render blocking in WordPress?

原文 2021-10-13 10:24:44 5 1 wordpress/ google-pagespeed/ pagespeed-insights/ render-blocking/ cumulative-layout-shift

We have developed our website in WordPress using Astra theme and beaver page builder plugin.to increase website score we have used WP-Rocket plugin for optimization.我们使用 Astra 主题和 Beaver 页面构建器插件在 WordPress 中开发了我们的网站。为了提高网站分数，我们使用了 WP-Rocket 插件进行优化。 Now WP-Rocket is optimizing CSS and JavaScript and loading CSS and JS files in the end.现在 WP-Rocket 正在优化 CSS 和 JavaScript，并最终加载 CSS 和 JS 文件。 So because of that beaver page builder styles (Layout CSS) are loading late and it's creating CLS issues in page speed insights.因此，由于海狸页面构建器样式（布局 CSS）加载较晚，并且在页面速度洞察中造成 CLS 问题。 Is there any way to load those layout CSS files at very first load.有没有办法在第一次加载时加载这些布局 CSS 文件。
Note : For each page these layout CSS files are auto generated by beaver page builder.注意：对于每个页面，这些布局 CSS 文件都是由 Beaver 页面构建器自动生成的。

1 个解决方案

You can solve the CLS issue easily.您可以轻松解决 CLS 问题。 If you're using the WP Rocket or any other cache plugin they also created the CSS and cache files.如果您使用 WP Rocket 或任何其他缓存插件，他们还会创建 CSS 和缓存文件。 What is CLS .什么是 CLS 。 Basically CLS (Cumulative Layout Shift)measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page.基本上，CLS（累积布局偏移）测量页面整个生命周期中发生的每个意外布局偏移的所有单独布局偏移分数的总和。 The score is zero to any positive number, where zero means no shifting and the larger the number, the more layout shift on the page.分数为零到任何正数，其中零表示没有移位，数字越大，页面上的布局移位越多。 This is important because having pages elements shift while a user is trying to interact with it is a bad user experience.这很重要，因为在用户尝试与之交互时让页面元素移动是一种糟糕的用户体验。

How to solve:怎么解决：

For solving the CLS issue we have three solutions:为了解决 CLS 问题，我们有三个解决方案：

1. Use CDN 1.使用CDN

A CDN allows for the quick transfer of assets needed for loading Internet content including HTML pages, javascript files, stylesheets, images, and videos. CDN 允许快速传输加载 Internet 内容所需的资产，包括 HTML 页面、javascript 文件、样式表、图像和视频。 The popularity of CDN services continues to grow, and today the majority of web traffic is served through CDNs, including traffic. CDN 服务的普及程度不断提高，如今大部分 Web 流量都通过 CDN 提供服务，包括流量。 We have various CDN platforms like: https://www.cloudflare.com/我们有各种 CDN 平台，例如： https : //www.cloudflare.com/

You can also refer to hosting provider, they also provide the CDN for your domain.您也可以参考托管服务提供商，他们还为您的域提供 CDN。 You can ask to hosting provider for CDN您可以向托管服务提供商询问 CDN

2. Image Optimization 2. 图像优化

You have to need to optimize the all site images to deliver the large content in minimum time, you can use the plugin for image optimization as well.您必须优化所有站点图像以在最短的时间内交付大量内容，您也可以使用该插件进行图像优化。

3. Use Preloader 3. 使用预加载器

This solution is very effective solution.该解决方案是非常有效的解决方案。 You can use the loader on your site it solve the CLS issue easily and its working 100%.您可以在您的站点上使用加载程序，它可以轻松解决 CLS 问题并且 100% 正常工作。 For loader you can use the preloader plugin.对于加载器，您可以使用预加载器插件。

Hope you understand the Solutions and their requirements.希望您了解解决方案及其要求。

Thanks谢谢