如何在WordPress中修复阻止渲染JavaScript和CSS

Do you want to eliminate render-blocking JavaScript and CSS in WordPress?

您是否要消除WordPress中的阻止渲染JavaScript和CSS？

If you test your website on Google PageSpeed insights, then you will likely see a suggestion to eliminate render-blocking scripts and CSS. However, it does not provide any details on how to do that on your WordPress site.

如果您在Google PageSpeed见解上测试您的网站，则可能会看到消除渲染阻止脚本和CSS的建议。 但是，它没有提供有关如何在WordPress网站上执行此操作的任何详细信息。

In this article, we’ll show you how to easily fix render-blocking JavaScript and CSS in WordPress to improve your Google PageSpeed score.

在本文中，我们将向您展示如何轻松地在WordPress中修复阻止渲染JavaScript和CSS，以提高您的Google PageSpeed得分。

什么是阻止渲染JavaScript和CSS？ (What is Render-Blocking JavaScript and CSS?)

Render blocking JavaScript and CSS are files that prevent a website from displaying a web page before loading these files.

渲染阻止JavaScript和CSS是阻止网站在加载这些文件之前显示网页的文件。

Every WordPress site has a theme and plugins that add JavaScript and CSS files to the front-end of your website. These scripts can increase your site’s page load time, and they can also block rendering of the page.

每个WordPress网站都有一个主题和插件，可将JavaScript和CSS文件添加到您的网站的前端。 这些脚本可能会增加您网站的页面加载时间 ，并且还可能阻止页面的呈现。

A user’s browser will have to load those scripts and CSS before loading the rest of the HTML on the page. This means that users on a slower connection will have to wait a few milliseconds more to see the page.

用户的浏览器必须先加载这些脚本和CSS，然后再加载页面上的其余HTML。 这意味着连接速度较慢的用户将不得不再等待几毫秒才能看到该页面。

These scripts and stylesheets are referred to as render-blocking JavaScript and CSS.

这些脚本和样式表称为渲染阻止JavaScript和CSS。

Website owners who are trying to achieve the Google PageSpeed score of 100 will need to fix this issue to attain that perfect score.

试图达到Google PageSpeed得分100的网站所有者，需要解决此问题才能获得完美的得分。

什么是Google PageSpeed得分？ (What is Google PageSpeed Score?)

Google PageSpeed Insights is a website speed test tool created by Google to help website owners optimize and test their websites. This tool tests your website against Google’s guidelines for speed and offers suggestions to improve your site’s page load time.

Google PageSpeed Insights是由Google创建的网站速度测试工具 ，可帮助网站所有者优化和测试其网站。 此工具会根据Google的速度指南测试您的网站，并提供建议以缩短您的网站页面加载时间。

It shows you a score based on the number of rules that your site passes. Most websites get somewhere between 50-70. However, some website owners feel compelled to achieve 100 (the highest a page can score).

它根据您的网站通过的规则数量向您显示得分。 大多数网站的访问量在50-70之间。 但是，有些网站所有者感到被迫达到100(页面可以得分最高)。

Do You Really Need the Perfect “100” Google PageSpeed Score?

您真的需要完美的Google PageSpeed得分“ 100”吗？

The purpose of Google PageSpeed insights is to provide you guidelines to improve the speed and performance of your website. You are not required to follow these rules strictly.

Google PageSpeed洞察力的目的是为您提供指导，以提高网站的速度和性能。 您无需严格遵守这些规则。

Remember that speed is only one of the many website SEO metrics that help Google determine how to rank your site. The reason speed is so important is because it improves user experience on your site.

请记住，速度只是帮助Google确定如何对网站排名的众多网站SEO指标之一。 速度之所以如此重要，是因为它改善了您网站上的用户体验。

Better user experience requires a lot more than just speed. You also need to offer useful information, a better user interface, and engaging content with text, images, and videos.

更好的用户体验需要的不仅仅是速度。 您还需要提供有用的信息，更好的用户界面，并使内容与文本，图像和视频互动。

Your goal should be to create a fast website that offers a great user experience.

您的目标应该是创建一个提供出色用户体验的快速网站。

During the last WPBeginner redesign, we kept our focus on speed as well as improving user experience.

在上一次WPBeginner重新设计期间，我们一直专注于速度以及改善用户体验。

We recommend that you use Google Pagespeed rules as suggestions, and if you can implement them easily without ruining user experience, then that’s great. Otherwise, you should strive to do as much as you can, and then don’t worry about the rest.

我们建议您使用Google Pagespeed规则作为建议，如果可以轻松实现它们而又不破坏用户体验，那就太好了。 否则，您应该尽力而为，然后不要担心其余的事情。

Having said that, let’s take a look at what you can do to fix render-blocking JavaScript and CSS in WordPress.

话虽如此，让我们来看看如何解决WordPress中阻止渲染JavaScript和CSS的工作。

We will cover two methods that will fix the render-blocking JavaScript and CSS in WordPress. You can choose the one that works best for your website.

