如何在 WordPress 中延迟 JavaScript 的解析

已发表: 2021-07-22

在 WordPress 中延迟 JavaScript 的解析

您的网站加载时间是否过长？ 无论您使用的是 WordPress 网站还是其他网站，高加载时间都是一个需要尽快解决的关键问题。

那么，你是不是也一样流浪呢？ 好吧，如果您亲自检查您的网站，那么您可能会收到消息“延迟在 WordPress 中解析 JavaScript”。 这似乎很复杂，有时无法理解，因为您不精通技术。

如果您遵循该消息，您将看到页面加载速度的提升，并在提高网站的转化率和收入方面发挥重要作用。

现在的问题是 WordPress 中延迟解析 JavaScript 是什么意思？

因此，这是一个快速而简短的答案。 WordPress 中 JavaScript 的延迟解析允许浏览器在不读取脚本的情况下先加载网站内容，从而完成下载并提高加载时间。

这个简单的过程很重要，因为浏览器会在加载网站内容之前从服务器渲染和下载 JavaScript。 这自然会妨碍网站的速度并中断加载时间。

但是在 WordPress 中延迟解析 JavaScript 是解决问题的关键，您无需等待几分钟即可享受网站性能。

这篇文章将分享五种经过验证的延迟 JavaScript 的技术。 但在着手解决方案之前，必须了解此弹出消息的实际含义。

所以，事不宜迟，让我们开始吧！

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

你知道浏览器是如何渲染网页的吗？ 如果不是，则必须首先了解这一点。

当您的浏览器收到用户的请求时，它会将请求发送到网络服务器，然后页面开始以 HTML 格式下载。 此 HTML 文档包含呈现 DOM 元素和不同资源（如图像、脚本和样式表）的文本和代码。

但是，浏览器会按顺序下载资源。 但是页面的渲染会再次恢复所有进程，并对加载时间产生不利影响。 即使这有时会阻碍进程并显示消息-无法下载页面或显示服务器错误。

每当浏览器通过代码渲染网站或页面时，如果在那里找到 JavaScript，它就会停止渲染。 这个过程会停止，直到它无法获取和解析脚本。 此外，它会对您网站的速度产生负面影响。

但是在 WordPress 中延迟解析 JavaScript 的帮助下，有助于通知浏览器下载您网站的页面或主要内容并提供快速加载。 此时，用户可以找到该网站。

为什么需要在 WordPress 中延迟解析 JavaScript？

如果您的网站加载时间过长，则应不择手段地提高其性能。 如果您不了解网站性能，请使用 GT Metrix、Google Pagespeed 洞察力或 WPEngine 等最佳工具在现场运行测试。

这些是速度工具测试，通常会在您分析网站时建议并为您提供延迟解析 JavaScript。 例如，让我们尝试使用 GT Metrix。

在 GTMetrix 中，您会在每个页面上找到您网站的等级以及需要尽快改进的特定脚本。 要使用这个工具，可以输入网站的 URL 并等待几分钟，这样它就可以获取整个数据。

一旦完成提前到页面速度选项卡并提高加载速度并扩展 JavaScript 的延迟解析部分。

在这里，您将找到在渲染过程中加载的加载脚本列表。 所以仔细阅读所有内容。

异步 VS 延迟属性

这对于确保下载脚本不会与网页呈现交互非常重要。 因此，执行此操作的两种方法是异步和延迟。

如果要从 Async 开始，则必须添加以下脚本标记。

有了这个，您的浏览器会收到一个更新，即浏览器应该异步加载脚本。 准确地说，浏览器在遇到代码时会立即下载其资源，但它会在资源仍在下载时解析 HTML。
而另一方面，您可以选择第二种方法 Defer 属性。 因此，添加给定的脚本。

使用此标签，您将告诉您的浏览器在完成网页解析之前不要下载资源。 该过程完成后，它会下载之前偶然发现的延迟脚本。

当两个资源都被下载时，您将要检查的主要区别。 为了更好地使用两者，应检查 Web 应用程序。

如果您的 Web 应用程序很紧凑，则应该选择延迟，而如果您的脚本很少，则异步是最好的。 好吧，您不会发现两者有任何区别，但事实是 defer 适用于大文件，而 Async 适用于小文件。

为了更好地了解 Async 和 defer 之间的区别，我们分享了一个示例。 继续阅读。

假设您有两个 java 脚本 JS1 和 JS2。 并且有一个条件是JS2出现在JS1之后的代码中，也就是说JS2依赖于JS1，但是又比JS2大。

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

如果您使用 defer JS1 和 JS2 脚本下载成功并且不会导致错误。

因此 defer 最好是加载脚本并提高网站速度或加载时间。

