提高站点速度：删除渲染阻塞 JS 和 CSS

WordPress 使您能够使用您选择的插件和主题来构建自定义网站。 但是，这可能意味着您的站点有很多脚本会减慢其加载时间和性能。 并非所有这些脚本都需要立即加载，有些实际上会阻止访问者尽快看到您的内容。

这些无关文件称为渲染阻塞 JavaScript 和 CSS。 在本文中，我们将解释这些渲染阻塞资源是什么，然后向您展示如何从您的 WordPress 站点中消除渲染阻塞资源。 让我们开始吧！

什么是渲染阻塞 JavaScript 和 CSS？

当网站在浏览器中加载时，它会向队列中的每个脚本发出调用。 通常，在网站在浏览器中可见之前，该队列需要为空。 可以阻止您的网站完全加载的脚本队列是渲染阻止 JavaScript 和 CSS 文件。

当脚本队列很长时，访问者可能需要一段时间才能访问您的站点。 通常，这些脚本中的许多并不是立即查看网站所必需的，并且可以很容易地等到网站本身完全加载后再运行。

换句话说，这些类型的脚本会减慢您的网页速度，而不会真正满足观众的即时需求。 任何不涉及观众将立即看到的内容（通常称为“首屏”元素）的脚本都应推迟到页面的其余部分加载完毕。

为什么渲染阻塞的 JavaScript 和 CSS 对网页不利？

呈现阻塞的 JavaScript 和 CSS 脚本会减慢您的网页速度，这有很多原因是不好的。 网站速度在您的 WordPress 网站的许多重要方面都发挥着重要作用，包括一般可用性和搜索引擎优化 (SEO)。 当您的网站加载缓慢时，您更有可能失去访问者，并且不太可能在搜索引擎结果中排名靠前。

当然，站点速度和性能不仅受渲染阻塞资源的影响。 话虽如此，这是一个可以显着缩短加载时间的因素。 请记住，网页上的每个资源都会占用字节，字节数越多，下载时间就越长。 您网站上的脚本越少越轻越好。 毕竟，您不希望让缓慢的站点对您的业务产生负面影响。

一般来说，最好确保您网站的代码尽可能干净和最少，以提高整体速度。 但是，总会有一些剩余代码。 默认情况下，浏览器将尝试一次加载所有内容，包括渲染阻止脚本。

您有责任确保您的网站首先加载必要的脚本，以使其在查看者首次登陆页面时看起来正确且可用。 只有这样才能加载其余的脚本。

如何消除渲染阻塞 JavaScript 和 CSS

在消除渲染阻塞脚本之前，您需要确定哪些脚本导致了问题。 为此，我们建议使用 Google 的 PageSpeed Insights。 只需输入您的网址，Google 就会准确告诉您哪些脚本正在降低您的网页性能：

在Eliminate render-blocking JavaScript and CSS下列出出现在结果中的所有脚本。 无论您是尝试手动解决它们还是使用插件，这些都是您在应用以下修复程序时需要格外注意的脚本。

要减少网站上阻止呈现的脚本的数量，您需要遵循一些最佳做法：

• “缩小”您的 JavaScript 和 CSS。 这意味着删除代码中所有多余的空格和不必要的注释。
• 连接您的 JavaScript 和 CSS。 为此，您需要获取几个不同的 .js 和.css文件并将它们组合起来。 理想情况下，您将只有几个这样的文件。
• 延迟 JavaScript 的加载。 强制 JavaScript 文件等待页面上的所有其他内容准备就绪后再加载可能很有用。 延迟 JavaScript 的可靠方法是使用异步加载。

在 WordPress 中手动完成这些技巧可能很棘手，因为许多前置插件都带有自己的 JavaScript 和 CSS 文件。 一个插件可以轻松地将五六个以上的脚本附加到您网站的前端。 这些文件可以很快加起来！

