什么是阻塞渲染的JavaScript和CSS？
阻塞渲染的JavaScript和CSS是阻止网站在加载这些文件之前显示网页的文件。每个WordPress网站都有一个主题和插件，它们会在你的网页前端添加JavaScript和CSS文件。这些脚本会增加你网站的页面加载时间，并且还会阻止页面的渲染。
Google PageSpeed Score是什么？
Google PageSpeed Insights是Google创建的一个网站速度测试工具，旨在帮助网站所有者优化和测试他们的网站。该工具根据Google的速度指南测试你的网站，并提供改进页面加载时间的建议。它会根据你的网站通过的审核数量显示一个得分。大多数网站得分在50-70之间。然而，一些网站所有者希望达到100分（这是页面可以获得的最高分数）。
你真的需要完美的”100″Google PageSpeed Score吗？
Google PageSpeed Insights工具的目的是向你提供提高网站速度和性能的指南。你不需要严格遵循这些规则。记住，速度只是帮助Google确定你网站排名的众多网站搜索引擎优化（SEO）指标之一。速度之所以重要，是因为它改善了你网站的用户体验。更好的用户体验不仅仅需要速度。你还需要提供有用的信息，更好的用户界面，以及包含文本、图片和视频的引人入胜的内容。你的目标应该是创建一个速度快并提供良好用户体验的网站。
我们建议你将Google PageSpeed规则作为建议。如果你可以在不破坏用户体验的情况下轻松实施它们，那就很好。否则，你应该尽可能多地做，然后不用担心剩下的事情。
既然如此，让我们来看看你可以做些什么来修复WordPress中的阻塞渲染的JavaScript和CSS。我们将介绍两种方法来消除WordPress中的阻塞渲染资源。你可以选择最适合你网站的方法：
- 方法1：使用WP Rocket修复阻塞渲染的脚本和CSS
- 方法2：使用Autoptimize修复阻塞渲染的脚本和CSS
方法1：使用WP Rocket修复阻塞渲染的脚本和CSS
在这种方法中，我们将使用WP Rocket插件。它是市场上最佳的WordPress缓存和优化插件，能让你在没有技术技能或复杂设置的情况下快速提高网站性能。
首先，你需要安装并激活WP Rocket插件。有关更多详细信息，请参阅我们关于如何安装WordPress插件的分步指南。
WP Rocket开箱即用，将根据你的网站开启最佳设置的缓存。你可以在我们关于如何正确安装和设置WP Rocket的完整指南中了解更多信息。
默认情况下，它不会开启JavaScript和CSS优化选项。这些优化可能会影响你的网站外观或某些功能，因此插件允许你选择性地启用这些设置。
为此，你需要访问设置»WP Rocket页面，然后切换到”文件优化”标签。
从这里，滚动到CSS文件部分，勾选”最小化CSS”、”合并CSS文件”和”优化CSS交付”旁边的复选框。
对于”优化CSS交付”设置，WP Rocket建议选择”删除未使用的CSS”方法。除了提供最佳性能外，它还可以帮助减少页面大小和HTTP请求。
注意：WP Rocket缓存插件将尝试最小化你所有的CSS文件，合并它们，并仅加载你网站可见部分所需的CSS。这样可能会影响你网站的外观，因此你需要在多个设备和屏幕尺寸上彻底测试你的网站。
接下来，你需要滚动到JavaScript文件部分。从这里，你可以勾选所有选项以获得最大性能提升。
你可以像处理CSS一样最小化和合并JavaScript文件。你还可以阻止WordPress加载jQuery Migrate文件。它是WordPress加载的一个脚本，用于为使用旧版jQuery的插件和主题提供兼容性。大多数网站不需要这个文件，但你仍然需要检查你的网站，以确保删除它不会影响你的主题或插件。
接下来，稍微向下滚动并勾选”加载JavaScript延期”和”jQuery安全模式”选项。这些选项会延迟加载非必要的JavaScripts，而jQuery安全模式允许你为可能在线内使用它的主题加载jQuery。如果你确信你的主题在任何地方都不使用内联jQuery，则可以取消选中此选项。
不要忘记点击”保存更改”按钮以保存你的设置。之后，你可能还需要在再次使用Google PageSpeed Insights测试你的网站之前清除WP Rocket的缓存。在我们的测试网站上，我们在桌面设备上达到了100%的得分，并且在移动和桌面得分中解决了阻塞渲染的问题。
方法2：使用Autoptimize修复阻塞渲染的脚本和CSS
在这种方法中，我们将使用一个专门用于改进网站CSS和JS文件交付的插件。虽然这个插件可以完成任务，但它没有WP Rocket的强大功能。
你首先需要安装并激活Autoptimize插件，这是一个免费的插件，可加快网站性能。有关更多详细信息，请参阅我们关于如何安装WordPress插件的分步指南。
激活后，你需要访问设置»Autoptimize页面以配置插件设置。首先，你需要在JavaScript选项块下勾选”优化JavaScript代码”旁边的复选框。确保取消选中”聚合JS文件”选项。
接下来，向下滚动到CSS选项框并勾选”优化CSS代码”选项。确保取消选中”聚合CSS文件”选项。
现在你可以点击”保存更改并清空缓存”按钮以保存你的设置。在我们的演示网站上，使用这些基本设置后，我们能够解决阻塞渲染的问题。
如果仍然存在阻塞渲染的脚本，则可以返回插件的设置页面并查看JavaScript和CSS选项下的设置。例如，你可以允许插件包含内联JS并删除默认排除的脚本，如seal.js或jquery.js。然后，点击”保存更改并清空缓存”按钮以保存更改并清空插件缓存。完成后，再次使用PageSpeed Insights工具检查你的网站。
Autoptimize如何工作？
Autoptimize会聚合所有排队的JavaScript和CSS。之后，它会创建最小化的CSS和JavaScript文件，并将缓存的副本异步或延迟提供给你的网站。这允许你修复阻塞渲染的脚本和样式问题。然而，请记住，这也可能影响你网站的性能或外观。
如果仍然存在阻塞渲染的JavaScript和CSS，该怎么办？
根据插件和你的WordPress主题如何使用JavaScript和CSS，完全修复所有阻塞渲染的JavaScript和CSS问题可能会很困难。虽然上述工具可以提供帮助，但你的插件可能需要以不同优先级加载某些脚本以正常运行。在这种情况下，上述解决方案可能会破坏这些插件的功能，或者它们可能会出现意外行为。
与其尝试完全消除阻塞渲染问题，我们建议采用替代方法来加快你的网站。例如，你可以使用CDN服务来提供静态JavaScript和CSS文件并减少加载时间。你可以阅读我们关于提升WordPress速度和性能的终极指南以获取更多信息。
我们希望本文能帮助你了解如何修复WordPress中的阻塞渲染的JavaScript和CSS。你可能还想查看我们关于WPressize Me如何通过6个技巧提高页面加载速度的文章，以及我们对最佳托管WordPress托管公司对比的文章。