我们将介绍两种方法来修复WordPress中阻止渲染JavaScript和CSS。 您可以选择最适合您的网站的一种。

1.使用WP Rocket修复渲染阻止脚本和CSS (1. Fix Render Blocking Scripts and CSS with WP Rocket)

For this method, we’ll be using the WP Rocket plugin. It is the best WordPress caching plugin on the market and allows you to quickly improve your website performance without any technical skills or complicated set up.

对于这种方法，我们将使用WP Rocket插件。 它是市场上最好的WordPress缓存插件 ，可让您快速提高网站性能，而无需任何技术技能或复杂的设置。

First, you need to install and activate the WP Rocket plugin. For more details, see our step by step guide on how to install a WordPress plugin.

首先，您需要安装并激活WP Rocket插件。 有关更多详细信息，请参阅有关如何安装WordPress插件的分步指南。

WP Rocket works out of the box, and it will turn on caching with optimal settings for your website. You can learn more about it in our complete guide on how to properly install and set up WP Rocket in WordPress.

WP Rocket开箱即用，它将为您的网站打开具有最佳设置的缓存。 您可以在有关如何在WordPress中正确安装和设置WP Rocket的完整指南中了解有关它的更多信息。

By default, it does not turn on JavaScript and CSS optimization options. These optimizations can potentially affect your website’s appearance or some features, which is why the plugin allows you to enable these settings optionally.

默认情况下，它不会打开JavaScript和CSS优化选项。 这些优化可能会影响您网站的外观或某些功能，这就是为什么该插件允许您选择启用这些设置的原因。

To do that, you need to visit Settings » WP Rocket page and then switch to the ‘File Optimization’ tab. From here, scroll to the CSS Files section and check the boxes next to Minify CSS, Combine CSS Files, and Optimize CSS Delivery options.

为此，您需要访问设置»WP Rocket页面，然后切换到“文件优化”选项卡。 从此处，滚动到CSS文件部分，然后选中缩小CSS，合并CSS文件和优化CSS传递选项旁边的框。

Note: WP Rocket will attempt to minify all your CSS files, combine them, and only load CSS needed for the visible part of your website. This could affect your website’s appearance, so you need to thoroughly test your website on multiple devices and screen sizes.

注意： WP Rocket将尝试缩小所有CSS文件，对其进行组合，并且仅加载网站可见部分所需CSS。 这可能会影响您网站的外观，因此您需要在多种设备和屏幕尺寸上彻底测试您的网站。

Next, you need to scroll to the JavaScript Files section. From here, you can check all the options for maximum performance improvement.

接下来，您需要滚动到“ JavaScript文件”部分。 从这里，您可以检查所有选项以最大程度地提高性能。

You can minify and combine JavaScript files like you did for CSS.

您可以像合并CSS一样缩小并合并JavaScript文件。

You can also stop WordPress from loading jQuery Migrate file. It is a script that WordPress loads to provide compatibility for plugins and themes using old versions of jQuery.

您也可以阻止WordPress加载jQuery Migrate文件。 它是WordPress加载的脚本，以使用旧版本的jQuery为插件和主题提供兼容性。

Most websites don’t need this file, but you would still want to check your website to make sure that removing it does not affect your theme or plugins.

大多数网站不需要此文件，但是您仍然希望检查您的网站以确保删除它不会影响您的主题或插件。

Next, scroll down a little further and check the boxes next to ‘Load JavaScript Defered’ and ‘Safe Mode for jQuery’ options.

接下来，进一步向下滚动并选中“加载JavaScript延迟”和“ jQuery安全模式”选项旁边的框。

These options delay loading non-essential JavaScripts, and the jQuery safe mode allows you to load jQuery for themes that may use it inline. You can leave this option unchecked if you are certain that your theme does not use inline jQuery anywhere.

这些选项会延迟加载不必要JavaScript，并且jQuery安全模式允许您为可能内联使用jQuery的主题加载jQuery。 如果确定您的主题在任何地方都没有使用内联jQuery，则可以不选中此选项。

Don’t forget to click on the Save Changes button to store your settings.

不要忘记单击“保存更改”按钮来存储您的设置。

After that, you may also want to clear cache in WP Rocket before testing your website again with Google Page Speed Insights.

之后，您可能还想清除WP Rocket中的缓存，然后再使用Google Page Speed Insights测试您的网站。

On our test site, we were able to achieve 100% score on Desktop and render-blocking issue was solved in both mobile and desktop scores.

在我们的测试站点上，我们能够在桌面系统上获得100％的得分，并且在移动和桌面系统得分方面，渲染阻止问题都得到了解决。

2.使用自动优化功能修复渲染阻止脚本和CSS (2. Fix Render Blocking Scripts and CSS with Autoptimize)

For this method, we will be using a separate plugin made specifically for improving delivery of your website’s CSS and JS files. While this plugin gets the job done, it does not have the other powerful features that WP Rocket has.

