WordPress 中的 Render-Blocking JavaScript 和 CSS：修复它的 5 个插件

不久前，谷歌宣布加载时间超过 XNUMX 秒的网站对 SEO 不友好。

在这个互联网和数字营销的时代，如果您想有效地与全球成千上万的竞争对手竞争，您需要拥有最快的网站。 毫无疑问，速度更快的网站更有可能吸引访问者并增加他们对内容的参与度。

运行 WordPress 网站意味着同时运行大量脚本以使您的网站可访问。

但是，并非所有这些项目都是加载所必需的。 如果您曾经检查过您网站的性能 谷歌的见解PageSpeed，您可能已经遇到过影响其速度的阻止渲染的 JavaScript 和 CSS 选项。

今天我们将讨论这些无关文件，并启发您了解如何删除它们以改进您的网站。

 

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

总之，阻止渲染的 JavaScript 和 CSS 是一系列样式表和脚本，这些样式表和脚本必须在站点加载并变得可见之前完全运行。

您在 WordPress 网站上安装的主题和插件会将大量这些文件添加到您网站的前端部分。 正如您可能已经猜到的那样，其中一些会减慢页面加载时间并阻止您的页面被渲染。

当网站访问者打开您的网站时，互联网浏览器首先会在 HTML 之前加载必要的 JavaScript 和 CSS 文件。

这是一个普通的过程，因为没有这些基本元素的页面将无法使用。 问题是在这些文件完全加载之前，Web 浏览器无法呈现页面。

这里的诀窍是，您可以推迟某些脚本的加载，而不会对访问者在打开您的页面时看到的内容造成任何问题。

网站所有者可以对其网站进行修改，以防止网络浏览器加载用户立即看到的页面上部所需的任何代码。

换句话说，浏览器只在用户向下滚动页面之前加载该部分的基本文件。 网页的这个区域称为 ATF，代表 Above the Fold。 其他需要用户向下滚动才能看到的部分是非 ATF 部分。

因此，如果您的网站加载了与非 ATF 部分相关的 JavaScript 和 CSS 代码，则页面加载需要更长的时间。 这就是为什么谷歌试图告诉你停止在你的网站代码中运行不必要的资源。

 

查找阻止渲染的 JavaScript 和 CSS

找出此问题的最简单方法是使用 Google PageSpeed Insights 运行速度测试。 访问该页面后，您只需在必填字段中输入您的 URL 地址，然后单击“分析”按钮。

如果您在页面上遇到此问题，您将看到一条建议，告诉您消除首屏内容中的呈现阻塞 JavaScript 和 CSS。

最好不要忘记最 网站评分 介于 70 到 90 之间，即使是表现最好的也很少能达到接近 100 的数字。所以你不应该强迫你的网站达到 100。在不影响用户体验的情况下尽可能多地获得最高分消极的。

根据您在网站上使用的主题和工具，一些脚本是 完美的用户体验必不可少 你应该提供给你的观众。 因此，为了在这个 Google 工具的结果页面上获得更高的分数而删除它们是完全不明智的。

 

修复阻止渲染的 JavaScript 和 CSS

有很多策略可以消除阻塞渲染的 JavaScript。 主要方法是 Async 和 Defer。第一种方法允许用户的浏览器在解析其他 HTML 部分的同时下载 JavaScript。

虽然在文件下载期间它并没有完全停止解析，但 HTML解析器 下载时暂停执行脚本。 另一方面，Defer 方法让浏览器在解析其他 HTML 部分的同时下载 JavaScript，并且在 HTML 解析结束之前不执行脚本。

消除渲染阻塞 CSS 更具挑战性，因为您可能会延迟加载 ATF 内容所需的代码。 该过程有点复杂，需要对Web开发有很好的了解。

尽管如此，我们正在解决自己运行网站的普通用户。

我们都知道 WordPress 是一个模块化系统，它允许普通用户在不编写任何代码的情况下调整所有内容。 修复这个问题也是一样的，安装相应的插件就可以快速解决问题。

 

修复阻止渲染的 JavaScript 和 CSS 的最佳 WordPress 插件

在接下来的段落中，我们将介绍五个 表现最好的 WordPress 插件 可以帮助你最深刻地解决这个问题。

警告： 在使用以下任何工具之前，请务必备份您的网站以防止任何可能的数据丢失。

 

Autoptimize

Autoptimize 插件专门用于解决 Google PageSpeed Insights 等网站分析工具提出的问题。 它改进了 JavaScript 和 CSS 文件的交付，而无需过多关注网站性能的其他方面。

如果您正在寻找基本的优化功能，这个插件将为您提供您所需要的。 该工具的一个很好的部分是它将您网站的图像转换为优化的 WebP 格式。

安装并激活 Autooptimize 后，您需要选中插件设置中的“优化 JavaScript 代码”和“优化 CSS 代码”选项框。 请注意不要选中这两个聚合 CSS 和脚本文件的选项下方的框。

