你是否通过性能测试工具来运行 WordPress 网站,而只是遇到了延迟 WordPress 中 JavaScript 解析的指令?

实施此更改可能会对你网站的页面加载时间产生积极影响,尤其是对于移动访问者而言。但是警告可能有点难以理解,这就是为什么我们要确切解释延迟 JavaScript 解析的含义以及如何在 WordPress 网站上实现此更改的原因。

延迟 WordPress 中的 JavaScript 解析是什么意思?

如果你曾经通过 Google PageSpeed Insights,GTmetrix 或其他页面速度测试工具来运行 WordPress 网站,则可能会遇到建议延迟 JavaScript 解析的建议。

基本上,当有人访问你的 WordPress 网站时,你网站的服务器会将你网站的 HTML 内容传递给该访问者的浏览器。

然后,访问者的浏览器从顶部开始,然后遍历代码以呈现你的网站。如果从上到下找到任何 JavaScript,它将停止呈现页面的其余部分,直到可以获取和解析 JavaScript 文件为止。

它将对找到的每个脚本执行此操作,这可能会对你网站的页面加载时间产生负面影响,因为访问者需要在浏览器下载并解析所有 JavaScript 时凝视空白屏幕。

如果某个脚本对于网站的核心功能不是必需的(至少在初始页面加载时),则你不希望它妨碍加载网站的更多重要部分,这就是为什么这些页面速度测试工具总是告诉你延迟 JavaScript 的解析。

那么延迟 JavaScript 解析意味着什么?

从本质上讲,你的网站会告诉访问者的浏览器来下载及 / 或解析的 JavaScript,直到后你的网站的主要内容已经完成加载。届时,访问者已经可以看到你的页面并与你的页面进行交互,因此下载和解析 JavaScript 的等待时间不再具有这种负面影响。

如何判断是否需要延迟 JavaScript 解析

要测试你的 WordPress 网站是否需要延迟 JavaScript 的解析,你可以通过 GTmetrix 运行你的网站。

GTmetrix 将给你一个评分,并列出需要延迟的特定脚本:

GTmetrix 中 的推迟 JavaScript 测试的解析

延迟解析 JavaScript 的不同方法

有几种不同的方法可以延迟 JavaScript 的解析。首先,你可以将两个属性添加到脚本中:

  1. 异步
  2. 延期

通过这两个属性,访问者的浏览器无需暂停 HTML 解析即可下载 JavaScript。但是,不同之处在于,尽管异步不会暂停 HTML 解析以获取脚本(就像默认行为那样),但它确实会暂停 HTML 解析器以在脚本被获取后执行脚本。

使用 defer,访问者的浏览器在解析 HTML 时仍会下载脚本,但它们将等待解析脚本,直到 HTML 解析完成为止。

异步和延迟的区别

异步解析和延迟解析的区别

Varvy 的 Patrick Sexton 推荐的另一种选择是,仅在初始页面加载完成后,才使用脚本来调用外部 JavaScript 文件。这意味着在初始页面加载完成之前,访问者的浏览器将不会下载或执行任何 JavaScript。

最后,你将看到的另一种方法是将 JavaScript 移至页面底部。但是,这种方法不是很好的解决方案,因为即使你的页面很快就会可见,访问者的浏览器仍会在加载过程中将页面显示为加载状态,直到所有脚本完成为止。这可能会阻止某些访问者与你的页面进行交互,因为他们认为内容未完全加载。

如何延迟 WordPress 中 JavaScript 的解析

要延迟 WordPress 中 JavaScript 的解析,你可以采取以下三种主要方法:

  1. 插件 –有一些很棒的免费和高级 WordPress 插件可以延迟 JavaScript 解析。我们将向你展示如何使用两个流行的插件。
  2. Varvy 方法 –如果你精通技术,则可以直接编辑网站的代码,并使用 Varvy 中的代码段。
  3. Functions.php 文件 –你可以在子主题的 functions.php 文件中添加代码段,以自动延迟脚本。

1. 免费的异步 JavaScript 插件

Async JavaScript 是 Frank Goossens 提供的免费 WordPress 插件,它为你提供了一种使用异步或延迟来延迟解析 JavaScript 的简单方法。

首先,你可以从 WordPress.org 安装并激活免费插件。然后,转到设置→异步 JavaScript 来配置插件。

在顶部,你可以启用插件的功能,并在异步和延迟之间进行选择。

  1. Async 在仍然解析 HTML 的同时下载 JavaScript,然后暂停 HTML 解析以执行 JavaScript。
  2. Defer 在仍然解析 HTML 的同时下载 JavaScript,并等待执行直到 HTML 解析完成。

如何使用异步 JavaScript 插件

再往下,你还可以选择如何处理 jQuery。许多主题和插件严重依赖 jQuery,因此,如果你尝试延迟解析 jQuery 脚本,则可能会破坏网站的某些核心功能。最安全的方法是排除 jQuery,但是你可以尝试延迟使用它。只要确保彻底测试你的网站即可。

你还可以手动包括或不延迟使用特定脚本,其中包括一个很好的用户友好功能,可让你定位网站上活动的特定主题或插件:

异步 JavaScript 包含/排除规则

2.使用 WP Rocket 插件

除了一系列其他性能优化技术之外,WP Rocket 还可以帮助你延迟 WP Rocket 仪表板的“ 文件优化”选项卡中的 JavaScript 解析。在“JavaScript 文件”部分中查找“ 加载 JavaScript 延迟”选项。

像 Async JavaScript 插件一样,WP Rocket 还可让你排除 jQuery 以避免网站内容出现问题:

如何使用 WP Rocket 推迟 JavaScript 的解析

3. 使用 Varvy 的推荐方法(代码)

之前,我们提到过 Varvy 的 Patrick Sexton 建议使用一段代码,等待你的网站完成初始页面加载后,再下载并执行 JavaScript。

你可以通过调整 Varvy 提供的代码段,然后将脚本添加到主题 </body> 之前,将脚本添加到主题中,以实现此方法。

这是 Varvy 的代码:

<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

确保将 “defer.js” 替换为你要延迟的 JavaScript 文件的实际文件名 / 路径。然后,你可以使用 wp_footer 钩子通过子主题的 functions.php 文件注入代码。

4. 通过 functions.php 文件延迟 JavaScript

最后,你还可以通过将以下代码段添加到你的 functions.php 文件中,将 defer 属性添加到你的 JavaScript 文件中而不需要插件:

/**
Defer parsing of JavaScript with code snippet from Varvy
*/
add_action( 'wp_footer', 'my_footer_scripts' );
function my_footer_scripts(){
?>
REPLACE_WITH_VARVY_SCRIPT
<?php
}

本质上,此代码片段告诉 WordPress 将 defer 属性添加到除 jQuery 之外的所有 JavaScript 文件中。

它既快速又简单,但是却无法像 Async JavaScript 插件那样为你提供精细的控制。