如何在WordPress中修复阻止渲染的JavaScript和CSS

您是否要消除WordPress中的阻止渲染的JavaScript和CSS？

如果您在Google PageSpeed见解上测试您的网站，那么您可能会看到一条建议，以消除渲染阻止脚本和CSS。但是，它没有提供有关如何在WordPress网站上执行此操作的任何详细信息。

在本文中，我们将向您展示如何轻松地在WordPress中修复阻止渲染的JavaScript和CSS，以提高您的Google PageSpeed得分。

什么是阻止渲染的JavaScript和CSS？

阻止渲染的JavaScript和CSS是阻止网站在加载这些文件之前显示网页的文件。

每个WordPress网站都有一个主题和插件，可将JavaScript和CSS文件添加到您的网站的前端。这些脚本可能会增加您网站的页面加载时间，并且还可能阻止页面的呈现。

用户的浏览器必须先加载这些脚本和CSS，然后才能加载页面上的其余HTML。这意味着连接速度较慢的用户将不得不再等待几毫秒才能看到该页面。

这些脚本和样式表称为渲染阻止JavaScript和CSS。

试图达到Google PageSpeed得分100的网站所有者，需要解决此问题才能获得完美的得分。

什么是Google PageSpeed得分？

Google PageSpeed Insights是由Google创建的网站速度测试工具，可帮助网站所有者优化和测试其网站。该工具会根据Google的速度准则对您的网站进行测试，并提供一些建议来缩短网站的页面加载时间。

它根据站点通过的规则数量向您显示得分。大多数网站在50-70之间。但是，有些网站所有者感到被迫达到100（页面可以得分最高）。

您真的需要完美的Google PageSpeed得分“ 100”吗？

Google PageSpeed洞察力的目的是为您提供指导，以提高网站的速度和性能。您无需严格遵守这些规则。

请记住，速度只是帮助Google确定如何对网站排名的众多网站SEO指标之一。速度之所以如此重要，是因为它改善了您网站上的用户体验。

更好的用户体验需要的不仅仅是速度。您还需要提供有用的信息，更好的用户界面，以及包含文本，图像和视频的内容。

您的目标应该是创建一个提供出色用户体验的快速网站。

在上一次WPBeginner重新设计期间，我们一直专注于速度以及改善用户体验。

我们建议您使用Google Pagespeed规则作为建议，如果可以在不破坏用户体验的情况下轻松实现它们，那就太好了。否则，您应该尽力而为，然后不要担心其余的事情。

话虽如此，让我们看一下如何在WordPress中修复渲染阻止JavaScript和CSS。

我们将介绍两种方法来修复WordPress中阻止渲染的JavaScript和CSS。您可以选择最适合您的网站的一种。

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。如果确定您的主题在任何地方都没有使用内联jQuery，则可以不选中此选项。

不要忘记单击“保存更改”按钮来存储您的设置。

之后，您可能还想清除WP Rocket中的缓存，然后再使用Google Page Speed Insights测试您的网站。

在我们的测试站点上，我们能够在桌面上获得100％的分数，并且在移动和桌面上的分数方面，渲染阻止问题都得到了解决。

2.使用自动优化功能修复渲染阻止脚本和CSS

对于这种方法，我们将使用一个单独的插件，专门用于改善您网站的CSS和JS文件的传递。尽管此插件可以完成工作，但它没有WP Rocket拥有的其他强大功能。

您需要做的第一件事是安装并激活Autoptimize插件。有关更多详细信息，请参阅有关如何安装WordPress插件的分步指南。

激活后，您需要访问设置»自动优化页面来配置插件设置。

首先，您需要选中“ JavaScript选项”块下“优化JavaScript代码”选项旁边的框。确保未选中“聚合JS文件”选项。

接下来，向下滚动到“ CSS选项”框，然后选中“优化CSS代码”选项。确保未选中“聚合CSS文件”选项。

现在，您可以单击“保存更改并清空缓存”按钮来存储您的设置。

继续并使用Page Speed Insights工具测试您的网站。在我们的演示站点上，我们能够使用这些基本设置解决渲染阻止问题。

如果仍然存在渲染阻止脚本，则需要返回到插件的设置页面，并检查JavaScript和CSS选项下的选项。

例如，您可以允许插件包含内联JS并删除默认情况下不包含的脚本，例如seal.js或jquery.js。

单击“保存更改并清空缓存”按钮以保存您的更改并清空插件缓存。

完成后，请继续并使用Page Speed工具再次检查您的网站。

它是如何工作的？

Autoptimize会汇总所有排队的JavaScript和CSS。之后，它会创建缩小的CSS和JavaScript文件，并以异步或递延方式将缓存的副本提供给您的网站。

这使您可以修复渲染阻止脚本和样式问题。但是，请记住，它也会影响网站的性能或外观。

故障排除

根据插件和WordPress主题使用JavaScript和CSS的方式而定，完全解决所有阻止渲染的JavaScript和CSS问题可能会非常困难。

尽管上述工具可以提供帮助，但您的插件可能需要某些优先级不同的脚本才能正常工作。在这种情况下，上述解决方案可能会破坏此类插件的功能，或者它们的行为可能会异常。

Google可能仍会向您显示某些问题，例如针对首屏内容优化CSS交付。WP Rocket允许您通过手动添加显示主题的上述折叠区域所需的关键CSS来解决此问题。

但是，要找出需要显示在折叠内容上方的CSS代码可能非常困难。