如何在 WordPress 中延迟 JavaScript 的解析

无论您运行 WordPress 网站还是任何其他网站，您都应该知道衡量网站性能的一个关键指标是页面速度。

如果您使用任何网站性能测试工具，例如 GTmetrix 或 Google PageSpeed Insights，它可能会建议您推迟 JavaScript 的解析。

现在，这个短语可能会令人困惑，但它在提高网站加载时间方面起着重要作用。

那么，JavaScript 的延迟解析是什么意思呢？

好吧，我们稍后会详细讨论这个问题。 简而言之，延迟解析 JavaScript 让浏览器首先加载网站内容，而无需等待脚本完成下载。

这个过程是必不可少的，因为浏览器会在加载任何其他网站内容之前从服务器渲染和下载 JavaScript。 这会损害您网站的速度并中断您的页面加载时间。

值得庆幸的是，延迟解析 JavaScript 是缓解该问题的最佳方法。

我已经在本文中解释了在 WordPress 中延迟解析 JavaScript 的五种经过验证的方法。 但在此之前，让我们更深入地了解该短语的含义，并了解您是否需要延迟 Javascript 的解析。

让我们开始吧！

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

在了解延迟 JavaScript 解析的技术之前，您应该了解 Web 浏览器如何呈现网页。

首先，当您的浏览器向您的 Web 服务器发送请求时，它会接收该页面，该页面以 HTML 文档的形式下载。 该 HTML 文档包括文本、呈现各种 DOM 元素的代码以及不同的资源，如图像、样式表和脚本。

默认情况下，浏览器会按顺序下载这些资源。 只有在下载完所有资源后，才会恢复网页的渲染。 此外，大量资源会对网页的加载时间产生不利影响。

每当您的浏览器通过代码呈现您的网站时，如果它找到任何 JavaScript，它就会停止呈现。 该进程会暂停，直到它可以获取和解析 JavaScript 文件。 这会对您网站的速度产生负面影响。

值得庆幸的是，延迟解析 JavaScript 的过程会通知浏览器等待下载和解析 JavaScript 文件，直到您网站的主要内容完成加载。 至此，您的访问者可以与您的网站进行交互，这样下载和解析 JavaScript 所需的时间就不会再危及您网站的加载时间。

如何知道您需要延迟解析 JavaScript？

正如我们之前所说，GTmetrix、Google PageSpeed Insights 或 WP Engine Speed Tool 等网站性能测试工具通常建议您在分析您的网站时推迟对 JavaScript 的解析。

特别是 GTmetrix 为您提供评分并列出需要推迟以提高页面加载速度的特定脚本。

您只需输入您网站的 URL 并等待工具对其进行评估。 完成评估后，转到 PageSpeed 选项卡并展开延迟解析 JavaScript 部分。

本部分为您提供了在渲染过程中加载的非必要脚本列表，如下例所示：

异步与延迟属性

确保下载脚本不会干扰网页的呈现至关重要。 有两种方法可以做到这一点：

• 异步
• 推迟

您可以将async属性包含到脚本标记中，如下所示：

 <script src= “path/to/script” async> </script>

这告诉您的浏览器异步加载脚本。 准确地说，浏览器在代码中遇到资源时会立即下载资源，但在资源仍在下载时继续解析 HTML。

另一方面，您可以将defer属性添加到 script 标签：

 <script src= “path/to/script” defer> </script>

这告诉您的浏览器在完成网页解析之前不要下载资源。 一旦完成解析和渲染，它就会下载之前遇到的延迟脚本列表。

async 和 defer 属性之间的主要区别在于下载资源的时间。

如果您有一个紧凑的 Web 应用程序，建议您使用 defer 以确保满足相互依赖关系。 此外，如果您在渲染路径中只有几个脚本，您不会介意使用这两个属性之间的任何区别。

下面是一个理解 async 和 defer 属性的例子：

假设您有两个脚本 JS1 和 JS2。

条件是JS2出现在JS1之后的代码中，JS2对JS1有依赖，但是JS1大于JS2。

