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

您想在 WordPress 中消除阻止渲染的 JavaScript 和 CSS 吗?

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

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

How to fix render blocking JavaScript and CSS in WordPress

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

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

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

Render blocking issue highlighted in Google Pagespeed Insights

在加载页面上的其余 HTML 之前,用户的浏览器必须加载这些脚本和 CSS.这意味着连接速度较慢的用户将不得不等待几毫秒才能看到页面.

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

想要获得 100 分的 Google PageSpeed 分数的网站所有者需要解决此问题才能获得完美的分数.

什么是 Google PageSpeed 得分?

Google PageSpeed Insights 是由 Google 创建的网站速度测试工具,用于帮助网站所有者优化和测试他们的网站.此工具根据 Google 的速度指南测试您的网站,并提供建议以改善您网站的页面加载时间.

它会根据您的网站通过的规则数量向您显示分数.大多数网站都在 50-70 之间.但是,一些网站所有者觉得必须达到 100(页面可以得分的最高值).

您真的需要完美的"100"Google PageSpeed 得分吗?

Google PageSpeed Insights 的目的是为您提供提高网站速度和性能的指南.您无需严格遵守这些规则.

请记住,速度只是帮助 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 Files 部分并选中 Minify CSS、Combine CSS Files 和 Optimize CSS Delivery 选项旁边的框.

CSS Optimization settings in WP Rocket

注意: WP Rocket 将尝试缩小您的所有 CSS 文件,将它们组合起来,并且只加载您网站可见部分所需的 CSS.这可能会影响您网站的外观,因此您需要在多种设备和屏幕尺寸上彻底测试您的网站.

接下来,您需要滚动到 JavaScript 文件部分.从这里,您可以检查所有选项以最大限度地提高性能.

JavaScript optimization

您可以像处理 CSS 一样缩小和合并 JavaScript 文件.

您还可以阻止 WordPress 加载 jQuery Migrate 文件.它是 WordPress 加载的一个脚本,用于为使用旧版本 jQuery 的插件和主题提供兼容性.

大多数网站不需要此文件,但您仍需要检查您的网站以确保删除它不会影响您的主题或插件.

接下来,进一步向下滚动并选中"延迟加载 JavaScript"和"jQuery 安全模式"选项旁边的框.

Optimize JavaScript delivery

这些选项会延迟加载非必要的 JavaScript,而 jQuery 安全模式允许您为可能使用内联的主题加载 jQuery.如果您确定您的主题没有在任何地方使用内联 jQuery,您可以不选中此选项.

不要忘记单击"保存更改"按钮来存储您的设置.

之后,您可能还想在使用 Google Page Speed Insights 再次测试您的网站之前清除 WP Rocket 中的缓存.

在我们的测试站点上,我们能够在桌面上获得 100% 的分数,并且在移动和桌面分数中都解决了渲染阻塞问题.

Fixed render-blocking issue to achieve perfect page speed score

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

对于这种方法,我们将使用一个单独的插件,专门用于改进您网站的 CSS 和 JS 文件的交付.虽然这个插件完成了工作,但它没有 WP Rocket 具有的其他强大功能.

您需要做的第一件事是安装并激活自动优化插件.有关更多详细信息,请参阅有关如何安装 WordPress 插件的分步指南.

激活后,您需要访问设置»自动优化页面以配置插件设置.

首先,您需要选中 JavaScript 选项块下"优化 JavaScript 代码"选项旁边的框.确保未选中"聚合 JS 文件"选项.

Optimize JS files in Autoptimize

接下来,向下滚动到 CSS 选项框并选中"优化 CSS 代码"选项.确保未选中"聚合 CSS 文件"选项.

Optimize CSS in Autoptimize

您现在可以单击"保存更改并清空缓存"按钮来存储您的设置.

继续使用 Page Speed Insights 工具测试您的网站.在我们的演示站点上,我们能够使用这些基本设置修复渲染阻塞问题.

Fixed render blocking issue in WordPress with Autoptimize plugin

如果仍然存在阻止渲染的脚本,那么您需要返回插件的设置页面并查看 JavaScript 和 CSS 选项下的选项.

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

单击"保存更改并清空缓存"按钮以保存更改并清空插件缓存.

完成后,继续使用 Page Speed 工具再次检查您的网站.

它是如何工作的?

Autoptimize 聚合所有入队的 JavaScript 和 CSS.之后,它会创建缩小的 CSS 和 JavaScripts 文件,并将缓存副本以异步或延迟方式提供给您的网站.

这允许您修复渲染阻止脚本和样式问题.但是,请记住,它也会影响您网站的性能或外观.

问题排查

根据插件和您的 WordPress 主题使用 JavaScript 和 CSS 的方式,完全修复所有阻止渲染的 JavaScript 和 CSS 问题可能非常具有挑战性.

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

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

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

我们希望本文能帮助您了解如何在 WordPress 中修复阻止渲染的 JavaScript 和 CSS.您可能还想查看我们关于如何为初学者提高 WordPress 性能的终极指南,以及我们对最佳管理 WordPress 托管公司的比较.

3

发表回复