需要延迟解析 JavaScript 的原因

正如我们之前所说，如果你想在谷歌的第一页上排名，那么网页加载速度应该很快。 大约，一个页面应该在 2-3 秒内加载。 不幸的是，JavaScript 会渲染页面的质量，并且会损失大量流量。

延迟页面加载会以多种方式影响您的网站。 幸运的是，延迟解析 JavaScript 可以帮助您解决这个问题。 查看并检查它可以帮助您的原因。

  • 提高搜索排名

每当 Google 评估您网站的搜索排名表现时，Google 检查的最重要因素是网站的加载时间。 如果您的网站加载速度更快，它自然会出现在搜索结果的第一页。

根据研究，我们发现当 2 人中有 1 人等待网站加载时，他们会转到第二个来源。 此外，Google 只会偏爱那些不会给读者带来麻烦并为他们提供最佳用户体验的网站。

如果您的网站加载时间超过 4 秒，则会对您的网站性能产生负面影响。 因此，使用 JavaScript 很重要。 而延迟只是将网站速度从正常提升到超级的明智方法。

为了获得最佳结果，应该遵循 SEO 技术来提升您的内容并优化页面速度。

  • 提升转化率

如果您想提高转化率，您的网站需要推迟的另一个最大原因。 如果网站加载缓慢，您的客户可能会反弹到其他来源，您将失去流量和销售量。

用户很着急，他们经常喜欢关注向他们显示快速信息的网站。 如果网站运行缓慢，这会让他们感到沮丧，他们可能不会再次访问您的页面。 您正在处理哪个网站或博客并不重要。

您的工作是为您的用户提供最好的服务。 Hubspot 的研究表明，网站加载时间通常会降低 7% 的转化率。 借助 WordPress 中的延迟解析 JavaScript 技术，可以更快地提高您网站的速度，从而进一步提高转化率。

  • 赠品最佳用户体验

我们认为您不需要解释这个原因。 如果您的网站速度很好并且用户喜欢您网站上的内容，这是很自然的，您可以期望您的访问者对该网站感到满意。

如果您的网站加载时间比平时多，用户就会放弃您的网站，从而提高跳出率。

借助 WordPress 中 JavaScript 的延迟解析，您可以更新 Java 文件，从而轻松帮助您快速加载主要网站内容。 这种快速加载方案可帮助您加快网站速度，从而增强用户体验。

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

现在我们来到了本文的主要部分。 在这里，您将学习五种出色的技术，帮助您加快网站速度，提供最佳用户体验，并为您提供排名第一的途径。

所以，让我们知道方法。

为了推迟 JavaScript 的解析，你可以选择的三个重要的路由是 plugin、varvy 方法和 functions.php 文件。 通过这些路线，您可以应用五种给定的方法。

方法 1- 使用免费的异步 JavaScript 插件

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

使用此插件，您可以享受对 java 脚本的完全控制，异步或延迟可以轻松地提高站点速度并增强其在搜索页面中的性能。 但是，在选择 Async 和 defer 时，您需要遵循一些建议。

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

现在让我们转到使用异步插件在 WordPress 中延迟解析 JavaScript 的分步指南。

  1. 打开 WordPress 仪表板并跳转到插件选项卡。
  2. 在插件选项卡中单击添加新按钮并搜索 Async JavaScript 插件。
  3. 当你找到插件点击安装按钮并激活它。
  4. 因此，安装完成后，请转到设置并进行所需的更改。
  5. 勾选启用 Async JavaScript 选项并选择 defer as Async JavaScript。
  6. 对于高级功能，勾选并从您要应用的脚本中选择 - 异步和延迟标签。
  7. 您可以在此处选择要包含和排除的脚本。 此外，您还可以选择要从 Async JavaScript Plugin 所做的任何更改中排除的插件和主题。
  8. 更改完成后，保存更改

方法二：使用 WP Rocket 插件

如果您之前没有听说过 WP 火箭插件，那么现在就来了解一下。 WP Rocket 是最流行的插件之一，可以帮助您的网站在几秒钟内快速加载。

此外，使用此插件，您可以接收页面缓存、缓存预加载、压缩和许多其他很酷的功能。

另一方面，该插件还可以帮助您在文件优化选项卡中延迟 JavaScript 的解析。

这是安装和使用插件的方法。

  1. 打开 WordPress 仪表板并重定向到插件选项卡
  2. 现在单击添加新按钮并搜索 WP Rocket 插件。
  3. 点击安装并激活插件。
  4. 然后转到设置并从菜单中打开文件优化以开始使用。
  5. 现在向下滚动 JavaScript 文件并勾选加载 JavaScript 延迟选项并为 Query 启用安全模式。
  6. 整个过程完成后，转到页面末尾并单击保存更改选项。

