如何删除 WordPress 上未使用的 JavaScript 文件

—

未使用的 JavaScript 文件是渲染页面（即加载和显示页面的主要内容）不需要的资源。

可能不需要它们有两个原因：

它们不是首屏内容的一部分——需要呈现的最重要的内容。
为了更快地加载页面，浏览器应该只分析和渲染必要的资源——主要是 HTML 代码。顺便说一句，这也是为什么您应该消除会减慢页面加载速度的JS 和 CSS 渲染阻塞资源。

此类 JS 文件的典型示例是第三方代码，例如 Google Analytics 和 Facebook 跟踪代码。

对于 WordPress 用户来说另一个有用的例子是仅在需要时使用插件。所有插件加载的脚本主要基于JS。这就是为什么您应该小心并仅在必要的页面上加载它们。否则，JavaScript 文件对性能的影响将会很大，并且不会有其他简单的方法来解决该问题。对于严重依赖 JavaScript 的主题和页面构建器也是如此。
它们在代码中，但不再使用。它们完全没用。

未使用的 JavaScript 文件会极大地影响您网站的性能和用户体验。涉及的主要指标是首次输入延迟 (FID)，它是核心 Web Vitals 指标之一。

首次输入延迟通过考虑用户交互来衡量页面的响应能力 – 因此，它只能在现场计算。

总阻塞时间 (TBT)取代 FID 作为 Lighthouse 指标，根据用户输入确定页面的交互性。TBT 指标占 Lighthouse 性能得分的 25%。很容易看出它的重要性以及为什么删除未使用的 JavaScript 是必要的。

正如我们所解释的，未使用的 JavaScript 会影响浏览器渲染和加载页面的速度。更糟糕的页面加载时间对用户来说也没有好处。

有多种方法可以分析和识别您应该处理的 JavaScript 文件。

让我们来看看两个简单直接的工具：PageSpeed Insights 和 GTmetrix。

PageSpeed Insights 报告可以轻松识别您应该消除的未使用的 JavaScript。转到“机会”部分并查找“删除未使用的 JavaScript”。在这里，您将了解 JS 资源是否以及哪些资源正在影响您网站的性能。在下面的示例中，JS 脚本与 Google 跟踪代码管理器相关。

查找 JavaScript 文件的另一种方法是通过 GTmetrix 提供的瀑布图。测试 URL 的性能后，转到瀑布图并查看 JS 选项卡。在那里，您将找到应管理的未使用 JS 的列表。

正如我们上面提到的，大多数重型 JS 脚本都与跟踪代码（例如 Google 标签管理器）和插件有关。通过查看“Domain”一栏，您可以轻松理解它。

GTmetrix 瀑布

您可以通过两种方式删除或减少未使用的 JS 文件：

您可以延迟 JavaScript 资源。通过这样做，仅当存在用户交互（例如滚动或点击按钮）时才会加载 JavaScript 文件。如果没有发生用户交互，则根本不会加载 JS 文件。

请注意，并非 PageSpeed 推荐列表中的所有脚本都可以安全地延迟。您应该只延迟首屏上方的 JS 文件，因为它们是渲染阻塞资源。

如果您延迟 JavaScript，Lighthouse 工具将不会检测到任何 JS 文件，因为它们尚未加载。以下是您可以如何应对 PSI 建议并确保绝大多数文件不会包含在报告中。
您可以仅在需要时加载 JavaScript 文件。这意味着只有当某些页面需要它们时才会执行 JS 脚本。再次，您可以考虑您使用的插件和特定主题或页面构建器 – 它们可能并不对所有页面都有帮助。

这两个选项是互补的，因为每种方法都处理管理未使用的 JS 的不同方面。

一方面，延迟JS会控制代码何时执行。从技术上讲，这是一种解决方法，而不是修复方法。但它有其效果，因为它使 JS 不阻塞渲染。

另一方面，卸载不必要的资源会减少页面JS的大小。从技术上讲，它是减少未使用的 JS，而不是完全删除它。

注意：即使使用此类方法，也很难摆脱 PageSpeed Insights 通知。Lighthouse 会标记任何包含超过 20kb 未使用 JS 代码的文件。

由于大多数主题和插件都附带捆绑的 JS 文件，因此许多文件很可能会超出上述限制。换句话说，结合 JS 几乎可以保证你总是能看到推荐。

这就是为什么在大多数情况下，最终目标是减少删除未使用的 JS 的影响，而不是完全修复它。

一个很好的例子是 jQuery 库，它不能被延迟。它将始终被标记为未使用的 JS。

延迟 JS 文件的另一种方法是使用插件，例如Flying Scripts或WP Meteor。

另一方面，您可以使用资源管理器插件来控制特定文件的加载，例如：

评论