目录
使用 PageSpeed Insights 测试 WordPress 网站的性能时，通常会遇到最常见的建议之一：消除渲染阻塞资源。
您将发现，渲染阻塞资源（JS 和 CSS 文件）可能会极大地影响您网站的性能。实际上，您的 WordPress 网站加载速度会变慢。渲染阻塞资源将影响关键指标，例如最大内容绘制（LCP）和首次输入延迟（FID），两个 Web 核心指标。
在本文中，您将了解什么是渲染阻止资源、它们对您的 WordPress 网站的影响以及如何识别和删除它们。
什么是渲染阻塞资源？
渲染阻塞资源可以是 CSS 和 JavaScript 文件。它们被称为渲染阻塞资源，因为它们会减慢页面的渲染速度。同时，它们对于加载页面并不重要。
简而言之：立即需要使用该资源将决定该资源是否是渲染阻塞的。跟踪代码（例如 Google Analytics 代码和 Facebook 像素）是渲染阻塞资源。
让我们通过一个示例来用简单的英语解释渲染阻塞资源的影响。
当您加载页面时，浏览器会分析（或解析）页面的 HTML — 这是渲染页面并向您显示首屏显示的内容的必需步骤。
如果浏览器遇到CSS和JS文件，它也必须下载并解析它们。因此，页面加载时间会更长。
如果不解析这些资源（显示页面内容不需要这些资源），浏览器将更快地呈现主要内容的页面。用户将享受更好的用户体验，性能指标也会很好。
简而言之，CSS 和 JS 渲染阻塞资源无缘无故地延迟了页面的渲染。
为什么应该消除 WordPress 上的 JS 和 CSS 渲染阻塞资源
正如我们所解释的，您应该摆脱渲染阻塞资源的总体原因是您的 WordPress 网站的性能会受到影响。
其一，一些关键的性能指标将会变得更糟。因此，您的 Google PageSpeed Insights 性能得分也不会很好。原因如下。
PageSpeed Insights 分数基于 Lighthouse 及其六个指标。三个指标受到渲染阻塞资源的影响：
从涉及的每个指标的权重中，您可以轻松看出如果您想获得 90 以上的 PageSpeed 分数，删除渲染阻塞资源有多么重要。
不要忘记加载时间本身也会受到影响。这不仅涉及 PSI 分数以及核心 Web Vitals 和 SEO 性能。总的来说，它是为了提供出色的用户体验。
| 🚀 想了解更多有关 Lighthouse 绩效审计的信息吗？阅读我们的文章并了解如何提高您的 Lighthouse 性能分数！ |
如何查找渲染阻塞资源
查找渲染阻塞资源的最简单方法是分析 PageSpeed Insights 报告。除了“消除渲染阻塞资源”的建议之外，您还会找到应该处理的文件列表。您可以看到下面的示例：
正如您从这个示例中看到的，通常具有 CSS 和 JS 渲染阻塞资源，例如绘制首屏元素所需的跟踪器和样式表。
识别渲染阻塞资源的更高级方法是利用 Chrome DevTools 中的“覆盖范围”选项卡。您可以阅读专门的文章。请注意，此页面涉及未使用的 JS 和 CSS 文件，这是命名所有资源的另一种方式，这些资源由于某种原因不需要渲染页面。
如何修复 WordPress 上的“消除渲染阻塞资源”
识别出渲染阻塞资源后，您就可以修复 PageSpeed Insights 建议并消除 WordPress 网站所需的 CSS 和 JS 文件。
主要有两种方法：
- 延迟选项：CSS 和 JS 文件仅在浏览器解析 HTML 代码时下载。浏览器只有在 HTML 解析完成后才会解析它们。
请注意，浏览器将按照文件在代码中出现的确切顺序执行文件。 - 异步选项：同样，CSS 和 JS 文件只会在浏览器解析 HTML 代码时下载。这次，浏览器只有在下载完所有资源后才会开始解析它们。这意味着 HTML 解析可能仍在继续。
与 defer 选项不同，文件不一定按照它们在代码中出现的顺序执行。
总的来说，延迟和异步选项实现了相同的目标，尽管它们的执行方式略有不同。
要记住的最重要的方面是，在解析依赖于尚未执行的先前文件的文件时，异步选项可能会导致问题。这就是您的网站可能被破坏的原因。
当您拥有相互依赖的文件时，“延迟”选项是最安全的选择。在任何其他情况下，您都可以使用异步选项作为替代方案。
如何消除渲染阻塞 CSS
如果您想手动消除 CSS 渲染阻塞文件，您应该遵循以下步骤：
如果您不想使用关键路径 CSS，或者它给您带来一些问题，例如 FOUC（无样式内容的闪存），您还有另一个选择。
您可以通过向每个样式表添加媒体查询来拆分 CSS 文件，如此Google 资源中所述。推荐这样做是因为当媒体查询添加到 CSS 文件中时，必须解析并完全下载整个文件才能从那里选择所需的内容。结果，性能变得更差。
如何消除渲染阻塞 JavaScript
正如您所阅读的，您可以使用 async 和 defer 选项来处理 JS 渲染阻塞资源。
识别这些 JavaScript 文件后，您可以在代码中包含 async 或 defer 属性：
以下是 defer 属性的示例：
<script defer src="/example-js-script"></script>这是 async 属性的示例：
<script async src="/example-js-script"></script>选择要实现的属性时，请记住我们在上一节中分享的建议。
发表回复