如何在 WordPress 中延迟解析 JavaScript

JavaScript 是世界上最流行的编程语言之一。 大多数网站使用它来为访问者创造更多动态体验。 联系表单和站点分析等关键功能只是 JavaScript 日常实践的几种方式。 不幸的是，虽然它非常有用，但所有这些代码都有可能减慢您的网站速度。

延迟解析 JavaScript（也称为“延迟 JavaScript”）意味着告诉您的网站最后加载您的非必要 JavaScript 代码。 这个简单的调整可以改善您的页面加载时间和整体性能，具体取决于您网站使用的脚本数量。

在本文中，我们将详细分析什么是解析以及延迟涉及什么。 我们还将讨论延迟 JavaScript 如何使您的网站受益，并向您展示如何去做。 最后，我们将总结一些常见问题 (FAQ) 来解决任何遗留的疑问。

“延迟解析 JavaScript”是什么意思？

当您访问网站时，您的浏览器会从服务器请求文件。 这些文件包含 HTML、CSS 和 JavaScript，供浏览器解析（解释）以创建可视化和交互式网页。

网站通常需要您的浏览器为单个页面加载数十个（甚至数百个）元素和文件。 这是 Google 页面之一的简单示例，因此您可以看到它使用了多少文件：

当您的浏览器解析 HTML 文件时，它会停止呈现它找到的任何 CSS 并停止执行 JavaScript 代码。 在浏览器完成执行该代码之前，它不会继续加载页面的其余部分。

实际上，如果您的网站优化得非常好（如果加载速度非常快），您可能不会注意到这种延迟。 但是延迟是存在的，而且您的网站使用的 JavaScript 越多，延迟时间就越长。 如果您的网站未针对性能进行优化，则解析 JavaScript 会显着减慢其加载时间。

延迟 JavaScript 的解析意味着告诉您的浏览器，“嘿，如果您遇到此 JavaScript 代码，请在完成页面的其余部分之前不要解析它。” 从访问者的角度来看，这意味着页面的可见元素将加载得更快。 然后，JavaScript 将在后台完成执行，没有人会更聪明（除了你和浏览器）。

延迟 JavaScript 有什么好处？

延迟 JavaScript 的主要好处是页面将为访问者加载得更快。 脚本仍需要在后台加载，但推迟它们应该会提高您的 Largest Contentful Paint (LCP) 分数，这是三个 Core Web Vital 指标之一。

请务必记住，页面加载时间是出色用户体验的最重要方面之一。 如果网站加载时间过长，您通常会失去一定比例的访问者。 此外，缓慢的加载时间会给人一种网站有问题的印象。

如何在 WordPress 中延迟解析 JavaScript

WordPress 提供了不止一种优化网站的方法。 在延迟 JavaScript 时，您可以使用两种方法。

第一种方法是最简单的，因为它涉及使用插件。

1. 使用免费插件延迟 JavaScript 解析

如果您不习惯编辑网站文件并向其添加代码，最好的办法是使用插件。 Jetpack Boost 是您可以用来在 WordPress 中推迟非必要 JavaScript 的最佳工具之一。

Jetpack Boost 是一款免费插件，可用于优化 WordPress 网站的性能。 它的配置非常简单，是初学者的绝佳选择。

激活插件后，您需要连接到 WordPress.com 帐户（您可以使用免费帐户）。

准备就绪后，转到 WordPress 仪表板中的Jetpack → Boost ，您将快速了解您的网站在性能方面的表现。

如果您查看下面的选项，您会看到一个显示Defer Non-Essential JavaScript的设置。 您可以切换此设置，它会自动延迟整个网站的 JavaScript 解析。

该插件指定了非必要的 JavaScript，因为它只影响对网站不重要的脚本。

启用此设置后，请务必查看您的网站以确保一切正常。 如果您发现任何意外情况，只需禁用该功能即可。