方法3：使用W3 Total Cache Plugin

W3 Total Cache 是另一个可用于延迟 WordPress 中 JavaScript 解析的最佳插件。 这个 WordPress 插件对于增强您网站的用户体验和 SEO 非常有用。 此外，它通过利用 CDN（内容交付集成）提高了网站的性能并减少了加载时间。

W3 总缓存非常有效且使用安全。 另外，您可以使用此插件来延迟 WordPress 中的 JavaScript 解析。 这是使用此插件的方法。

  • 首先访问 WordPress 仪表板并跳转到插件页面。
  • 然后在前面添加一个新按钮并搜索插件 W3 总缓存插件。
  • 找到插件后，单击安装并激活按钮。
  • 现在插件已安装。 从 WordPress 转到性能和常规设置。
  • 然后向下滚动仪表板并跳转到缩小部分并勾选启用选项。
  • 此外，您可以从缩小模式检查手动选项，然后单击保存选项继续。

缩小代码
前往性能选项卡并从左侧边栏中选择缩小选项卡并向下滚动到 JS 标题，在那里您可以使用两个 HTML 标签搜索操作和区域部分。

缩小设置选项
使用 defer 选项选择非阻塞并嵌入之前的代码类型标签。

JS 缩小设置

  • 在设置中，您可以看到 JS 文件管理，您必须在其中选择 WordPress 主题。
  • 然后单击添加脚本选项以包含要解析的 JavaScript 的 URL。
  • 您可以通过点击添加脚本按钮添加任意数量的 URL。
  • 更改完成后单击保存设置按钮和纯缓存按钮继续。
  • 完成后，向下滚动 CSS 部分。
  • 现在单击添加样式表按钮。
  • 然后在 CSS 文件管理中插入样式表 URL。
  • 您可以根据监控工具提供给您的建议添加多个。
  • 现在，您已经完成了更改，所以保存设置和纯缓存按钮。

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

您可以在 WordPress 中选择延迟解析 JavaScript 的另一种最佳方法是选择 Vary，它使用脚本在初始页面加载后调用外部 JavaScript 文件。

这意味着浏览器在未加载网页之前不会下载或执行 JavaScript。 然而，这种方法是由 Patrick Sexton 提出的。

要使用此方法，您可以调整 varvy 提供的代码片段，然后将其添加到主体部分下的主题编辑器中。

因此，您可以在主题的主体部分中添加以下代码，以延迟 WordPress 中的 JavaScript 解析。

<脚本类型=“文本/javascript”>
函数下载SAtOnload() {
var element = document.createElement (“脚本”);
element.src = “延迟 .js” ; document.body.appendChild（元素）；
}
如果
(window.addEventListener) window.addEventListener (“load”,
下载JSAtOnload，假）；
否则如果
(window.attachEvent)
Window.attachEvent(“onload”, 下载JSAtonlaod;
</脚本>

执行此操作时，请确保您已将 defer.Js 更改为外部 JavaScript 文件的名称。 然后使用 Wp_footer 通过子主题的 functions.php 文件注入代码。

这是您必须使用的代码。

/**
使用 Varvy 的代码片段延迟解析 JavaScript
*/
Add_action ('wp_footer' , 'my_footer_scripts');
功能
我的_footer_scripts(){
?>
REPLACE_WITH_VARVY_SCRIPT
<?php
}

现在，我们正在继续我们的分步指南，以获得清晰的感觉。

  1. 转到您的 WordPress 仪表板，然后显示主题编辑器。
  2. 导航 header.php 文件，然后在正文部分之前和之前粘贴上述代码。
  3. 然后单击更新文件选项。

方法 5- 使用 functions.php 文件

如果您忘记了，那么让我们提醒您，您不能通过 HTML 将脚本直接添加到 WordPress。 相反，您必须使用内置的 WordPress 功能来请求资源并备份您的网站。

您应该通过将代码片段添加到您的 functions.php 文件来使用 JavaScript 文件的 defer 属性。

要完成该过程，请打开主题编辑器并转到 functions.php 文件以添加给定的代码。

功能
Defer_parsing_of_js ( $url ) {
如果 （
用户_is_logged_in())
返回 $url; //不要破坏 WP 管理员
如果（假===
Strops( $url, '.js' ) )
返回 $url;
if ( strops ($url, 'jquery.js' ) ) return $url;
return str_replace('src', 'defer src', $url);
}

添加过滤器（
'script_loader_tag',
'defer_parsing_of_js' , 10
);

此代码帮助 WordPress 将 defer 属性添加到除 JQuery 之外的 JavaScript 文件。

