你想消除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 Score？
Google PageSpeed Insights是由Google创建的在线工具，用于帮助网站所有者优化和测试其网站。 这个工具根据Google的速度指南来测试您的网站，并提供改善网站页面加载时间的建议。
它会根据您的网站通过的规则数量向您显示分数。 大多数网站在50-70之间。 然而，一些网站所有者感到被迫达到100（一个页面可以得分最高）。
你真的需要完美的“100”谷歌PageSpeed分数？
Google PageSpeed见解的目的是为您提供指导，以提高网站的速度和性能。 您不必严格遵守这些规则。
请记住，速度只是许多SEO指标之一，可帮助Google确定如何对网站进行排名。 速度如此重要的原因是因为它改善了您网站上的用户体验。
更好的用户体验需要的不仅仅是速度。 您还需要提供有用的信息，更好的用户界面以及将内容与文本，图像和视频互动。
您的目标应该是创建一个快速的网站，提供良好的用户体验。
现场
我们建议您使用Google Pagespeed规则作为建议，如果您可以在不损坏用户体验的情况下轻松实施，那就太好了。 否则，你应该尽力去做，然后别担心。
话虽如此，让我们来看看你能做些什么来修复WordPress中的渲染阻塞JavaScript和CSS。
我们将介绍两个方法来修复在WordPress中阻止JavaScript和CSS的渲染。 您可以选择最适合您网站的网站。
1.使用Autoptimize修复渲染阻止脚本和CSS
这种方法比较简单，建议大多数用户使用。
首先你需要安装并激活Autoptimize插件。 更多细节
激活后，您需要访问 设置»自动优化 页面配置插件设置。
您可以先选中“JavaScript选项”和“CSS选项”旁边的复选框，然后单击“保存更改”按钮。
您现在可以使用PageSpeed工具测试您的网站。 如果还有渲染阻止脚本，则需要返回到插件的设置页面，然后单击顶部的“显示高级设置”按钮。
在这里，你可以允许插件包含内联JS，并删除默认排除的脚本，如seal.js或jquery.js。
接下来，向下滚动到CSS选项，并允许插件聚合内联CSS。
点击“保存更改并清空缓存”按钮，保存您的更改并清空插件缓存。
完成之后，请继续使用PageSpeed工具再次检查您的网站。
确保您彻底测试您的网站，通过优化JavaScript或CSS来确保没有任何问题。
它是如何工作的？
自动优化汇总所有入队的JavaScript和CSS。 之后，它会创建精简的CSS和JavaScript文件，并将缓存的副本作为异步或延期服务提供给您的网站。
这使您可以修复渲染阻止脚本和样式问题。 但是，请记住，它也可能会影响您的网站的性能或外观。
2.修复渲染使用W3 Total Cache阻塞JavaScript
这种方法需要更多的工作，并建议已经在他们的网站上使用W3 Total Cache插件的用户。
首先，您需要安装并激活W3 Total Cache插件。 如果你需要帮助
接下来，你需要访问 性能»常规设置 页面并向下滚动到“缩小”部分。
首先，您需要选中“缩小”选项旁边的“启用”，然后选择“手动”缩小模式选项。
点击保存所有设置按钮保存您的设置。
接下来，您需要添加要缩小的脚本和CSS。
您可以从Google PageSpeed Insights工具中获取呈现屏蔽的所有脚本和样式表的网址。
在下面的建议中，“在上面的内容中消除渲染阻塞的JavaScript和CSS”，点击“显示如何修复”。 它会显示脚本和样式表的列表。
将鼠标移到脚本上，它会显示完整的URL。 您可以选择此URL，然后使用键盘的CTRL + C（Mac上的Command + C）键复制该URL。
现在转到您的WordPress管理区，然后前往 性能»Minify 页。
首先，您需要添加要缩小的JavaScript文件。 向下滚动到JS部分，然后在“区域中的操作”下，将嵌入类型设置为“非阻塞异步”
部分。
接下来，您需要点击“添加脚本”按钮，然后开始添加从Google PageSpeed工具复制的脚本URL。
完成后，向下滚动到CSS部分，然后单击“添加样式表”按钮。 现在开始添加从Google PageSpeed工具复制的样式表网址。
现在点击“保存设置和清除缓存”按钮来存储您的设置。
访问Google PageSpeed工具并重新测试您的网站。
确保你也彻底地测试你的网站，看看一切工作正常。
故障排除
根据插件和WordPress主题如何使用JavaScript和CSS，完全修复所有渲染阻止JavaScript和CSS问题可能会非常具有挑战性。
虽然上述工具可以提供帮助，但是您的插件可能需要某些不同优先级的脚本才能正常工作。 在这种情况下，上面的解决方案可能会打破你的插件，或者他们可能会意外行事。
Google可能仍然会向您显示某些问题，例如优化CSS内容交付。 自动优化允许您通过手动添加内联CSS来修复该问题，以显示主题上面的折叠区域。
然而，找出在折叠内容之上需要显示的CSS代码可能相当困难。
就这样