如何延迟或异步加载这个 WordPress JavaScript 代码片段，以便使页面加载时间更快？

95 浏览
0 Comments

如何延迟或异步加载这个 WordPress JavaScript 代码片段，以便使页面加载时间更快？

我有各种Javascript插件，这些插件在我的一个WordPress域中是必要的，并且我知道从哪个php文件中调用它。

我正在采取一切措施来加速页面加载，每个网页上的速度测试器都建议如果可能的话推迟Javascript。

我已经了解了javascript中的defer =\'defer\'和async函数，我认为其中一个将实现我尝试实现的内容。但是我不知道如何在php文件中实现这个。

例如，这是一个特定插件的php文件中的片段，其中调用了Javascript文件:

function add_dcsnt_scripts() {
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'dcsnt', dc_jqsocialtabs::get_plugin_directory() . '/js/jquery.social.media.tabs.1.7.1.min.js' );
}

我已经阅读过最好是这样才能更快地加载页面:

但是我不知道如何在php文件中实现这一点。我想对所有我的Javascript文件都这样做。

我如何延迟或异步加载这个Javascript片段，以使它最后加载和加速页面加载时间？增加所有浏览器的页面加载时间的理想方法是什么？谢谢任何人可以提供的指导！

admin 更改状态以发布 2023年5月23日
0

2 答案

0 Comments

为了使事情更具模块性和全面性，以下方法动态选择如何嵌入具有异步或延迟属性的标记，只需将一个小标识符附加到 $handle 名称中即可：

/**
* Add async or defer attributes to script enqueues
* @author Mike Kormendy
* @param  String  $tag     The original enqueued

感谢 @MattKeys @crissoca 在这里提供我的答案的灵感。

0
0 Comments

更通用的方式：

function add_async_forscript($url)
{
    if (strpos($url, '#asyncload')===false)
        return $url;
    else if (is_admin())
        return str_replace('#asyncload', '', $url);
    else
        return str_replace('#asyncload', '', $url)."' async='async"; 
}
add_filter('clean_url', 'add_async_forscript', 11, 1);

因此，您可以在不更改代码的情况下将 async 添加到任何脚本中，只需将 #asyncload 添加到脚本 URL 中，例如：

wp_enqueue_script('dcsnt', '/js/jquery.social.media.tabs.1.7.1.min.js#asyncload' )

0