对于这种方法，我们将使用专门为改善您网站CSS和JS文件的传递而制作的单独插件。 尽管此插件可以完成工作，但它没有WP Rocket拥有的其他强大功能。

First thing you need to do is install and activate the Autoptimize plugin. For more details, see our step by step guide on how to install a WordPress plugin.

您需要做的第一件事是安装并激活Autoptimize插件。 有关更多详细信息，请参阅有关如何安装WordPress插件的分步指南。

Upon activation, you need to visit the Settings » Autoptimize page to configure the plugin settings.

激活后，您需要访问设置»自动优化页面来配置插件设置。

First, you need to check the box next to ‘Optimize JavaScript Code’ option under the JavaScript Options block. Make sure that ‘Aggregate JS-files’ option is unchecked.

首先，您需要选中“ JavaScript选项”块下“优化JavaScript代码”选项旁边的框。 确保未选中“聚合JS文件”选项。

Next, scroll down to the CSS Options box and check the ‘Optimize CSS Code’ option. Make sure that ‘Aggregate CSS-files’ option is unchecked.

接下来，向下滚动到“ CSS选项”框，然后选中“优化CSS代码”选项。 确保未选中“聚合CSS文件”选项。

You can now click on the ‘Save Changes and Empty Cache’ button to store your settings.

现在，您可以单击“保存更改并清空缓存”按钮来存储您的设置。

Go ahead and test your website with the Page Speed Insights tool. On our demo site, we were able to fix the render-blocking issue with these basic settings.

继续并使用Page Speed Insights工具测试您的网站。 在我们的演示站点上，我们能够使用这些基本设置解决渲染阻止问题。

If there are still render-blocking scripts, then you need to come back to the plugin’s settings page and review options under both JavaScript and CSS options.

如果仍然存在渲染阻止脚本，则需要返回到插件的设置页面，并检查JavaScript和CSS选项下的选项。

For instance, you can allow the plugin to include inline JS and remove scripts that are excluded by default like seal.js or jquery.js.

例如，您可以允许插件包含内联JS并删除默认情况下不包含的脚本，例如seal.js或jquery.js。

Click on the ‘Save changes and Empty Cache’ button to save your changes and empty plugin cache.

单击“保存更改并清空缓存”按钮以保存您的更改和清空插件缓存。

Once you are done, go ahead and check your website again with the Page Speed tool.

完成后，请继续使用“页面速度”工具再次检查您的网站。

How does it work?

它是如何工作的？

Autoptimize aggregates all enqueued JavaScript and CSS. After that, it creates minified CSS and JavaScripts files and serves cached copies to your website as async or deferred.

Autoptimize会聚集所有排队JavaScript和CSS 。 之后，它会创建缩小CSS和JavaScript文件，并以异步或递延方式将缓存的副本提供给您的网站。

This allows you to fix the render-blocking scripts and styles issue. However, please keep in mind that it can also affect the performance or appearance of your website.

这使您可以修复渲染阻止脚本和样式问题。 但是，请记住，它也会影响网站的性能或外观。

故障排除 (Troubleshooting)

Depending on how the plugins and your WordPress theme uses JavaScript and CSS, it could be quite challenging to completely fix all render-blocking JavaScript and CSS issues.

根据插件和WordPress主题使用JavaScript和CSS的方式而定，完全解决所有阻止渲染JavaScript和CSS问题可能会非常困难。

While the above tools can help, your plugins may need certain scripts at a different priority level to work properly. In that case, the above solutions can break the functionality of such plugins, or they could behave unexpectedly.

尽管上述工具可以提供帮助，但您的插件可能需要具有不同优先级的某些脚本才能正常工作。 在这种情况下，上述解决方案可能会破坏此类插件的功能，或者它们的行为可能会异常。

Google may still show you certain issues like optimizing CSS delivery for above the fold content. WP Rocket allows you to fix that by manually adding Critical CSS required to display the above fold area of your theme.

Google可能仍会向您显示某些问题，例如针对首屏内容优化CSS交付。 WP Rocket允许您通过手动添加显示主题的上述折叠区域所需的关键CSS来解决此问题。

However, it could be quite difficult to find out what CSS code you will need to display above the fold content.

但是，要找出需要在折叠内容上方显示CSS代码可能非常困难。

We hope this article helped you learn how to fix render-blocking JavaScript and CSS in WordPress. You may also want to see our ultimate guide on how to speed up WordPress performance for beginners, and our comparison of the best managed WordPress hosting companies.

我们希望本文能帮助您学习如何在WordPress中修复阻止渲染JavaScript和CSS。 您可能还想查看我们的关于如何为初学者提高WordPress性能的最终指南，以及我们对最佳托管WordPress托管公司的比较。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

如果您喜欢这篇文章，请订阅我们的YouTube频道 WordPress视频教程。 您也可以在Twitter和Facebook上找到我们。

翻译自: https://www.wpbeginner.com/wp-tutorials/how-to-fix-render-blocking-javascript-and-css-in-wordpress/