如何从您的 WordPress 网站中消除渲染阻塞资源

您是否曾经创建过一个 WordPress 网站，喜欢它的一切，并在意识到它需要很长时间才能加载后立即开始讨厌它？ 掌握渲染阻塞资源的消除将有助于诊断此问题。 但是怎么办？

缓慢的加载速度不仅会给您和您的访问者带来麻烦，而且在 SEO 方面也会让您付出巨大的代价。 自 2010 年以来，谷歌算法在排名决策中考虑了加载速度，因此慢速页面在结果页面上的显示较低。

您可能熟悉导致页面性能不佳的常见罪魁祸首——内容过多、图像文件未压缩、托管不足以及缓存不足等等。 但还有另一个经常被忽视的肇事者在起作用：渲染阻塞资源。

不要误会我的意思——CSS 和 JavaScript 很棒。 如果没有 CSS，网站将成为纯文本墙。 如果没有 Ja=ooovaScript，我们将无法向我们的网站添加动态的、交互的、引人入胜的元素。 但是，如果在错误的时间执行，CSS 和 JavaScript 都会降低您网站的性能。

原因如下：当 Web 浏览器首次加载网页时，它会先解析页面的所有 HTML，然后再将其显示在屏幕上给访问者。 当浏览器遇到指向 CSS 文件、JavaScript 文件或内联脚本（即 HTML 文档本身中的 JavaScript 代码）的链接时，它会暂停 HTML 解析以获取并执行代码，这会减慢一切。

如果您已经优化了 WordPress 中的页面性能但仍然遇到问题，则渲染阻塞资源可能是罪魁祸首。 有时这段代码对于在第一次加载时运行很重要，但大多数时候它可以被删除或推送到队列的最后。

在这篇文章中，我们将向您展示如何从您的 WordPress 网站中消除这些讨厌的代码并提高您的性能。

如果您更愿意观看视频，请查看由 WP Casts 创建的演练：

1. 识别渲染阻塞资源。

在进行任何更改之前，您首先需要找到渲染阻塞资源。 最好的方法是使用免费的在线速度测试，例如 Google 的 PageSpeed Insights 工具。 粘贴您站点的 URL，然后单击分析。

扫描完成后，Google 会为您的网站分配一个综合速度分数，从 0（最慢）到 100（最快）。 50 到 80 之间的分数是平均分，因此您需要落在该范围的上半部分或以上。

要识别正在减慢页面速度的渲染阻止文件，请向下滚动到Opportunities ，然后打开Eliminate render-blocking resources手风琴。

图片来源

您会看到一个文件列表，这些文件会减慢页面的“首次绘制”速度——这些文件会影响初始页面加载时出现在浏览器窗口中的所有内容的加载时间。 这也称为“首屏”内容。

记下任何以扩展名 .css 和 .js 结尾的文件，因为这些是您要关注的文件。

2. 手动或使用插件消除渲染阻塞资源。

现在您已经确定了问题，有两种方法可以在 WordPress 中修复它：手动或使用插件。 我们将首先介绍插件解决方案。

几个 WordPress 插件可以减少渲染阻塞资源对 WordPress 网站的影响。 我将介绍两个流行的解决方案，Autoptimize 和 W3 Total Cache。

如何使用 Autoptimize 插件消除渲染阻塞资源

Autoptimize 是一个免费插件，可以修改您的网站文件以提供更快的页面。 自动优化通过聚合文件、缩小代码（即通过删除冗余或不必要的字符来减小文件大小）以及延迟渲染阻塞资源的加载来工作。

由于您正在修改站点的后端，请记住谨慎使用此插件或任何类似插件。 要使用 Autoptimize 消除渲染阻塞资源：

1.安装并激活 Autoptimize 插件。

2.从您的 WordPress 仪表板中，选择设置 > 自动优化。

3.在JavaScript 选项下，选中优化 JavaScript 代码旁边的框？ .

4.如果旁边的框聚合 JS 文件？ 已勾选，取消勾选。

5.在CSS 选项下，选中优化 CSS 代码旁边的复选框？ .

6.如果旁边的框聚合 CSS 文件？ 已勾选，取消勾选。

7.在页面底部，单击保存更改并清空缓存。

8.使用 PageSpeed Insights 扫描您的网站并检查是否有改进。

9.如果 PageSpeed Insights 仍然报告渲染阻塞 JavaScript 文件，返回到设置 > 自动优化并选中聚合 JS 文件旁边的框？ 和聚合 CSS 文件？ . 然后，单击保存更改并清空缓存并再次扫描。

如何使用 W3 Total Cache 插件消除渲染阻塞资源

W3 Total Cache 是一种广泛使用的缓存插件，可帮助解决滞后代码。 要使用 W3 Total Cache 消除渲染阻塞 JavaScript：

