利用WP Rocket移除阻塞渲染的JavaScript和CSS等阻塞资源

在我们通过Google PageSpeed Insights对自己的WordPress网站进行检测的时候，会提示很多可以优化或者改进的地方，比如Google将会告诉您需要移除WordPress网站上阻塞渲染的资源。那么如何移除阻塞渲染的JavaScript和CSS呢？

一、什么是“移除阻塞渲染资源”

了解什么是阻塞渲染的资源以及为什么它们会影响网站的加载时间，我们需要从基本的角度来了解网络浏览器如何呈现网页。

当访问者登陆您的站点时，他们的Web浏览器从站点代码的顶部开始并进行阅读，记住，是从上到下。

如果在此过程中遇到CSS或JavaScript文件，则在等待下载和处理该文件时需要停止 “读取”。那么花费在“暂停”上的时间来下载和解析这些资源可能影响到更重要的进程，例如加载游客访客应立即可见的网站内容。

让我们看一个极端的例子来说明为什么这可能是一个问题。

假设您一个网站的页脚设计了很酷的JavaScript效果。它由“ coolfooter.js”提供支持，但该脚本在您网站代码顶部引用（实际上访问者只有滚动到页脚才能看到它）。

那么这个网站代码的布局就显得不合理了。

我们知道，当访问者登陆您的网站时，他们的浏览器开始从上到下阅读。因此，在它可以解析和呈现网站上首屏内容的HTML之前，它需要等待下载并解析coolfooter.js文件。

这就会导致，显示首屏内容的HTML需要更长的时间，这意味着您的访问者会觉得网站速度较慢。

当Google告诉您移除阻塞渲染资源时，它实际上是在说：“嘿，不要在网站代码的顶部加载不必要的资源，因为这将使访问者的浏览器下载优先可见部分内容所需的时间更长”。

有了本文中的提示，您就可以延迟加载某些CSS和JavaScript资源，直到页面的可见部分已经加载为止。

什么是阻塞渲染资源？

当提到阻塞渲染资源时，我们通常指的是：

• CSS
• JavaScript

重要的是要了解并非所有CSS和JavaScript文件都是阻塞渲染的。

例如，在页面顶部加载重要的CSS至关重要，否则访问者可能会遇到所谓的未样式化内容闪烁（FOUC）现象。

图像是否属于阻塞渲染资源？

不，图像不会造成渲染阻塞。优化WordPress图像以减小其文件大小仍然很重要，但不必担心优化图像的传送路径。

二、如何检测网站是否存在阻塞渲染的资源

要评估您的WordPress网站当前是否具有阻塞渲染的资源，可以使用Google PageSpeed Insights。之前虾皮路也专门介绍过《网站速度怎么优化？试试PageSpeed Insights》

您要做的就是输入要测试的URL。然后，PageSpeed Insights将在“ 优化建议”下的“ 移除阻塞渲染的资源”部分列出每个资源的地址：

如何移除阻塞渲染的JavaScript

有几种不同的策略可以移除阻塞渲染的JavaScript。以下是主要方法：

1. 异步加载 –让HTML解析器（例如访客的浏览器）下载JavaScript，同时仍然解析HTML的其余部分。也就是说，文件下载时并不会完全停止解析。但是，一旦下载，它将暂停HTML解析器以执行脚本。
2. 延迟加载 –让HTML解析器在解析其余HTML的同时下载JavaScript，并等待执行脚本，直到HTML解析完成。

这插图可以帮助你更好地理解正常脚本加载、脚本异步加载和脚本延迟加载三者之间的区别：

使用延迟加载的好处是可以确保脚本按照它们在代码中出现的顺序执行。

异步加载不使用这种方法，如果将异步加载应用于所有JavaScript资源，有时会导致问题。因为异步加载通常会破坏页面文档前面呈现所依赖的资源。异步加载产生的最常见问题是损坏的jQuery资源，这些资源会在将jquery.js添加到文档之前尝试加载。

如何移除阻塞渲染的CSS

移除阻塞渲染的CSS可能会有些棘手，因为您必须注意不要延迟渲染首屏内容所需的CSS。理想的安排是：

• 确定呈现首屏内容所需的样式，并与HTML内联发送这些样式。
• 在拉入CSS文件的链接元素上使用media属性，以识别有条件的CSS资源，即仅特定设备或情况所需的CSS资源。
• 剩下的CSS资源应该采用异步加载，通常是通过添加延迟或异步JavaScript来完成的。

三、使用WordPress插件移除阻塞渲染资源

最后再说一下如何移除阻塞渲染的JavaScript和CSS，因为我们在WordPress里面肯定装了一些优化插件，这里虾皮路就以WP Rocket为例。

没有安装WP Rocket？点击这里了解《WP Rocket 3.6.3汉化破解版|WordPress最强缓存加速插件》

作为参考，以下是站点在未优化CSS和JavaScript前的检测：

注意：如果使用Google PageSpeed Insights测试更改后的效果，需要等待2-3分钟，因为Google会将其结果缓存了几分钟（连续快速测试，可能结果不会有变化）。

使用WP Rocket移除阻塞渲染资源

WP Rocket是一个非常受欢迎的专业的WordPress性能和缓存插件。WP Rocket对于WordPress的性能所做的不仅仅是缓存，还包括帮助您移除WordPress网站上阻塞渲染的CSS和JavaScript资源。因为虾皮路已经对WP Rocket进行了汉化，因此这里是以汉化版说明为主。

安装并启用WP Rocket后，转到“ 文件优化”选项卡。然后，启用以下两个选项：

• 在“ CSS 文件”部分下CSS 递送优化
• 在“ JavaScript 文件”部分下JavaScript 异步加载。您可以尝试关闭jQuery的安全模式。但是，如果您注意到站点前端存在问题，则可能需要重新启用jQuery的安全模式，因为这可能是罪魁祸首。

如下图设置

激活这两个功能后，我们的站点也就轻松通过了PageSpeed Insights中的“移除阻塞渲染资源”审核。与其他优化插件的设置相比，WP Rocket还设法移除了更多的阻塞渲染资源：

总结

阻塞渲染资源通过让访问者的浏览器延迟渲染首屏内容，但浏览器立即下载不需要的文件，从而减慢了WordPress网站的页面加载时间。阻塞渲染资源会增加WordPress网站感知页面加载时间，强制浏览器延迟呈现首屏内容，立即下载不需要的文件。

为了帮助访问者更快地加载页面的可见部分，应该延迟加载不立即需要的资源。通过WP Rocket插件可以很好的解决阻塞渲染资源的问题。