请注意，Jetpack Boost 还可以启用延迟加载并优化您网站的 CSS。 这意味着插件会将关键 CSS 移动到每个 HTML 文档的开头，以便浏览器首先解析它。 此设置对于提高首次输入延迟 (FID) 分数特别重要。

2. 使用 functions.php 延迟解析 JavaScript 文件

第二种方法涉及编辑主题的functions.php文件。 这个过程并不过分复杂，但向 WordPress 添加代码有时会导致意想不到的副作用。

此方法适用于有经验的用户，因为仅删除一个文件甚至不小心在错误的位置添加空格都可能发生很多情况。 请记住，您只想推迟非必要的JavaScript，以避免损害用户体验。

为了安全起见，我们建议在编辑任何 WordPress 文件之前完全备份您的网站。 即使您有最近的备份，也请创建另一个备份，以便在进行任何更改之前有一个还原点。 如果您有 Jetpack VaultPress Backup，则您网站的最新版本已经为您保存。

有两种方法可以编辑functions.php文件。 您可以使用 WordPress主题文件编辑器，您可以从外观菜单访问它。 请记住，此选项仅在您未使用支持全站点编辑 (FSE) 的块主题时可用。

访问编辑器后，从右侧的下拉菜单中选择活动主题，然后在列表中查找functions.php文件。

您可以使用编辑器在任何主题文件中添加或删除代码。 不过，我们建议不要修改任何现有代码，除非您了解其用途。

将代码添加到functions.php应该是安全的，只要它来自受信任的源。 以下代码片段将配置您的网站以延迟解析 JavaScript：

 function defer_js( $url ) {    if ( is_user_logged_in() ) return $url;     if ( FALSE === strpos( $url, '.js' ) ) return $url;    if ( strpos( $url, 'jquery.js' ) ) return $url;    return str_replace( ' src', ' defer src', $url ); } add_filter( 'script_loader_tag', 'defer_js', 11 );

此代码将自动延迟您网站上的所有 JavaScript，但不会触及 jQuery 脚本。 但是，如果您已登录以避免仪表板无法正确加载的问题，它将不起作用。

将该脚本添加到functions.php文件的末尾，这样它就不会干扰其中的任何其他代码。 单击页面底部的更新文件，就是这样！

如果您无法访问 WordPress 主题文件编辑器，但可以在服务器上使用代码，则可以通过文件传输协议 (FTP) 连接到您的网站来编辑functions.php 。 您需要使用像 FileZilla 这样的 FTP 客户端来执行此操作。 请记住，请确保在执行任何操作之前进行完整的站点备份。

连接到网站服务器后，您需要找到 WordPress根文件夹。 这是包含您站点的所有文件的文件夹。 它通常命名为www、public_html或您网站的名称。

打开该文件夹并转到wp-content/themes 。 应该有几个文件夹，一个用于您站点上安装的每个主题。 确定您的活动主题的文件夹并打开它。 functions.php文件应该就在里面。

右键单击该文件并查找类似“编辑”的选项（这取决于您使用的 FTP 客户端）。 该选项将使用您的默认文本编辑器打开文件。 从这里，您可以添加我们之前共享的代码片段，然后将更改保存到文件中。

当通过 FTP 编辑 WordPress 文件时，同样的规则适用。 如果您不确定代码的作用，请不要编辑任何代码，除非您信任代码片段的来源，否则请谨慎添加代码片段。

如果您在编辑functions.php文件后遇到错误，您始终可以使用最近的备份恢复您的 WordPress 站点。 在这些情况下，Jetpack VaultPress Backup 是一个极好的选择，因为它提供一键式恢复功能，即使您的站点完全关闭也是如此。

有关延迟 JavaScript 的常见问题

如果您仍然对延迟 JavaScript 的工作原理有任何疑问，本节将为您解答。 让我们从讨论延迟脚本的潜在副作用开始。

延迟 JavaScript 会破坏您的网站吗？