现在，如果您使用async ，则 JS2 可能在 JS1 完全下载之前完成下载。 这会导致错误，因为 JS2 在没有 JS1 的情况下执行。

另一方面，如果你使用defer ，JS1 和 JS2 会被顺序下载，确保没有错误。

为什么需要延迟解析 JavaScript？

我们之前已经提到，页面速度是影响或破坏您网站性能的最关键方面。 由于 JavaScript 文件非常大并且加载时间更长，因此延迟执行一段时间有助于提高网站的速度。

以下是您需要在 WordPress 中延迟解析 JavaScript 的一些原因：

1. 提升搜索排名：

当谷歌或任何其他搜索引擎评估您的网站的搜索引擎排名时，他们会将页面速度作为衡量的关键点。 如果您的网站加载速度更快，它必然会出现在搜索引擎结果的第一页。

根据研究，每 2 人中有 1 人希望页面在 2 秒内加载完毕。 如果您的网站无法在 2 秒内正确加载，Google 将偏向于您的竞争对手而不是您。 因此，它可能会对您的搜索排名产生负面影响。

因此，有必要推迟对 JavaScript 的解析，以显着提高网站的加载时间。

如果您正在寻找更多选项来加速您的 WordPress 网站，请查看这 7 种页面 SEO 技术，它们将使您的搜索流量翻倍。

2.提高转化率：

如果您的网站加载速度较慢，您的访问者一定会离开它并寻找其他更好的选择。 由于您的用户经常在您的网站上寻找快速可靠的信息，因此加载缓慢的页面可能会影响心情。

同样，如果您经营一个联属网站并通过您的网站销售产品，您会期望您的用户对其采取更多行动。 但是，较慢的网页可能会阻止您的访问者采取任何行动。

HubSpot 上的研究表明，即使网站加载时间延迟一秒，转化率也会下降 7% 。 这就是提高网站加载时间和提高转化率的关键所在。

延迟解析 JavaScript 的技术可帮助您提高网站的速度并提高其转化率。

3. 提供更好的用户体验：

没脑子！ 速度较慢的网站会造成糟糕的用户体验。 如果您的网站加载时间比平时多，您可以期望访问者离开您的网站，从而提高其跳出率。

您应该考虑推迟对 JavaScript 的解析，以便 JS 文件仅在您的网页内容加载后执行。 此技术可帮助您加快 WordPress 网站的速度，并为您的用户提供出色的最佳体验。

在 WordPress 中延迟 JavaScript 解析的五种不同方法

要延迟 JavaScript 的解析，您可以选择三个主要路由中的任何一个，包括：

• 插入
• 瓦维法
• Functions.php 文件

使用这些路由，我们创建了五种不同的方法来延迟 WordPress 中 JavaScript 的解析。

方法一：使用免费的异步 JavaScript 插件

Async JavaScript 是一个免费的 WordPress 插件，有助于消除首屏内容中的渲染阻塞 JavaScript。

该插件使您可以完全控制添加或排除哪些脚本异步或延迟属性以提高您的 WordPress 网站的性能。 在选择 async 和 defer 之前，你应该记住的是：

• Async在解析 HTML 文件的同时下载 JavaScript，但随后暂停 HTML 解析以执行 JavaScript 文件。
• Defer在解析 HTML 文件的同时下载 JavaScript，并在 HTML 解析完成后等待执行。

以下是使用 Async JavaScript 插件在 WordPress 中延迟解析 JavaScript 的每一个步骤：

首先，从您的 WordPress 仪表板重定向到插件 -> 添加新的。

现在在搜索栏上查找 Async JavaScript 插件，然后安装并激活它。

完成安装和激活插件后，请转到“设置”页面进行必要的更改。

现在，勾选Enable Async JavaScript选项并选择Defer as Async JavaScript Method，如下图所示：

对于更高级的选项，您可以向下滚动到页面。 在这里，您可以包含要应用 async 和 defer 标签的脚本，还可以添加要排除的脚本列表。

您还可以列出可以从 Async JavaScript 插件所做的任何更改中排除的插件和主题。

进行必要的更改后，向下滚动到页面底部并点击保存设置按钮。