1.安装并激活 W3 Total Cache 插件。

2.一个新的性能选项将添加到您的 WordPress 仪表板菜单中。 选择性能 > 常规设置。

3.在Minify部分，选中Minify旁边的框，然后将Minify mode设置为Manual 。

4.单击缩小部分底部的保存所有设置。

5.在仪表板菜单中，选择性能 > 缩小。

6.在JS 缩小设置旁边的JS部分，确保选中启用框。 然后，在Operations in areas下，打开第一个Embed type下拉菜单并选择Non-blocking using “defer” 。

7.在JS 文件管理下，从主题下拉列表中选择您的活动主题。

8.回顾您之前扫描的 PageSpeed Insights 结果。 对于Eliminate render-blocking resources ending in .js 下的每个项目，单击Add a script 。 然后，从 PageSpeed Insights 复制 JavaScript 资源的完整 URL，并将其粘贴到文件 URI字段中。

9.粘贴 PageSpeed Insights 报告的所有渲染阻塞 JavaScript 资源后，单击JS部分底部的保存设置和清除缓存。

10.在CSS minify settings旁边的CSS部分，选中 CSS minify settings旁边的框，并确保Minify method设置为Combine & Minify 。

11.在CSS 文件管理下，从主题下拉列表中选择您的活动主题。

12.对于您的 PageSpeed Insights 扫描结果中消除以 .css 结尾的渲染阻止资源下的每个项目，单击添加样式表。 然后，从 PageSpeed Insights 复制 CSS 资源的完整 URL，并将其粘贴到文件 URI字段中。

13.粘贴 PageSpeed Insights 报告的所有渲染阻塞 CSS 资源后，单击CSS部分底部的保存设置和清除缓存。

14.使用 PageSpeed Insights 扫描您的网站并检查是否有改进。

如何手动消除渲染阻塞 JavaScript

插件可以为您处理后端工作。 话又说回来，插件本身只是添加到您的网络服务器的更多文件。 如果你想限制这些额外的文件，或者如果你只想自己处理编程，你可以手动解决渲染阻塞的 JavaScript。

为此，请在您的网站文件中找到<script>标记，以找到在您的 PageSpeed Insights 扫描中识别的资源。 它们看起来像这样：

 
<script src="https://blog.hubspot.com/marketing/resource.js">

<script>标签告诉浏览器加载并执行由src (source) 属性标识的脚本。 这个过程的问题是这个加载和执行会延迟浏览器对网页的解析，从而影响整体加载时间：

图片来源

要解决此问题，您可以将async （异步）或defer属性添加到渲染阻塞资源的脚本标记中。 async和defer是这样放置的：

 
<script src="https://blog.hubspot.com/marketing/resource.js" async>
 <script src="https://blog.hubspot.com/marketing/resource.js" defer>

虽然它们对加载时间有相似的影响，但这些属性告诉浏览器做不同的事情。

async属性向浏览器发出信号，让其在解析页面其余部分时加载 JavaScript 资源，并在加载后立即执行此脚本。 执行脚本会暂停 HTML 解析：

图片来源

具有defer属性的脚本在页面被解析时也会被加载，但是这些脚本会被延迟到第一次渲染之后或更重要的部分加载之后才加载：

图片来源

defer和async属性不应在同一资源上一起使用，但其中一个可能比另一个更适合特定资源。 通常，如果一个非必要的脚本依赖于在它之前运行的脚本，请使用defer 。 defer属性确保脚本将在前面必要的脚本之后运行。 否则，使用异步。

3. 重新运行站点扫描。

进行更改后，通过 PageSpeed Insights 对您的网站进行最后一次扫描，看看您的更改对您的分数有何影响。

希望有明显的改善，但如果没有，请不要担心。 许多因素会抑制页面性能，您可能需要进行更多挖掘才能找到性能不佳的根源。

4. 检查您的网站是否存在错误。

除了重新扫描之外，还要检查您的页面以确保您的网站正常运行。 页面是否正确加载？ 所有元素都出现了吗？ 如果出现问题或无法正确加载，请撤消更改并解决问题。

如果您已达到反复尝试各种措施而速度增益微乎其微的地步，最好考虑其他方法来加速您的网页，而不是冒险破坏您的网站。

优化您的 WordPress 网站以提高性能

许多因素都会影响用户在您网站上的体验，但没有什么比加载时间更重要的了。 每当您对 WordPress 网站的内容或外观进行重大更改时，您应该始终考虑此类更改如何影响性能。

现在您已经消除了渲染阻塞资源，您应该通过分析已知会降低性能的其他功能来继续优化您网站的速度。 尝试将定期速度测试纳入您的站点维护计划 - 提前发现任何潜在问题对您的成功至关重要。