值得庆幸的是，WordPress 使用一个组合过滤器来注册所有面向前端的脚本。 这意味着您有机会识别和处理任何传入的 JavaScript 或 CSS 文件 – 即使您不知道要查找的确切内容。 当然，使用插件比从头开始要容易得多。

减少渲染阻塞 JavaScript 和 CSS 的插件

有一些 WordPress 插件可以通过删除阻止渲染的 JavaScript 和 CSS 来帮助您优化网站。 在本节中，我们将看看四种流行的选择。

1.可湿性火箭

WP Rocket 通过缩小 CSS 和 JavaScript、延迟加载图像、延迟远程 JavaScript 请求等任务帮助网站优化。 它是优化插件的“瑞士军刀”。

使用此插件的最大好处之一是设置过程简单。 但是，一个潜在的缺点是用户界面。 该插件在您的 WordPress 仪表板中创建了一种与您可能习惯的不同的体验。 一些长期用户可能不喜欢这种界面变化。 尽管如此，该插件的实际功能仍然是一流的。

您可以在 WordPress 插件目录中为 WP Rocket 获得一些免费的附加功能。 然而，基本插件本身的价格为每年 49 美元，用于一个网站和一年的支持，附加层提供更多选项。

2. 自动优化

Autoptimize 专门用于解决推荐工具（如 PageSpeed Insights）带来的问题。 使您能够为网站配置插件的所有设置都将包含在 WordPress 仪表板的新菜单中。

Autoptimize 涵盖了所有基本的优化任务，例如缩小和缓存脚本。 一个独特的功能是它还可以优化图像并将其转换为 WebP 格式。 该工具的总体评价非常好，但您需要记住它的配置可能有些复杂。

虽然插件本身是免费的，但您可以从开发人员处购买两个软件包之一以协助其配置。 定制配置计划的价格约为 165 美元（149 欧元）。 您还可以花大约 667 美元（599 欧元）获得对您的网站和专家插件配置的完全亲身实践的专业审查。

3. JCH优化

JCH Optimize 还提供了一些独特的工具来帮助您缩短页面加载时间。 例如，它可以减少加载页面所需的 HTTP 请求数，并减小这些页面的大小。 这会导致服务器负载降低和带宽要求降低。

JCH Optimize 的另一个独特功能是其 Sprite 生成器。 这将背景图像组合成“精灵”，因此将它们加载到浏览器所需的 HTTP 请求更少。 然而，这个插件的缺点之一可能是陡峭的学习曲线。 大多数用户需要依靠支持文档来确保他们正确配置了插件，以避免错误。

话虽如此，该插件有许多五星级评论和超过 10,000 个活跃安装。 在价格方面，有一个免费版本的插件可用。 但是，如果您想要获得支持和高级功能（例如优化图像 API），则需要购买订阅。 六个月的支持和 API 访问的起价为 29 美元。

4. 加速包

Speed Booster Pack 提供 CSS 和 JavaScript 优化、延迟加载和杂乱删除功能。 Optimocha 的开发人员通过不断发展的代码库使插件保持最新状态，因此您知道您将始终使用最新的方法。 还有一个内置的 WooCommerce 优化功能，可以解决瓶颈问题。

使用 Speed Booster Pack 的好处之一是它具有内容分发网络 (CDN) 集成功能。 这使得在 WordPress 中使用您选择的 CDN 变得容易，同时还可以使用插件进行优化。 这个插件的缺点在于您可能需要遵循反复试验的过程才能正确配置它。

还值得注意的是，免费插件还有一个服务选项。 与 Autoptimize 非常相似，开发人员提供了多种选项，以提供实用的专业方法来配置插件以适合您的独特网站。

使用 WP Engine 提高网站速度

无论您提高网站速度的方法是什么，我们都将为您提供帮助。 我们有一个用于测试您的网站的 Speed Tool，以及可帮助您获得优化体验的最佳开发人员资源。
事实上，我们的数字体验平台 (DXP) 是开始构建更好的 WordPress 网站的好地方。 立即查看我们的定价计划！