尽管此插件是免费提供的，但您也可以购买高级软件包来帮助您进行网站配置。

 

WP Rocket

WP Rocket 是 WordPress 优化工具中的知名名称，可在 JavaScript 和 CSS 修改、延迟加载设置等不同方面为您提供帮助。 WP Rocket 的设置过程非常简单，但您可能会发现一开始就很难理解界面上的操作是如何完成的。

它开箱即用，安装后立即在您的网站上应用最佳设置。 考虑到由于脚本更改导致网站故障的必然性，该插件默认不会激活阻止渲染的 JavaScript 和 CSS 设置。

但是您可以通过浏览插件的设置并在“CSS 文件”和“JavaScript 文件”部分中查找相关选项来轻松打开此功能。

主插件每年花费 49 美元，附带一年的支持。 此外，您可以找到多个 免费附加功能 也适用于 WordPress 上的核心插件。

 

兔子装载机

兔子装载机 是一款尖端的WordPress性能优化插件，旨在让网站运行得更快、更流畅、更高效。

与广受好评的 WP Rocket 类似，RabbitLoader 不仅将您网站的性能提升到新的高度，而且还引入了一些创新功能，使其与游戏中的其他玩家区分开来。

缓存魔法： RabbitLoader 提供了一个动态缓存系统，可以实时适应您网站上的变化，从而确保您的访问者始终看到最新的内容，而不会牺牲速度，从而使其更上一层楼。

图像优化： 图像会显着降低网站速度，但 RabbitLoader 的图像优化功能可以改变游戏规则。 它会自动压缩图像并将其大小调整为最佳尺寸，而不会影响质量，从而确保您的网站快速加载而不牺牲视觉吸引力。

延迟加载： WP Rocket 和 RabbitLoader 都提供图像和 iframe 的延迟加载，但 RabbitLoader 更进一步，提供延迟 JavaScript 加载。

兼容性： RabbitLoader 旨在与各种 WordPress 主题和插件完美配合，就像 WP Rocket 一样。 无论您有一个简单的博客还是复杂的电子商务网站，RabbitLoader 都旨在增强您网站的性能而不会发生冲突。

 

W3总缓存

W3总缓存 是一个强大的性能增强器，不仅可以处理缓存问题，还可以处理由脚本和样式表引起的问题。

您可以通过首先从插件的设置中启用 Minify 选项并将其设置为手动模式来轻松删除阻止渲染的 JavaScript 和 CSS。

接下来，您应该单击“消除渲染阻塞资源”选项卡并复制必要文件的完整链接地址以阻止脚本和样式表。 现在您可以使用这些链接并将它们输入到 性能>缩小 标签。

W3 Total Cache 拥有超过一百万的活动安装，您可以从 WordPress.org 网站免费将其下载到您的网站。

 

加速助推器包

加速助推器包 是优化样式表、JavaScript、延迟加载和杂乱删除的可靠工具。 开发人员团队不断更新此插件，以使其与最新的更新和安全措施保持同步。

如果您在线销售产品和服务，则 WooCommerce 特定优化 Speed Booster Pack 的功能将极大地帮助您提高商店在互联网上的知名度。

您可以通过单击管理面板的 Speed Booster Pack 菜单中的“高级”选项卡来快速修复 WordPress 网站上阻止渲染的 JavaScript 和 CSS。

对于 JavaScript，激活“将脚本移动到页脚”和“延迟解析 JavaScript 文件”选项。 接下来，转到“CSS 优化”菜单并从可用选项中进行选择，以提高您网站的性能。

Speed Booster Pack 是 WordPress.org 网站上提供的免费解决方案。

 

JCH优化

JCH优化 是此建议插件列表中的最后一项，它配备了有用的工具 加快页面加载. 例如，它可以帮助您减少加载页面所需的 HTTP 请求数量，同时减小这些页面的大小。

精灵生成器 是此插件中另一个令人兴奋的功能，可减少加载背景图像的 HTTP 请求数。

使用 JCH Optimize，如果您升级到高级计划，则可以删除阻止呈现的 JavaScript 和 CSS。 您只需从“自动设置”部分激活“高级”或“最佳”选项。 CSS 交付设置同样仅在 Pro 版本中可用。

您可以从 WordPress.org 免费安装此插件，但您需要购买高级计划才能充分发挥其潜力。 定价计划从 29 美元开始，为期 99 个月，最高为 XNUMX 美元，终身使用。

 

总结

网站加载速度是吸引、吸引和留住受众的最关键因素之一。 在针对搜索引擎优化您的网站时，您应该优先考虑它，并使用 Google PageSpeed Insights 工具来衡量您在该领域的表现。

阻止渲染的 JavaScript 和 CSS 项是您在使用 Google 强大的工具时可能会看到的最常见的建议之一。 您可以通过安装我们在本文中介绍的五个插件之一轻松解决此问题，并且 加快页面的加载速度 大部分。

我们希望您发现本教程对您有所帮助，并享受快速加载的网站以获得最佳结果。