如何使用延迟解析 JavaScript 来提升您的网站

页面速度是您网站最重要的方面之一。无论您的网站提供多少服务，没有人愿意在您的网站加载前等待几分钟。同时，如果您的网站加载速度更快，则更有可能留住访问者。

此外，Page Speed 还决定了您的网站在搜索引擎中的排名。它可以帮助爬虫了解您的网站的有效性和维护性。在本教程中，我们将看到如何在 WordPress 中延迟解析 JavaScript。

为什么延迟解析 JavaScript 很重要?

要完全掌握延迟解析 JavaScript 的概念，您需要了解浏览器如何呈现网页。当您的浏览器请求一个页面时，您的 Web 服务器会将其发回，该页面以 HTML 文档的形式下载。

HTML 文档包含几个元素和资源，浏览器在下载附加资源时读取这些元素和资源。最后，只有在下载了所有资源后才会呈现页面。

创建令人惊叹的网站

使用最好的免费页面构建器 Elementor

现在开始

较大的资源需要更多的时间来下载。图像占这些资源的大部分，这就是优化图像很重要的原因。此外，您可以通过识别它们来推迟下载不必要的脚本并加快您的网页速度。

如何识别要延迟的脚本?

对于不使用太多 JavaScript 的最小网站，可能没有对加载页面至关重要的脚本。相反，对于一个相当复杂的网站来说，对所有脚本进行详细分析以了解哪些脚本对于页面加载至关重要。

消除不必要脚本的第一种方法是逐个删除脚本并同时检查 JavaScript 控制台中的任何错误。同时，这种方法需要相当大的努力和有关 JavaScript 的知识。

另一种方法是使用速度测试工具来评估哪些脚本对于页面加载至关重要。其中一个工具包括GTmetrix ，您只需输入网站的 URL 即可显示结果。在 Page Speed 选项卡中，您将找到 Defer Parsing For JavaScript 部分，该部分将显示在扩展页面呈现期间加载的不必要脚本的列表。

使用这些信息，您可以删除不考虑页面呈现的脚本。

延迟或异步属性

有两种方法可以在页面渲染时消除脚本的下载。

首先，通过在 script 标签中添加Defer属性，可以确保浏览器不下载资源，除非页面解析完成。一旦页面的渲染和解析完成，浏览器就可以下载所有的延迟脚本。下面给出了一个示例脚本标记，它显示了如何将延迟属性添加到 HTML 页面。

<script src="path/to/script" defer></script>

另一方面，您可以将异步属性添加到脚本标记。这将引导浏览器单独加载脚本。这意味着浏览器将在遇到代码时开始下载资源，同时单独解析 HTML。下面给出的示例脚本显示了如何添加异步属性。

<script src="path/to/script" async></script>

这两个属性在下载资源的方式上有所不同。对于一个最小的网站，要注意 async 和 defer 属性之间的差异并不容易。同时，对于更复杂的 Web 应用，推荐使用 defer 技术。

延迟解析 JavaScript

以下是可用于延迟解析 JavaScript 的两种方法。

1.自定义functions.php文件

如果你习惯了 WordPress 开发，你一定知道直接 dd 脚本 HTML 标记不是一个好主意。但是您可以使用内置的 WordPress 函数来请求资源。

要向脚本添加 async 或 defer 属性，您应该将以下函数添加到 WordPress 主题的 functions.php 文件中。

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;
 }

在将 defer 和 async 属性添加到脚本标记之前，请确保将每个脚本排入队列。

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');
}