方法二：使用 WP Rocket 插件

WP Rocket 被称为最强大的 WordPress 缓存插件之一，只需点击几下即可快速加载您的网站。 该插件提供页面缓存、缓存预加载、静态文件压缩和许多其他很酷的功能。

除此之外，WP Rocket 还可以帮助您在 WP Rocket 仪表板的“文件优化”选项卡中延迟 JavaScript 的解析。

购买、安装和激活 WP Rocket 插件后，重定向到“设置”选项，然后单击菜单中的“文件优化”选项卡以开始使用。

之后，向下滚动到 JavaScript Files 部分，勾选Load JavaScript deferred选项，并启用jQuery 的安全模式。

完成整个过程后，向下滚动到页面末尾，然后单击“保存更改”按钮。

方法3：使用W3 Total Cache Plugin

W3 Total Cache 是另一个重要的 WordPress 插件，可以改善您网站的 SEO 和用户体验。 它通过利用内容交付网络 (CDN) 集成来提高您网站的性能并减少加载时间。

W3 Total Cache 是免费的并且非常有效。 您可以使用此插件来延迟 WordPress 网站上 JavaScript 的解析。

以下是使用 W3 Total Cache 插件在 WordPress 中延迟解析 JavaScript 的每个步骤：

首先，从您的 WordPress 仪表板重定向到插件 -> 添加新的。

现在在搜索栏上查找 W3 Total Cache 插件，然后安装并激活它。

完成安装和激活插件后，从 WordPress 左侧边栏中转到性能 -> 常规设置以进行必要的更改。

之后，向下滚动到Minify部分并勾选Enable选项。 此外，从缩小模式中选择手动选项，然后单击保存所有设置按钮继续。

现在，从左侧边栏重定向到Performance -> Minify选项卡，然后向下滚动到JS标题，您可以在其中看到带有两个 HTML 标记的 Operations in area 部分。

使用Before </head>标记的嵌入类型中的“延迟”选项选择非阻塞。

在同一部分中，您可以看到JS 文件管理标题，您需要在其中选择活动的 WordPress 主题，然后单击“添加脚本”按钮以包含要解析的 JavaScript 的 URI。

您可以通过单击“添加脚本”按钮添加任意数量的 URI。

完成更改后，单击Save Setting & Purge Caches按钮继续。

之后，向下滚动到CSS部分。 然后，您可以单击CSS 文件管理标题下的添加样式表按钮以插入 CSS 样式表 URI。 您可以根据在线速度监控工具提供的建议添加多个。

完成更改后，单击Save Setting & Purge Caches按钮继续。

方法 4：使用 Varvy 推荐的方法

Varvy 的 Patrick Sexton 推荐的另一种方法是在初始页面加载完成后使用脚本调用外部 JavaScript 文件。 这意味着浏览器在网页完成加载之前不会下载或执行任何 JavaScript。

您可以通过调整 Varvy 提供的代码片段，然后将脚本添加到您的主题文件中紧挨在结束</body>标记之前的方式来使用此方法。

这是添加到主题正文部分以延迟 WordPress 中 JavaScript 解析的代码：

 <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文件注入代码。

使用这种方法，您可以像这样包装 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 <?php }

以下是此方法的每个步骤，并用清晰的图像进行了解释：

登录到您的 WordPress 仪表板并导航到外观 -> 主题编辑器

现在，单击屏幕右侧的 header.php 文件，然后在关闭 </body 标签> 之前粘贴上面提到的代码。

之后，单击更新文件按钮。

方法五：使用functions.php文件

如果您对 WordPress 开发有所了解，那么您应该熟悉这样一个事实：您不应该直接通过 HTML 标记添加脚本。 相反，您需要使用内置的 WordPress 功能来请求资源，并在必要时备份您的网站。

