Outstanding loading speed is an essential website feature for a high ranking in SERP (Search Engine Result Pages). PageSpeed Insights by Google is an excellent tool for precisely that — optimizing your website’s loading speed. Let’s say you’re using this tool and get the “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.
优秀的加载速度为高在SERP排名(šË操作搜索ngineřesult页)的基本特征的网站。 Google的PageSpeed Insights是一个出色的工具，可以帮助您优化网站的加载速度 。 假设您正在使用此工具，并收到“ 在首屏内容中消除渲染阻止JavaScript和CSS ”警告。 不用担心！ 在本教程中，我将向您展示如何解决该问题。
了解“消除首屏内容中的阻止渲染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 (Above The Fold) is the part of your website that is visible after the first load. Any other part — anything you see after scrolling down is BTF (Below The Fold).
ATF(A波夫吨他˚F岁)是你的网站的一部分是先装后可见。 任何其他部分-任何你向下滚动后看到的是BTF(B elow 吨他˚F岁)。
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测试网站的速度：
-
Go to the page, paste your website’s URL address in the “Enter a web page URL” field.
转到页面，将您网站的URL地址粘贴到“ 输入网页URL ”字段中。
-
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管理仪表板上执行以下操作：
-
Performance -> General Settings.
性能 -> 常规设置。
- Look for the Minify heading and you’ll see some choices below the heading. 查找“缩小”标题，您将在标题下方看到一些选择。
-
Check the “Enable” box for Minify. After that choose “Manual” for the Minify mode.
选中“ 启用 ”复选框以缩小 。 之后，选择“ 手动 ”作为“ 缩小”模式 。
-
Click the “Save all settings” button.
点击“ 保存所有设置 ”按钮。
- Retrieve all render-blocking JavaScript and CSS scripts. Google PageSpeed Insights will assist you in finding them. 检索所有阻止渲染JavaScript和CSS脚本。 Google PageSpeed Insights将帮助您找到它们。
-
After finding the rogue script, find your way back to Performance -> Minify.
找到流氓脚本后，找到回到Performance- > Minify的方式 。
-
Locate the JS intersects. Select the embed type Non-blocking using “defer” for the Before <head> tag in the Operations in areas section.
找到JS相交。 在“区域中的操作 ”部分中，为<head>之前的标签选择使用“延迟”的嵌入类型“非阻塞” 。
-
Select your website’s active theme and push the “Add Script” button in the JS file management section. Copy the JavaScript URLs from the PageSpeed Insights and paste it on the provided fields.
选择您网站的活动主题，然后在JS文件管理部分中按“ 添加脚本 ”按钮。 从PageSpeed Insights复制JavaScript URL，然后将其粘贴到提供的字段中。
-
Down below you’ll find the CSS segment. Now find the “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片段。 现在找到“ CSS文件管理 ”部分。 选择您网站的当前主题，然后点击添加样式表 。 与上一步一样，将CSS样式表网址从Google PageSpeed Insights复制并粘贴到必填字段。
-
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错误。 安装并**插件后，在仪表板上执行以下操作：
-
Visit Settings -> Autoptimize.
访问设置 ->自动优化 。
-
In the JavaScript and CSS Options sections individually tick the “Optimize JavaScript Code?” and “Optimize CSS Code?”.
在“ JavaScript和CSS选项”部分中，分别勾选“ 优化JavaScript代码？ ”和“ 优化CSS代码？ ”。
-
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上检查您的网站。 如果未出现警告，那很好–您可以继续！ 否则，让我们尝试添加一些其他优化：
-
Navigate to Settings -> Autoptimize.
导航至设置 ->自动优化 。
-
Click the “Show Advanced Settings”.
点击“ 显示高级设置 ”。
-
Once there, find and tick both the “Also aggregate inline JS” and “Also aggregate inline CSS” selections.
到达后，找到并勾选“ 同时聚合内联JS ”和“ 同时聚合内联CSS ”两个选择。
- 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错误。 为了使用提到的插件执行此操作，您应该执行以下操作：
-
Navigate to the Speed Booster Pack segment and enter the Advanced tab.
导航到Speed Booster Pack段，然后进入“ 高级”选项卡。
-
Find the JavaScript Optimization menu, activate Move scripts to the footer and Defer parsing of Javascript files.
找到“ JavaScript优化”菜单，**“ 将脚本移至页脚并推迟对Javascript文件的解析” 。
-
Find the CSS Optimization menu down below and enable the CSS render-blocking optimization.
在下面找到CSS Optimization菜单，然后启用CSS渲染阻止优化 。
-
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.
您还将看到其他选项，例如内联所有CSS，最小化所有(以前)内联CSS，将所有内联CSS移至页脚。 您可以使用这些设置进行一些测试以获得适当的结果。
By activating all of these settings, you will make your website load faster, although it could present an instance called FOUC (Flash Of Unstyled Content). 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.
通过**所有这些设置，你会做你的网站加载速度更快，但它可能会出现所谓的FOUC一个实例( ˚F睫毛华氏度 ünstyledÇontent )。 简短地解释一下-这是因为网站在加载所有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”警告，则可以有效地解决上述插件的问题！