有时在移动WordPress网站时，您可能需要保存和重用窗口…
您是否要消除WordPress中的阻止渲染的JavaScript和CSS？如果您在Google PageSpeed见解上测试您的网站，则可能会看到一条建议，以消除渲染阻止脚本和CSS。在本文中，我们将向您展示如何轻松地修复WordPress中的渲染阻止JavaScript和CSS来提高您的Google PageSpeed得分。
什么是阻止渲染的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.使用自动优化功能修复渲染阻止脚本和CSS
此方法更简单，建议大多数用户使用。
您需要做的第一件事是安装并激活Autoptimize插件。有关更多详细信息，请参阅有关如何安装WordPress插件的分步指南。
激活后，您需要访问设置»自动优化页面来配置插件设置。
您可以先选中JavaScript选项和CSS选项旁边的框，然后单击保存更改按钮。
您现在可以使用PageSpeed工具测试您的网站。如果仍然存在渲染阻止脚本，则需要返回到插件的设置页面，然后单击顶部的“显示高级设置”按钮。
在这里，您可以允许插件包含内联JS并删除默认情况下不包含的脚本，例如seal.js或jquery.js。
接下来，向下滚动到CSS选项，并允许插件聚合内联CSS。
单击“保存更改并清空缓存”按钮以保存您的更改并清空插件缓存。
完成后，请继续使用PageSpeed工具再次检查您的网站。
确保通过优化JavaScript或CSS彻底测试您的网站，以确保一切正常。
它是如何工作的？
Autoptimize会汇总所有排队的JavaScript和CSS。之后，它会创建缩小的CSS和JavaScript文件，并以异步或递延方式将缓存的副本提供给您的网站。
这使您可以修复渲染阻止脚本和样式问题。但是，请记住，它也会影响网站的性能或外观。
2.使用W3 Total Cache修复渲染阻止JavaScript
此方法需要更多工作，建议已在其网站上使用W3 Total Cache插件的用户使用。
首先，您需要安装并激活W3 Total Cache插件。如果您需要帮助，请参阅有关如何为初学者安装和设置W3 Total Cache的指南。
接下来，您需要访问性能»常规设置页面，然后向下滚动到缩小部分。
首先，您需要选中“缩小”选项旁边的“启用”，然后为“缩小模式”选项选择“手动”。
单击保存所有设置按钮以保存您的设置。
接下来，您需要添加要缩小的脚本和CSS。
您可以从Google PageSpeed Insights工具获取所有阻止渲染的脚本和样式表的URL。
在建议内容如下：“在首屏内容中消除渲染阻止的JavaScript和CSS”下，单击“显示如何修复”。它将显示脚本和样式表的列表。
将鼠标移到脚本上，它将显示完整的URL。您可以选择此URL，然后使用键盘的CTRL + C（在Mac上为Command + C）键来复制URL。
现在转到您的WordPress管理区域，然后转到性能»缩小页面。
首先，您需要添加要缩小的JavaScript文件。向下滚动到JS部分，然后在<head>部分的“区域操作”下，将嵌入类型设置为“非阻止异步”。
接下来，您需要单击“添加脚本”按钮，然后开始添加从Google PageSpeed工具复制的脚本URL。
完成后，向下滚动到CSS部分，然后单击“添加样式表”按钮。现在开始添加从Google PageSpeed工具复制的样式表URL。
现在，单击“保存设置并清除缓存”按钮以存储您的设置。
访问Google PageSpeed工具，然后再次测试您的网站。
确保您还彻底测试了您的网站，以确保一切正常。
故障排除
根据插件和WordPress主题使用JavaScript和CSS的方式而定，要完全解决所有阻止JavaScript和CSS的渲染问题可能会非常困难。
尽管上述工具可以提供帮助，但您的插件可能需要某些优先级不同的脚本才能正常工作。在这种情况下，上述解决方案可能会破坏您的插件，或者它们的行为可能会异常。
Google可能仍会向您显示某些问题，例如针对首屏内容优化CSS交付。Autoptimize使您可以通过手动添加显示主题的上述折叠区域所需的内联CSS来解决此问题。
但是，要找出需要显示在折叠内容上方的CSS代码可能非常困难。
相关内容