您可以通过将代码片段添加到您的functions.php文件来为您的Javascript 文件使用defer 属性。
为此，您需要从 WordPress 仪表板转到主题编辑器。 之后，单击functions.php并将以下代码添加到其中：

 function defer_parsing_of_js( $url ) { if ( is_user_logged_in() ) return $url; //don't break WP Admin 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_parsing_of_js', 10 );

此代码段告诉 WordPress 将 defer 属性添加到除 JQuery 之外的所有 JavaScript 文件。
您还可以通过functions.php文件轻松地将以下代码添加到 JavaScript 文件中以使用 async 或 defer 属性：

 add_filter('script_loader_tag', 'add_defer_tags_to_scripts'); function add_defer_tags_to_scripts($tag){ # List scripts to add attributes to $scripts_to_defer = array('script_a', 'script_b'); $scripts_to_async = array('script_c', 'script_d'); # add the defer tags to scripts_to_defer array foreach($scripts_to_defer as $current_script){ if(true == strpos($tag, $current_script)) return str_replace(' src', ' defer="defer" src', $tag); } # add the async tags to scripts_to_async array foreach($scripts_to_async as $current_script){ if(true == strpos($tag, $current_script)) return str_replace(' src', ' async="async" src', $tag); } return $tag; }

好吧，不要忘记，在将 async 和 defer 属性添加到脚本标签之前，您需要将每个脚本加入队列，以便 WordPress 可以访问它。 这是它的代码：

 add_action('wp_enqueue_scripts', 'enqueue_custom_js'); function enqueue_custom_js() { wp_enqueue_script('script_a', get_stylesheet_directory_uri().'/script_a.js'); wp_enqueue_script('script_b', get_stylesheet_directory_uri().'/script_b.js'); wp_enqueue_script('script_c', get_stylesheet_directory_uri().'/script_c.js'); wp_enqueue_script('script_d', get_stylesheet_directory_uri().'/script_d.js'); }

将代码添加到 functions.php 文件后，单击“更新文件”按钮。

以下是此方法的每一步，并用清晰的图像解释：

登录到您的 WordPress 仪表板并导航到外观 -> 主题编辑器

现在，单击位于屏幕右侧的functions.php文件。 然后，您可以粘贴上面提到的代码并单击“更新文件”按钮以保存必要的更改。

在 WordPress 中延迟解析 JavaScript 的替代插件

如果您正在搜索 Async JavaScript 和 WP Rocket 插件以外的其他选项来推迟 WordPress 中 JavaScript 的解析，那么您有很多选择。 其中一些包括：

1. 加速包：

这是一个免费的 WordPress 插件，具有易于使用的界面，可帮助您进行 JavaScript 优化和许多其他速度优化技术。

Speed Booster Pack 的优点：

• 非常简单易用，并带有交互式用户界面
• 有助于 JavaScript 优化、CSS 优化、延迟加载和内容交付网络 (CDN) 集成
• 定期更新以获得卓越的性能和错误改进

速度助推器包的缺点：

• 启用此插件或其任何功能可能会与您网站上的其他插件冲突

2. WP 延迟 JavaScript：

这个 WordPress 插件使用 LABJS 延迟加载通过 wp_enqueue_script() 方式添加的所有 JavaScript。 结果是加载时间的适当优化。

WP Deferred JavaScripts 的优点：

• 非常易于使用，是市场上最受欢迎的解决方案之一
• 明确设计用于延迟 WordPress 中 JavaScript 的解析，而不仅仅是作为附加功能

WP Deferred JavaScripts 的缺点：

• 更新不频繁，可能与较新版本的 WordPress 不兼容
• 可能会导致您网站上的其他插件崩溃

常见问题（常见问题）

结论

在 WordPress 中延迟 JavaScript 的解析以提高您网站的速度和性能非常重要。 我们希望您会发现这篇文章很有见地，因为我们已经介绍了执行此技术的不同方法，其中包括使用插件和自己将代码添加到主题文件中。

如果您发现很难将代码添加到主题文件中，我们强烈建议您使用上面提到的插件来延迟 JavaScript 的解析。 插件易于使用，只需单击几下即可完成整个过程。

完成该过程后，请确保通过 GTmetrix 等站点性能测试工具运行您的网站，以确保您的网站延迟尽可能多的脚本。

您对如何在 WordPress 中延迟解析 JavaScript 有任何顾虑和疑问吗？ 在下面的评论部分中将它们射杀！