如何消除WordPress中的呈现阻塞资源(JavaScript和CSS)

网站速度是影响你的谷歌搜索排名的众多因素之一。此外，由于它极大地影响了访问者是否会留在你的网站上，难怪网站所有者会不断努力改进它。提高页面加载速度的一些方法包括拥有良好的虚拟主机服务，使用缓存插件，以及消除WordPress网站上的JavaScript和CSS等呈现阻塞资源。因此，修复呈现阻塞问题非常重要。由于知道如何做到这一点并不常见，我们准备了这篇文章来解释拥有呈现阻塞资源的意义以及如何消除它们。为了便于导航，我们将本文分为几个部分：

当用户访问您的网站时，他们的Web浏览器将开始从上到下加载页面。页面的上半部分，即首先加载和查看的部分，称为折叠(ATF)内容上方。如果浏览器在加载过程中遇到CSS样式表或JS脚本，它将暂停页面加载以解析这些资源，从而降低整体页面加载速度。只有在加载文件夹内容的同时加载的CSS样式表或JS脚本被认为与其功能无关，我们称之为呈现块。抵消这种情况的一种解决方案是延迟加载不必要的资源。您可以通过在页脚(在结束<；/body>；标记之前)加载您的JS脚本来实现这一点，这些脚本负责交互和功能，而不是样式。CSS样式表应该仍然加载在顶部(在HEAD部分)，以避免所谓的无样式内容闪烁(FOUC)。FOUC是一个很短的时刻，文件夹上方的内容加载了默认的浏览器样式，这对访问者来说可能看起来没有吸引力，并导致他们离开您的网站。

由于所有插件和主题都同时添加了CSS和JS，其中一些可能是呈现阻塞的，所以您需要尽可能高效地解决这个问题。我们将向您介绍几个可用于处理呈现块脚本和样式表的插件。此外，我们将快速介绍其中一些插件在幕后执行的操作，以便您能够掌握需要执行的操作。这些解释可能看起来有点复杂，但为了理解某些插件提供的选项，这些解释是必要的。

当谈到消除呈现阻塞的JS脚本时，解决方案之一是为它们添加异步或延迟属性。异步和延迟实现了相同的目的-在解析HTML内容的同时下载JS脚本。两者之间的主要区别在于，当使用异步时，脚本在加载之后执行(通过暂停HTML解析)，而当使用DEFER时，脚本在HTML解析完成后执行。这两种方法各有利弊。延时更适合于具有依存关系的脚本，因为它保留了定义这些脚本的顺序。异步更适合于没有依赖项的脚本，因为它们在加载后立即执行。此外，在使用这两种方法之前，请确保排除jquery.js，因为它需要加载ATF内容。延迟或异步jquery.js可能会导致站点中断，因为有脚本依赖于它正常运行。Spamaller脚本可以合并，然后与HTML进行异步/延迟或内联加载。

当谈到消除呈现阻塞的CSS样式表时，解决方案包括使用HTML内联加载较小的CSS，使用条件CSS指定视口和宽度(通过使用媒体查询)，以及异步加载剩余的样式表，这已经成为WordPress的一种常见做法。

您可以使用WordPress插件来消除渲染阻塞资源。根据问题的严重程度，您可以选择使用免费或高级插件。您也可以手动消除渲染阻塞资源，但这需要大量的高级WordPress知识，因此，我们将专注于基于插件的解决方案。使用插件可以使移除呈现块资源的过程变得简单。它包括以下步骤：测试站点以确定哪些资源处于呈现阻塞状态，启用适当的插件选项，并重新测试以验证问题是否已解决。如果需要，可以通过测试其他插件选项来重复该过程几次，以获得最佳结果。

每一次成功的故障排除尝试的第一步都是查找问题。幸运的是，有很多好的网站测试工具。我们将看看两个这样的网站-GTmetrix和PageSpeed Insights。您可以尝试的其他选项包括Pingdom速度测试、网页测试和KeyCDN网站速度测试。在我们开始测试之前，您应该意识到网站测试工具在第一次爬行您的站点时可能会比较慢。正因为如此，它们最终可能会显示更高的页面加载时间。

