您是否正在尝试消除 WordPress 中阻碍渲染的 JavaScript 和 CSS？
如果您在 Google PageSpeed 见解上测试您的网站，那么您可能会看到消除渲染阻塞脚本和 CSS 的建议。但是，它没有提供有关如何在 WordPress 网站上执行此操作的任何详细信息。
在本文中，我们将向您展示如何轻松修复 WordPress 中的渲染阻塞 JavaScript 和 CSS，以提高您的 Google PageSpeed 分数。
什么是渲染阻塞 JavaScript 和 CSS？
渲染阻止 JavaScript 和 CSS 是阻止网站在加载这些文件之前显示网页的文件。
每个 WordPress 网站都有一个主题和插件，可将JavaScript和CSS文件添加到网站的前端。
这些脚本可以增加站点的页面加载时间，并且还可以阻止页面的呈现。
用户的浏览器必须先加载这些脚本和 CSS，然后才能加载页面上的其余 HTML。这意味着连接速度较慢的用户将不得不再等待几毫秒才能看到该页面。
这些脚本和样式表称为渲染阻塞 JavaScript 和 CSS。
想要获得 100 分的 Google PageSpeed 分数的WordPress 网站所有者需要解决此问题才能获得完美分数。
什么是 Google PageSpeed 分数？
Google PageSpeed Insights是Google 创建的网站速度测试工具，旨在帮助网站所有者优化和测试其网站。该工具根据 Google 的速度准则测试您的网站，并提供改进页面加载时间的建议。
它根据您的网站通过的审核数量向您显示分数。大多数网站的排名在 50-70 之间。然而，一些网站所有者觉得有必要达到 100 分（页面可以得分的最高分数）。
您真的需要完美的“100”Google PageSpeed 分数吗？
Google PageSpeed 见解的目的是为您提供提高网站速度和性能的指南。您无需严格遵守这些规则。
请记住，速度只是帮助 Google 确定如何对您的网站进行排名的众多网站搜索引擎优化 (SEO)指标之一。速度非常重要，因为它可以改善网站上的用户体验。
更好的用户体验需要的不仅仅是速度。您还需要提供有用的信息、更好的用户界面以及包含文本、图像和视频的引人入胜的内容。
您的目标应该是创建一个快速的网站，提供出色的用户体验。
我们建议您使用 Google PageSpeed 规则作为建议。如果您可以轻松实现它们而不破坏用户体验，那就太好了。否则，你应该尽力做你能做的，然后不用担心其余的。
话虽如此，让我们看看如何修复 WordPress 中渲染阻塞的 JavaScript 和 CSS。
我们将介绍两种消除 WordPress 中渲染阻塞资源的方法。您可以选择最适合您网站的一种：
方法 1：使用 WP Rocket 修复渲染阻塞脚本和 CSS
对于此方法，我们将使用WP Rocket插件。它是市场上最好的 WordPress 缓存和优化插件，使您无需任何技术技能或复杂的设置即可快速提高网站性能。
首先，您需要安装并激活WP Rocket插件。有关更多详细信息，请参阅我们有关如何安装 WordPress 插件的分步指南。
WP Rocket 开箱即用，它将使用适合您网站的最佳设置打开缓存。您可以在我们关于如何在 WordPress 中正确安装和设置 WP Rocket 的完整指南中了解更多信息。
默认情况下，它不会打开 JavaScript 和CSS 优化选项。这些优化可能会影响您网站的外观或某些功能，这就是为什么该插件允许您选择启用这些设置。
为此，您需要访问“设置”» WP Rocket页面，然后切换到“文件优化”选项卡。
从这里，滚动到 CSS 文件部分，然后选中“缩小 CSS”、“组合 CSS 文件”和“优化 CSS 交付”旁边的框。
注意： WP Rocket 缓存插件将尝试缩小所有 CSS 文件，合并它们，并仅加载网站可见部分所需的 CSS。这可能会影响您网站的外观，因此您需要在多种设备和屏幕尺寸上彻底测试您的网站。
接下来，您需要滚动到 JavaScript 文件部分。从这里，您可以检查所有选项以最大程度地提高性能。
您可以像对 CSS 那样缩小和组合 JavaScript 文件。
您还可以阻止 WordPress 加载jQuery Migrate 文件。这是 WordPress 加载的一个脚本，为使用旧版本 jQuery 的插件和主题提供兼容性。
大多数网站不需要此文件，但您仍然需要检查您的网站，以确保删除它不会影响您的主题或插件。
接下来，进一步向下滚动并选中“加载 JavaScript 延迟”和“jQuery 安全模式”选项旁边的框。
这些选项会延迟加载非必需的 JavaScript，并且 jQuery 安全模式允许您为可能内联使用它的主题加载 jQuery。如果您确定您的主题不在任何地方使用内联 jQuery，则可以不选中此选项。
不要忘记单击“保存更改”按钮来存储您的设置。
之后，您可能还需要清除 WP Rocket 中的缓存，然后再使用 Google PageSpeed Insights 再次测试您的网站。
在我们的测试网站上，我们能够在桌面设备上获得 100% 的分数，并且在移动和桌面分数上都解决了渲染阻塞问题。
方法 2：使用 Autoptimize 修复渲染阻塞脚本和 CSS
对于这种方法，我们将使用专门为改进网站 CSS 和 JS 文件的交付而制作的单独插件。虽然这个插件可以完成工作，但它没有 WP Rocket 所具有的其他强大功能。
您需要做的第一件事是安装并激活Autoptimize，这是一个免费的插件，可以提高网站性能。有关更多详细信息，请参阅我们有关如何安装 WordPress 插件的分步指南。
激活后，您需要访问设置»自动优化页面来配置插件设置。
首先，您需要选中 JavaScript 选项块下“优化 JavaScript 代码”旁边的框。确保未选中“聚合 JS 文件”选项。
接下来，向下滚动到“CSS 选项”框并选中“优化 CSS 代码”选项。
确保未选中“聚合 CSS 文件”选项。
您现在可以单击“保存更改并清空缓存”按钮来存储您的设置。
继续使用 PageSpeed Insights 工具测试您的网站。在我们的演示网站上，我们能够使用这些基本设置修复渲染阻塞问题。
如果仍然存在渲染阻塞脚本，那么您需要返回插件的设置页面并检查 JavaScript 和 CSS 选项下的设置。
例如，您可以允许插件包含内联 JS 并删除默认排除的脚本，例如 seal.js 或 jquery.js。然后，只需单击“保存更改并清空缓存”按钮即可保存更改并清空插件缓存。
完成后，继续使用 PageSpeed Insights 工具再次检查您的网站。
自动优化如何工作？
Autoptimize 聚合所有排队的 JavaScript 和 CSS。之后，它会创建缩小的 CSS 和 JavaScript文件，并以异步或延迟方式将缓存副本提供给您的网站。
这允许您修复渲染阻塞脚本和样式问题。但是，请记住，它也会影响您网站的性能或外观。
渲染阻塞 JavaScript 和 CSS 故障排除
根据插件和 WordPress 主题如何使用 JavaScript 和 CSS，可能很难完全解决所有阻塞渲染的 JavaScript 和 CSS 问题。
虽然上述工具可以提供帮助，但您的插件可能需要不同优先级的某些脚本才能正常工作。在这种情况下，上述解决方案可能会破坏此类插件的功能，或者它们可能会出现意外行为。
Google 可能仍会向您显示某些问题，例如优化首屏内容的 CSS 交付。WP Rocket允许您通过手动添加显示主题的上述折叠区域所需的关键 CSS 来解决此问题。
然而，找出显示首屏内容所需的 CSS 代码可能相当困难。
最后，除了使用我们提到的工具之外，我们还建议删除所有未使用的 CSS。这是在您的网站上加载的 CSS 代码，但加载页面实际上并不需要。这可能会因加载不必要的额外代码而导致渲染阻塞问题。
要删除未使用的 CSS，请参阅我们有关如何删除 WordPress 中未使用的 CSS 的指南。
我们希望本文能帮助您了解如何修复 WordPress 中渲染阻塞的 JavaScript 和 CSS。您可能还想查看我们关于如何为初学者提高 WordPress 性能的终极指南以及我们对管理最佳的 WordPress 托管公司的比较。
