如何消除 WordPress 上的渲染阻塞资源（CSS + Javascript）

如果您是 WordPress 用户，我强烈建议您优先考虑网站性能。 通过向访问者提供快速加载页面，您将提高搜索引擎排名、增加网站流量并为读者提供出色的用户体验。

优化网站的一个关键部分是使用性能基准测试工具分析网页，例如 Google PageSpeed Insights、GTmetrix 和 Pingdom 网站速度测试。 这些服务将评估 URL 的性能，确认页面的大小并确认页面加载所需的时间。

性能基准测试工具不仅可以分析您的网页，还可以显示需要解决哪些问题才能缩短页面加载时间。 例如，可能会建议您删除未使用的 CSS 代码或减少网站上图像的重量。

您会经常看到的一项建议是消除 WordPress 中的渲染阻塞资源。 在本文中，我将解释 WordPress 中的渲染阻止资源是什么，并展示如何通过删除它们来改善网站的页面加载时间。

什么是 WordPress 中的渲染阻止资源？

网站优化就是在尽可能快的时间内将您的网站页面提供给访问者。 一个典型的页面包含许多不同的元素。

当有人访问您网站上的某个页面时，他们的浏览器会从上到下处理该页面的代码。 这通常称为“渲染页面”。

如果浏览器遇到对外部 CSS 或 Javascript 文件的调用，它需要停止渲染页面并下载这些 CSS 和 Javascript 文件才能进行处理。 因此，这些资源被视为“渲染阻塞”，因为它们正在停止页面渲染过程。

渲染阻止资源增加了浏览器向用户显示主要内容的时间，这是 Google 称之为 First Meaningful Paint (FMP) 的重要性能和搜索引擎排名指标。

请注意，文本和图像不会阻塞渲染，也不是所有的 CSS 和 Javascript 文件都阻塞渲染。 较大的 CSS 和 Javascript 文件往往会减慢页面渲染速度。

如何识别 WordPress 上的渲染阻塞资源

使用性能基准测试工具可以轻松识别 WordPress 上的渲染阻止资源。 您所要做的就是输入您要测试的页面的 URL。

Google PageSpeed Insights 会突出显示阻止渲染的资源添加到页面的第一次绘制的总时间。 在下方，您将看到一个细分，其中显示了每个渲染阻止资源的 URL 和文件的大小。 它还显示了如果消除了渲染阻塞资源，您的页面可以加载多快。

GTmetrix 还列出了每个渲染阻塞资源、文件大小和下载文件所需的时间。

尽管 Pingdom 网站速度测试没有突出显示渲染阻止资源的特定部分，但您可以从“文件请求”区域查看导致页面速度变慢的原因。

它将突出显示阻止渲染的资源，例如图标、字体和 Javascript 文件。 显示每个资源的文件 URL、文件大小和下载时间。 文件请求区域对于查看哪些图像正在增加页面加载时间也很有用。

由于 WordPress 在您的网站上调用不同的 CSS 和 Javascript 文件，因此对多个页面运行性能测试非常重要，以便检测到所有渲染阻止资源。 例如，您可以对网站的关键区域进行性能测试，例如主页、博客索引、博客文章、关于页面和联系页面。

识别关键资源

如果需要显示网页的第一次绘制，则该资源被视为关键资源。 所有其他资源都被视为非关键资源。

识别关键资源的最简单方法之一是使用 Chrome DevTools 中的 Coverage 选项卡。 它准确地突出显示正确显示初始页面加载所需的文件百分比。 关键样式显示为绿色，而非关键样式显示为红色。

在下面的屏幕截图中，您可以看到在 WordPress.org 上，大部分阻止渲染的 CSS 和 Javascript 文件中的代码没有被使用。 这种情况在许多 WordPress 网站上更为严重，覆盖测试突出显示了每个文件 100% 未使用的几个文件。

使用内联调用消除 WordPress 中的渲染阻塞 CSS

Google 建议将所有关键代码从阻止渲染的资源转移到 HTML 页面的内联调用中。 可以使用页面头部中的样式块定义对页面第一次绘制至关重要的样式，而可以使用脚本标记在页面内内联调用关键的 Javascript 函数。

在 WordPress 等动态平台上，通过主题和插件将 CSS 和 Javascript 代码添加到网站中，手动移动关键样式可能是不切实际的。 因此，许多 WordPress 用户使用 NitroPack 和 Critical CSS 等服务，以便自动提取关键样式表并在头部内联显示。

如果网站样式位于小 CSS 文件中，您可以使用性能 WordPress 插件 Asset Cleanup 从小样式表中自动内联样式。

使用异步和延迟删除 WordPress 中的渲染阻止 Javascript

可以使用称为 Async 和 Defer 的两种技术消除 WordPress 中的渲染阻塞 Javascript 资源。 这两种方法都允许浏览器继续渲染页面，同时在后台下载 wordpress 中首屏内容中的渲染阻止 CSS 和 Javascript 文件。

在页面上使用 Async 或 Defer 可能更可取，因此测试两者并查看哪种技术提供最佳结果非常重要。 但是，无论您使用哪种方法，您都会看到页面加载时间的减少。

使用 WordPress 性能插件可以在整个网站上应用异步和延迟。

在我的个人博客上，我使用插件 Async JavaScript 来延迟页面上的 Javascript。 Async Javascript 由 Autoptimize 创建者 Frank Goossens 开发，可让您将 Async 和 Defer 应用于非关键 Javascript 文件，并为您提供将不同设置应用于 JQuery 文件的选项。

该插件的设置向导将在 GTmetrix 上运行多个测试，以确定您网站的最佳设置。

我选择了 Async JavaScript，因为它会在我的整个网站中自动应用 Async 或 Defer。 这无疑是在 WordPress 中消除渲染阻塞资源的最简单方法，但您可能会使用 WordPress 插件 HTTP/2 Push Preload 看到更好的结果。

一旦您使用 Chrome 的覆盖工具或性能基准测试服务（如 GTmetrix 或 Google PageSpeed Insights）确定了 WordPress 网站上的渲染阻止资源，您就可以使用 HTTP/2 Push Preload 逐个文件地应用异步和延迟。

如果您愿意为每个文件测试 Async 和 Defer 的性能，您将能够为每个资源找到最佳技术。 这可以大大减少页面加载时间。

无论您使用哪个 WordPress 插件来应用 Async 和 Defer，请务必在事后检查您的网站设计，以确保没有任何损坏。

有关此主题的更全面概述，请阅读我的文章“如何使用 Defer 和 Async 在 WordPress 中延迟 Javascript 的解析”。

最后的想法

WordPress 中的渲染阻止资源大大增加了页面加载时间。 它们还会影响您网站的用户体验，因为在下载并执行所有阻止渲染的资源之前，访问者会看到一个空白页面。

Chrome 的覆盖工具和服务（例如 Google PageSpeed Insights 和 GTmetrix）可以轻松识别渲染阻止资源。 然后，您可以使用 WordPress 插件（例如 Async JavaScript 和 HTTP/2 Push Preload）消除渲染阻塞资源。

谢谢阅读。

凯文