是的，根据您使用的插件和主题，延迟 JavaScript 可能会破坏您网站的某些元素。 而且，如果您使用的是手动方法，则代码中的错误可能会使您的网站完全崩溃。

这就是为什么使用 Jetpack Boost 之类的工具来处理此任务最安全的原因。 虽然延迟 JavaScript 仍有可能导致问题，但您可以轻松地完全停用该功能或​​插件。

延迟解析 JavaScript 是否等同于“移除阻塞渲染的 JavaScript”？

如果您使用网站性能测量服务，如 PageSpeed Insights 或 GTMetrix，您可能会注意到他们还建议从您的网站中消除渲染阻塞 JavaScript。 由于语言原因，很容易将此优化建议与延迟解析 JavaScript 混淆。

呈现阻止 JavaScript 是指任何阻止您的网站呈现的代码。 在许多情况下，最好的解决方案是在代码不满足特定目的时将其删除。 如果它有一个功能，你可以改为推迟它。

确定需要哪些脚本和不需要哪些脚本取决于您的判断。 但是像 GTMetrix 这样的服务可以帮助您识别网站上未使用的 JavaScript。

属于此类别的任何脚本都应该可以安全删除。 对于其他脚本，您可以使用插件（如 Jetpack Boost）或手动修改functions.php文件以延迟它们。

我可以安全地删除 JavaScript 而不是延迟它吗？

这取决于您所指的脚本。 WordPress 网站在发展过程中积累未使用的代码的情况并不少见。 当您安装和停用插件、试用第三方服务并停止使用它们时，就会发生这种情况。

将“孤立的”JavaScript 留在您的网站上有时会产生安全风险。 此外，它会影响您网站的性能，因为浏览器可能仍需要对其进行解析。

如果您查看上一个问题，我们将向您展示如何使用 GTMetrix 来识别您网站上可以安全删除的 JavaScript。

延迟 JavaScript 会提高页面性能吗？

延迟 JavaScript 应该会使您网站的页面加载速度更快。 速度有多快取决于您推迟的脚本数量以及您网站的优化程度。

如果您已经拥有一个快速的网站，并且已经采取措施对其进行优化，例如删除未使用的脚本，那么延迟 JavaScript 可能不会产生重大影响。 尽管如此，在页面性能方面，每一点优化都很重要。

我还能做些什么来提高我的页面加载速度？

有很多方法可以提高网站的页面加载速度。 为了获得最大的影响，以下是我们建议实施的优化：

1. 考虑使用托管 WordPress 托管服务提供商。
2. 实施内容分发网络 (CDN)。
3. 改进 WordPress 中的 Core Web Vitals。
4. 缩小 CSS。
5. 在 WordPress 中启用延迟加载。

优化您的网站以提高性能可能需要一段时间，但是 Jetpack 和 Jetpack Boost 等 WordPress 插件可以让这个过程变得更加简单和快捷。

请记住，随着时间的推移，您为提高页面加载速度所做的任何努力都会得到回报。 如果您可以让您的网站保持最佳状态，您的访问者将获得更好的体验。

今天提高您网站的性能

您可以对网站进行很多更改以提高其性能。 如果您在网站上使用多个第三方脚本和插件，后台可能会运行大量 JavaScript 代码。 该代码很重要，但它可能会阻止您网站的其余部分尽快加载。

在 WordPress 中延迟解析 JavaScript 比您想象的要容易，并且会显着影响您网站的性能。 以下是延迟 JavaScript 解析的方法：

1. 使用像 Jetpack Boost 这样的插件。
2. 使用functions.php文件延迟 JavaScript。

Jetpack 提供了多个插件来提高您的 WordPress 网站的性能。 Jetpack Boost 只是其中之一。 如果您使用 Jetpack 插件，您还可以访问免费的 CDN，它可以显着提高您网站的加载速度。 考虑从今天开始使用 Jetpack！