您是否正在尝试消除 wordpress 中阻碍渲染的 JavaScript 和 css？
如果您在 Google PageSpeed 见解上测试您的网站，那么您可能会看到消除渲染阻塞脚本和 css 的建议。但是，它没有提供有关如何在 wordpress 网站上执行此操作的任何详细信息。
在本文中，我们将向您展示如何轻松修复 WordPress 中的渲染阻塞 JavaScript 和 CSS，以提高您的 Google PageSpeed 分数。
什么是渲染阻塞 JavaScript 和 CSS？
渲染阻止 JavaScript 和 CSS 是阻止网站在加载这些文件之前显示网页的文件。
立即学习“Java免费学习笔记（深入）”；
每个 WordPress 网站都有一个主题和插件，可将JavaScript和CSS文件添加到网站的前端。
这些脚本可以增加站点的页面加载时间，并且还可以阻止页面的呈现。
WP Rocket 开箱即用，它将使用适合您网站的最佳设置打开缓存。您可以在我们关于如何在 WordPress 中正确安装和设置 WP Rocket 的完整指南中了解更多信息。
默认情况下，它不会打开 JavaScript 和CSS 优化选项。这些优化可能会影响您网站的外观或某些功能，这就是为什么该插件允许您选择启用这些设置。
为此，您需要访问“设置”» WP Rocket页面，然后切换到“文件优化”选项卡。
从这里，滚动到 CSS 文件部分，然后选中“缩小 CSS”、“组合 CSS 文件”和“优化 CSS 交付”旁边的框。
您可以像对 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 托管公司的比较。