这是您可以用来通过 functions.php 文件将延迟属性与 JavaScript 文件同步的代码。

add_filter('脚本_loader_tag',
'add_defer_tags_to_scripts'）；
 
功能
add_defer_tags_to_scripts ($tyag) {
#list 脚本添加到 $scripts_to_defer = array ('script_a', script_b');
$scripts_to_async = array ('script_c', 'script_d');
#将延迟标签添加到scripts_to_defer数组
Foreach ( $scripts_to_defer 作为 $current_script) {
如果 (true == strops ($tag,
$current_script) )
回屯
str_replace('src,'defer="defer" src','$tag);
}
#将异步标签添加到scripts_to_async数组
Foreach ( $scripts_to_async 作为 $current_script) {
如果 (true == strops ($tag,
$current_script) )
返回
str_replace('src,'defer="
异步=”异步”src', $tag);

}
返回$标签；
)

不要忘记您必须将每个代码排入队列，因此必须添加以下代码。

add_action ('wp_enqueue_scripts',
'enqueue_custom_js');
功能
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_ds',
Get_stylesheet_directory_uri (), '/script_d.js') ;
}

当您更新了 functions.php 文件中的所有代码后，请更新该文件并查看更改。 这是更新文件的分步指南。

  1. 打开 WordPress 仪表板，然后出现主题编辑器。
  2. 导航 functions.php 文件，然后粘贴上述代码。
  3. 然后单击更新文件选项。

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

除了 Async 和 defer，您还有两个插件选项 Defer Parsing of JavaScript in WordPress。

  1. 加速器包

    2. 这是另一个最好的 WordPress 插件，您可以使用它来轻松提高网站的速度并为用户进行优化。 让我们知道它的优点和缺点。

    优点：

    • 由于交互式用户界面，任何人都可以轻松使用它。
    • 这有助于 JavaScript 优化、加载不良和 CDN 集成。
    • 这将定期更新并消除错误威胁

    缺点：

    • 这可能会给使用其他插件带来麻烦。

  2. 异步 JavaScript

    3. 该插件允许使用 LABJS 轻松加载作为 wp_enqueue_script() 添加的所有 java 脚本。 让我们知道它的优点和缺点。

    优点：

    • 这是非常容易使用的插件
    • 它在插件市场上最受欢迎
    • 专为在 WordPress 中延迟解析 JavaScript 而设计

    缺点：

    • 不定期更新
    • 可能与较新版本的 WordPress 不兼容
    • 可能会给其他插件带来麻烦

    经常问的问题

    延迟解析是什么意思？

    延迟解析是您的 JavaScript 文件在浏览器中的网站内容加载之后的状态。 这意味着 defer 不会参与加载和渲染。

    因此，当用户在浏览器中请求您的网站时，延迟 JavaScript 解析不会等待在浏览器中加载 JavaScript，而是立即显示内容。 简而言之，您的内容首先显示然后被加载。

    如何从 WordPress 网站移除渲染阻塞？

    从网站中移除渲染阻塞的成功方法之一是在其他网站元素之前延迟解析。 另一种最小化渲染的方法是将 JS 和 CSS 连接在一起。

    我可以使用哪些工具来识别我网站上的非关键 JS？

    要确定 JavaScript 是否对您的网站至关重要，您可以访问以下工具。

    • Google PageSpeed 洞察：这将帮助您确定网站速度和性能的核心不足点。 此外，此工具还提供了一些建议，以提高您的网站性能和加载时间。
    • 有了这个，您的网站将收到不同颜色的分数，例如红色、橙色和绿色。 红色表示性能低下，橙色表示平均，绿色表示良好。
    • Pingdom 网站速度测试：它是另一种流行的跟踪和监控性能的工具。 使用此工具，您可以在七个不同的位置测试您的网站性能。
    • 此外，此工具还提供提高页面速度的建议，以便您享受更好的网站速度和性能

    您可以通过自动优化插件推迟 WordPress 中 JavaScript 的解析吗？

    使用自动优化工具，您可以轻松推迟 JavaScript 的解析。 为确保该过程应该像往常一样安装和激活插件。 安装并激活插件后，访问设置并选择 JS、CSS 和 HTML 选项。

    现在优化 JavaScript 代码选项，您将解锁这些选项。 现在勾选 Aggregate JS-files 并留下其他文件。

    此外，该插件允许您排除不想呈现的 JavaScript。 进行更改后，单击保存按钮。

    包起来
    为了优化您的网站并减少加载时间，在 WordPress 中延迟解析 JavaScript 非常重要。

    我们希望通过本文您了解鹿解析的含义以及它如何帮助您的网站排名在搜索页面的顶部。 祝你好运！