消除WordPress上的渲染阻止JavaScript和CSS

Outstanding loading speed is an essential website feature for a high ranking in

出色的加载速度是网站获得高排名的基本功能

SERP (SERP )

(

(

小号 (S)

earch

arch

Ë (E)

ngine

精氨酸

[R (R)

esult Pages).

结果页面)。

Google的 PageSpeed Insights by Google is an excellent tool for precisely that — optimizing your website’s loading PageSpeed Insights是一个出色的工具，可以帮助您优化网站的加载 speed. Let’s say you’re using this tool and get the “ 速度 。 假设您正在使用此工具并获得“

消除折叠内容中的阻止渲染JavaScript和CSS (Eliminate render-blocking JavaScript and CSS in above-the-fold content)

” warning. No need to worry! In this tutorial, I will show you how to address the issue.

“ 警告。 不用担心！ 在本教程中，我将向您展示如何解决该问题。

了解“消除首屏内容中的阻止渲染JavaScript和CSS”警告 (Understanding “Eliminate render-blocking JavaScript and CSS in above-the-fold content” Warning)

While reading Google’s PageSpeed rules, you can see that “Eliminate render-blocking JavaScript and CSS” is one of the rules. Failing to do this will affect your website’s loading speed — slow it down. Now you’re probably wondering how can JavaScript and CSS make your website slower?

在阅读Google的PageSpeed规则时 ，您会看到“消除渲染阻止JavaScript和CSS”是规则之一。 否则，将影响您网站的加载速度-降低速度。 现在您可能想知道JavaScript和CSS如何使您的网站变慢？

To put it simply, whenever you set up a new plugin or theme, they will enrich the front-end with new JavaScript and CSS code. Therefore browsers may take longer to load the webpage.

简而言之，无论何时设置新的插件或主题，它们都会通过新JavaScript和CSS代码丰富前端。 因此，浏览器可能需要更长的时间来加载网页。

ATF (ATF)

(

(

一个 (A)

bove

ve

Ť (T)

he

他

F (F)

old) is the part of your website that is visible after the first load. Any other part — anything you see after scrolling down is

旧)是您的网站的一部分，在首次加载后可见。 其他任何部分-向下滚动后看到的内容都是

BTF (BTF)

(

(

乙 (B)

elow

低

Ť (T)

he

他

F (F)

old).

旧)。

This warning gets pretty clear now doesn’t it? If any irrelevant JavaScript and CSS are rendered when someone visits your website, you might receive a warning to decrease the range of render-blocking JavaScript and CSS in above-the-fold content.

这个警告现在很清楚了，不是吗？ 如果有人访问您的网站时呈现了任何不相关JavaScript和CSS，则您可能会收到一条警告，以减少首屏内容中阻止渲染JavaScript和CSS的范围。

使用Google PageSpeed Insights发现阻止渲染JavaScript和CSS (Discovering Render-Blocking JavaScript and CSS Using Google PageSpeed Insights)

To fix render-blocking, you should first test your website’s speed with PageSpeed Insights:

要修复渲染阻止，您首先应该使用PageSpeed Insights测试网站的速度：

1. Go to the page, paste your website’s URL address in the “

   转到页面，将您网站的URL地址粘贴到“

   输入网页网址 (Enter a web page URL)

   ” field.

   ”字段。

2. Hit

   击中

   分析 (Analyze)

   to get the results.

   得到结果。

   Since most websites score around 50 to 70, this should help you measure your score. Also, Google will list recommendations to improve the performance of your site.

   由于大多数网站的得分在50到70之间，因此应该可以帮助您评估得分。 此外，Google还会列出一些建议，以提高您网站的性能。

If you happen to discover the recommendation to remove render-blocking JavaScript and CSS in above-the-fold content, then I’d suggest you settle the issue.

如果您碰巧发现删除首屏内容中的阻止渲染JavaScript和CSS的建议，那么建议您解决此问题。

Remember that your site doesn’t have to reach the maximum score, which is 100. Your goal is to try to receive a nice score without sacrificing UX.

请记住，您的网站不必达到最高分数100。您的目标是在不牺牲UX的情况下尝试获得较高的分数。

Also, understand that you shouldn’t remove any scripts that are crucial for quality UX only to get a bit higher score on PageSpeed Insights.

另外，请理解，您不应删除任何对质量UX至关重要的脚本，而只能在PageSpeed Insights上获得更高的分数。

The rules on which Google evaluates your site are only directions to consider for improving your website. In the end: use your own judgment!

Google评估您的网站所依据的规则只是改善网站的考虑方向。 最后：使用您自己的判断！

解决“在首屏内容中消除渲染阻止JavaScript和CSS”错误 (Solving the “Eliminate render-blocking JavaScript and CSS in above-the-fold content” Error)

It is really easy to diminish render-blocking JavaScript and CSS resources on WordPress websites. There are my three plugin recommendations that would help you fix the error:

减少WordPress网站上的阻止渲染JavaScript和CSS资源确实很容易。 我的三个插件建议可帮助您修复错误：

W3总缓存 (W3 Total Cache)

One of my favorite plugins: W3 Total Cache. After you’ve finished installing and activating it follow these actions on your WordPress admin dashboard:

我最喜欢的插件之一： W3 Total Cache 。 完成安装和激活后，请在WordPress管理仪表板上执行以下操作：

1. 性能 (Performance )

   ->

   ->

   一般 (General )

   Settings.

   设定

2. Look for the Minify heading and you’ll see some choices below the heading.
   查找“缩小”标题，您将在标题下方看到一些选择。

3. Check the “

   检查 ”

   启用 (Enable)

   ” box for

   ”框

   缩小 (Minify)

   . After that choose “

   。 之后，选择“

   手册 (Manual)

   ” for the

   “ 为了

   缩小模式 (Minify mode)

   .

   。

4. Click the “

   点击 ”

   保存所有设置 (Save all settings)

   ” button.

   ”按钮。

5. Retrieve all render-blocking JavaScript and CSS scripts. Google PageSpeed Insights will assist you in finding them.
   检索所有阻止渲染JavaScript和CSS脚本。 Google PageSpeed Insights将帮助您找到它们。

6. After finding the rogue script, find your way back to

   找到流氓脚本后，找到回到的方法

   性能 (Performance )

   ->

   ->

   缩小 (Minify)

   .

   。

7. Locate the

   找到

   JS (JS)

   intersects. Select the embed type

   相交。 选择嵌入类型

   使用“延迟”进行非阻塞 ( Non-blocking using “defer”)

   for the

   为了

   在<head>之前 (Before <head>)

   tag in the

   标记在

   区域运营 (Operations in areas)

   section.

   部分。

8. Select your website’s active theme and push the “

   选择您网站的活动主题，然后按“

   添加脚本 (Add Script)

   ” button in the

   ”按钮

   JS文件管理 (JS file management)

   section. Copy the JavaScript URLs from the PageSpeed Insights and paste it on the provided fields.

   部分。 从PageSpeed Insights复制JavaScript URL，然后将其粘贴到提供的字段中。

9. Down below you’ll find the

   在下方，您会找到

   CSS (CSS)

   segment. Now find the “

   分割。 现在找到“

   CSS文件管理 (CSS file management)

   ” part. Select your website's current theme and hit

   ”部分。 选择您网站的当前主题并点击

   添加样式表 (Add a style sheet)

   . Like in the previous step, copy and paste the CSS stylesheets URLs from the Google PageSpeed Insights to the required fields.

   。 与上一步一样，将CSS样式表网址从Google PageSpeed Insights复制并粘贴到必填字段。

10. Lastly, hit the “

    最后，点击“

    保存设置和清除缓存 (Save Settings & Purge Caches)

    ”.

    ”。

自动优化 (Autoptimize)

Another option would be using the plugin called Autoptimize might also help in solving the render-blocking JavaScript and CSS error. Implement these actions on your dashboard after installing and activating the plugin:

另一个选择是使用名为Autoptimize的插件，这也可能有助于解决阻止渲染JavaScript和CSS错误。 安装并激活插件后，在仪表板上执行以下操作：

1. Visit

   访问

   设定值 (Settings)

   ->

   ->

   自动优化 (Autoptimize)

   .

   。

2. In the

   在里面

   JavaScript (JavaScript)

   and

   和

   CSS选项 (CSS Options)

   sections individually tick the “

   部分分别勾选“

   优化JavaScript代码？ (Optimize JavaScript Code?)

   ” and “

   ”和“

   优化CSS代码？ (Optimize CSS Code?)

   ”.

   ”。

3. Hit “

   打“

   保存更改并清空缓存 (Save Changes and Empty Cache)

   ”.

   ”。

To guarantee that the matter has been fixed, check your website on Google PageSpeed Insights once more. If the warning doesn’t appear, that’s great — you can move on! Otherwise, let’s try adding some additional optimizations:

为确保已解决此问题，请再次在Google PageSpeed Insights上检查您的网站。 如果未出现警告，那很好–您可以继续！ 否则，让我们尝试添加一些其他优化：

1. Navigate to

   导航

   设定值 (Settings)

   ->

   ->

   自动优化 (Autoptimize)

   .

   。

2. Click the “

   点击 ”

   显示高级设置 (Show Advanced Settings)

   ”.

   ”。

3. Once there, find and tick both the “

   到达后，找到并勾选“

   还聚合内联JS (Also aggregate inline JS)

   ” and “

   ”和“

   还聚合内联CSS (Also aggregate inline CSS)

   ” selections.

   ”选择。

4. Save your adjustments.
   保存您的调整。

加速助推器包 (Speed Booster Pack)

Last but not least — Speed Booster Pack. This plugin also may be effective in getting rid of render-blocking JavaScript and CSS error on your website. In order to do this with the mentioned plugin, you should follow these actions:

最后但并非最不重要-Speed Booster Pack 。 该插件还可以有效消除您网站上的阻止渲染JavaScript和CSS错误。 为了使用提到的插件执行此操作，您应该执行以下操作：

1. Navigate to the

   导航到

   加速助推器包 (Speed Booster Pack)

   segment and enter the

   细分并输入

   高级 (Advanced)

   tab.

   标签。

2. Find the

   找出

   JavaScript优化 (JavaScript Optimization)

   menu, activate

   菜单，激活

   将脚本移到页脚 (Move scripts to the footer)

   and

   和

   延迟解析Javascript文件 (Defer parsing of Javascript files)

   .

   。

3. Find the

   找出

   CSS优化 (CSS Optimization)

   menu down below and enable the

   下方的菜单并启用

   CSS渲染阻止优化 (CSS render-blocking optimization)

   .

   。

4. You will also see the extra options like Inline all CSS, Minify all (previously) inlined CSS, Move all inlined CSS into the footer. You can do some tests with these settings to reach appropriate results.

   By activating all of these settings, you will make your website load faster, although it could present an instance called

   FOUC

   (

   F

   lash

   O

   f

   U

   nstyled

   C

   ontent

   ). To explain it shortly — it’s an occurrence when a website appears briefly with the browser’s default styles prior to loading an external CSS stylesheet due to the web browser engine rendering the page before all information is retrieved.

5. 您还将看到其他选项，例如内联所有CSS，最小化所有(以前)内联CSS，将所有内联CSS移至页脚。 您可以使用这些设置进行一些测试以获得适当的结果。

   通过激活所有这些设置，尽管可以显示一个名为

   福柯

   (

   F

   睫毛

   Ø

   F

   ü

   风格化

   C

   专心

   )。 简短地解释一下-这是因为网站在加载所有CSS样式表之前以浏览器的默认样式短暂出现，这是由于Web浏览器引擎在检索所有信息之前渲染了页面。

Once you’ve tried the mentioned methods, try to run your website through Google PageSpeed Insights again to make sure that the render-blocking problem is solved.

尝试了上述方法后，请尝试再次通过Google PageSpeed Insights运行您的网站，以确保解决了渲染阻止问题。

结论 (Conclusion)

Since search engines consider websites’ loading times when ranking results, it is one of the major elements in captivating and keeping visitors.

由于搜索引擎在对结果进行排名时会考虑网站的加载时间，因此这是吸引和留住访问者的主要因素之一。

Google’s PageSpeed Insights gives the website a rating based on its loading speed. In a case where you’re testing your WordPress website and receiving the notorious “Eliminate render-blocking JavaScript and CSS in above-the-fold content” warning, you can efficiently resolve the problem with mentioned plugins!

Google的PageSpeed Insights会根据网站的加载速度对网站进行评分。 如果您正在测试WordPress网站并收到臭名昭著的“在首屏内容中消除渲染阻止JavaScript和CSS”警告，则可以有效地解决上述插件的问题！

翻译自: https://habr/en/post/490218/