如何在WordPress中延迟JavaScript解析(4种方法)

你有没有通过一个性能测试工具运行你的WordPress网站，但是你遇到了在WordPress中延迟解析JavaScript的指令？

实施这一改变可以对您网站的页面加载时间产生积极的影响，尤其是对于移动访问者。但警告可能有点难以理解，这就是为什么我们必须解释延迟解析JavaScript到底意味着什么，以及如何在WordPress网站上实现这一变化。

以下是您将在本文中学到的内容:

在WordPress中延迟解析JavaScript是什么意思？

如何确定是否需要延迟解析JavaScript？

解析JavaScript的不同方法

如何在WordPress中延迟JavaScript解析(4种方法)

如果你只是想跳到教程，你可以点击上面列表中的最后一个链接。

在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的解析。首先，您可以向脚本添加两个属性:

异步ˌ非同步(asynchronous)

推迟

这两个属性都允许访问者的浏览器下载JavaScript而无需暂停HTML解析。不过不同的是，async虽然不会暂停HTML解析来获取脚本(默认行为)，但会在获取脚本后暂停HTML解析器来执行脚本。

使用defer，访问者的浏览器在解析HTML时仍然会下载脚本，但是会等待解析脚本，直到HTML解析完成。

这张伴随网络成长的图表很好地解释了这种差异:

解释图形异步和延迟。

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

最后，您将看到的另一种方法是将JavaScript移到页面底部。但是，这种方法并不是一个好的解决方案，因为即使你的页面很快就可以看到了，访问者的浏览器仍然会显示页面正在加载，直到所有的脚本完成。这可能会阻止一些访问者与您的页面进行交互，因为他们认为内容没有完全加载。

如何在WordPress中延迟JavaScript解析(4种方法)

要延迟WordPress中JavaScript的解析，你可以采取三种主要方式:

插件——有一些免费的高级WordPress插件可以延迟JavaScript解析。我们将向您展示如何使用两个流行的插件来做到这一点。

Varvy方法——如果你精通技术，可以直接编辑你网站的代码，使用Varvy的代码片段。

可以在副标题的Functions.php文件中添加代码片段来自动延迟脚本。

你可以点击上面直接跳转到你喜欢的方法或者通读所有的技术找到最适合你的方法。

1.免费的异步JavaScript插件

Async JavaScript是弗兰克·古森斯的免费WordPress插件，他也是流行的Autoptimize插件的开发者。

它为您提供了一种使用异步或延迟来解析JavaScript的简单方法。

首先，你可以安装并激活WordPress.org的免费插件。然后，进入设置→异步JavaScript配置插件。

在顶部，您可以启用插件功能，并在异步和延迟之间进行选择。请记住:

Async在解析HTML的同时下载JavaScript，但随后暂停HTML解析以执行JavaScript。

Defer在解析HTML的同时下载JavaScript，并等待它执行，直到HTML解析完成。

如何使用异步JavaScript插件

接下来，您还可以选择如何处理jQuery。许多主题和插件都非常依赖jQuery，所以如果你试图延迟解析jQuery脚本，你可能会破坏网站的一些核心功能。最安全的方法是排除jQuery，但是可以尝试推迟。只要确保彻底测试你的网站。

再往下，您还可以手动包括或排除特定的脚本被延迟，包括一个很好的用户友好的功能，允许您找到特定的主题或插件在您的网站上是活跃的:

异步JavaScript包含/排除规则

2.使用WP火箭插件

除了一堆其他的性能优化技术，WP Rocket还可以在WP Rocket dashboard的“文件优化”标签中帮你延迟解析JavaScript。在JavaScript文件部分寻找Load JavaScript deferred选项。

与Async JavaScript插件一样，WP Rocket也允许您排除jQuery，以避免网站内容出现问题:

如何使用WP Rocket延迟解析JavaScript

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

之前，我们提到Varvy的Patrick Sexton建议使用一个代码片段，它将等待JavaScript下载并执行，直到您的网站完成初始页面加载。

您可以通过调整Varvy提供的代码片段来实现此方法，然后将脚本添加到您的主题中的结束标记之前。

这是来自Varvy的代码:

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;

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

使用这种方法，您可以像这样包装Varvy的代码:

/**Defer parsing of JavaScript with code snippet from Varvy*/add_action( ‘wp_footer’, ‘my_footer_scripts’ );function my_footer_scripts(){?>REPLACE_WITH_VARVY_SCRIPT