要测试您的站点，请访问GTmetrix页面，插入您的URL，然后单击Test Your Site按钮。

通过单击页面速度选项卡，您可以查看每个推荐的所有推荐和您的当前评分。要定位所有呈现块CSS和JS资源，请检查有关内联代码、缩小和优化的相关行。我们在下面的屏幕截图中标记了您应该查找的所有选项。

在大多数情况下，我们标记的最后两个选项(将CSS放在文档头和首选异步资源)可以忽略。这是因为这两个选项目前都是默认的WordPress实践。

如果您单击任何建议，它将显示需要改进的资源列表。出于我们的目的，它将是样式表或JS脚本的列表。还有，在这上面徘徊，这是什么意思？按钮将显示一篇文章的小摘录，澄清推荐的含义，并伴随着一个阅读更多链接到完整的文章进行进一步解释。

您应该保存在结果中获得的样式表和脚本的列表，因为它将在接下来的步骤中提供帮助。

另一个常用的网站工具是PageSpeed Insights网站。PageSpeed Insights在0-100分范围内审查您的网站-包括桌面版和移动版。它回顾了折叠式加载时间和整页加载时间。与GTmetrix类似，它提供了改善网站加载时间的建议。此外，它考虑了Chrome用户体验报告中的信息，通过考虑移动设备上的字体和按钮大小以及视口配置来为您的移动网站评分。

要测试您的网站，请访问PageSpeed Insights，插入您的网站URL，然后按分析按钮。

导航到Opportunities部分，查看您可以在哪里进行改进以获得更快的页面加载时间。PageSpeed Insights提供了一个单独的小节中显示的关于删除渲染块资源的更简明的报告。您只需搜索消除渲染阻塞资源子部分/选项卡。

单击它将打开其内容。在那里，您将找到关于呈现块资源的简短说明，包括指向可能有用的插件的链接。最重要的是，它包含稍后需要的所有呈现块样式表和脚本的列表。

WordPress的众多好处之一是几乎所有用途都有大量插件。修复呈现阻塞资源也不例外，因此我们求助于缓存和站点优化插件。但是，在您继续之前，我们强烈建议您备份您的站点。删除或更改加载某些资源的顺序以防止它们被呈现阻止可能会对您的网站产生负面影响，或者更准确地说，破坏您的主题。因此，请确保您已准备好备份以防万一，然后我们可以继续本文的主要部分。我们将看看两个插件-W3 Total Cache和WP Fest Cache，并在后面的部分给你一些额外的建议和替代方案。

安装并激活插件后，导航到仪表板中的Performance(性能)选项卡，然后单击General Settings(常规设置)。

在缩小部分下勾选以启用。在缩小模式下选择自动，然后保存下面的所有设置。最后，单击右侧的保存设置清除缓存按钮(&P)。

如果希望对缩小哪些样式表和JS脚本有额外的控制，可以在缩小模式下选择Manual。不过，我们建议您不要使用手动缩小，除非您是更高级的WordPress用户或有人指导您完成缩小。如果您仍然想尝试手动缩小JS脚本，那么您应该导航到Performance>；minify。

然后找到JS部分。勾选Enable旁边的复选框并选择您的嵌入类型(我们建议使用异步的非阻塞或使用延迟类型的非阻塞)。

接下来，选择您的活动主题，并通过单击add a script按钮开始添加JS脚本。要添加脚本，请插入其文件URL并选择其嵌入位置。URL是您在上一步中通过使用GTMetrix或Page Speed Insights获得的URL。JS脚本的嵌入位置应该在结束<；/body>；标记之前。

同样，要缩小样式表，请向下滚动到Performance>；minify中的CSS部分，然后勾选Enable选项旁边的复选框。

选择您的活动主题，然后单击Add a Style Sheet按钮。添加完所需的样式表后，单击下面的保存所有设置按钮。然后，单击右侧的保存设置和清除缓存按钮。

安装并激活插件后，打开管理仪表板菜单中的WP Fastest Cache选项。

点击Settings选项卡，勾选与CSS和JS的缩小和组合有关的所有选项。它们是缩小CSS、合并CSS和合并J。但是，请注意，您需要购买此插件的高级版本才能访问其更强大的修复渲染阻塞的选项。这些高级选项包括minify CSS Plus、minify Js、Combine Js Plus、Render Block Js和Google Fonts选项(用于异步加载)。一旦您选择了所需的选项，只需转到提交即可完成。

在您选择的插件完成清除呈现阻塞脚本和样式表之后，您应该使用前面提到的网站对您的网站进行另一次测试。确保事先清除插件和浏览器缓存。此外，我们建议在运行测试之前等待几分钟。然后，您可以使用其中一个网站测试工具检查您的网站。如果您不确定如何重新测试您的网站，您可以重复测试您的网站中描述的相同过程。确保使用相同的工具运行测试，以便能够比较结果。对于我们新的试运行，我们得到了以下结果。

正如您所看到的，结果非常接近完美，但还没有达到。有时，这意味着您应该使用不同的插件运行另一个修复，但更有可能的是，您需要对结果持保留态度。重要的是要注意，网站测试工具提供的建议只是指导方针，不应该盲目遵循。你不应该以删除一个健壮的WordPress网站正常工作所必需的JS脚本为代价来努力获得满分。例如，因为您排除了jquery.js，所以您不会得到满分，但这是确保依赖它的所有脚本(以及您的站点)都能顺利运行所必需的。

如果您对第一次修复后得到的测试结果不满意，可以尝试使用另一个缓存或页面优化插件。您还可以考虑寻找开发人员以获得进一步的帮助。与所有插件一样，可能会发生冲突，因此您应该在添加新插件之前检查兼容性。如有冲突，请联系插件作者寻求指导。

我们将再看两个插件-AutOptimize和Async JavaScript。它们都是免费的，由同一作者设计，并且经常结合使用来优化网站和删除任何呈现阻塞资源。AutOptimize可以缩小脚本和样式表，聚合它们，内联JS和CSS。但是，异步Javascript仅对优化JS脚本有用。它使您可以直接控制哪些脚本被异步、延迟或排除。

安装插件后，导航到设置>；自动优化，然后单击JS、CSS&；HTML选项卡。只需选中默认的Optimize JavaScript Code，就可以显著改善呈现块JS和CSS代码的影响。并优化CSS代码？选择。此外，您还可以勾选Also Aggregate Inline JS？旁边的复选框。并且还聚合内联CSS？修复其他呈现块JS和CSS文件的选项。但是，除非您是WordPress高级用户，否则我们建议您坚持使用默认选项来优化JS和CSS代码。

安装插件后，导航到设置>；异步JavaScript，然后单击设置选项卡。勾选Enable Async JavaScript？(是否启用异步JavaScript？)旁边的复选框。选项，然后从快速设置部分选择应用异步或应用延迟选项。如果Apply Async选项导致您的网站出现问题，请尝试排除jQuery(单击jQuery部分中Exclude旁边的单选按钮)或简单地选择Apply Defer选项。使用此插件，您可以通过手动添加来选择要异步的脚本和要推迟的脚本。此外，此插件还提供了从异步/延迟进程中排除脚本的选项。无论是单个脚本还是包含在插件或主题中的脚本都是如此。虽然这个插件有它的用途，但它是面向高级WordPress用户的，所以它对开发人员来说是最好的。

呈现阻塞脚本和样式表可能会对站点的速度产生重大影响，因此学习如何处理它们非常重要。在本文中，我们了解了拥有呈现块JavaScript和CSS代码意味着什么，它是如何加载的，以及一些可以用来消除呈现加载资源的插件。我们选择的插件包括高级网站优化选项，可以帮助您缩短加载时间。因此，您的网站将准备好在搜索引擎排名上升。