如何延迟或同步此WordPress javascript代码段以最后加载以加快页面加载时间？

php javascript asynchronous wordpress

2022-08-30 08:49:55

我有各种javascript，它们是我的WordPress域中的必要插件，我知道它在php文件中的哪个位置被调用。

我正在采取一切措施来加快页面加载时间，网络上的每个速度测试人员都说如果可能的话，推迟javascript。

我已经阅读了javascript中的defer='defer'和异步函数，我认为其中一个将完成我试图完成的任务。但是我不明白如何在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' );

}

我已经读到，最好做这样的事情，以加快页面加载时间：

<script defer async src="..."></script>

但是我不知道如何在php文件中完成此操作。我想用我所有的javascript文件来做到这一点。

如何完成延迟或同步此javascript代码片段到最后加载并加快页面加载时间？在所有浏览器中增加页面加载时间的理想方法是什么？感谢任何人都可以提供的任何指导！

答案 1

或者更通用的方式：

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

因此，您可以在不更改代码的情况下将异步添加到任何脚本中，只需将#asyncload添加到脚本url中，如下所示：

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

答案 2

为了保持某种程度的模块化和包罗万象，以下方法动态选择如何将标记与异步或延迟属性嵌入，只需将一个小标识符附加到$handle名称中：

/**
* Add async or defer attributes to script enqueues
* @author Mike Kormendy
* @param  String  $tag     The original enqueued <script src="...> tag
* @param  String  $handle  The registered unique name of the script
* @return String  $tag     The modified <script async|defer src="...> tag
*/
// only on the front-end
if(!is_admin()) {
    function add_asyncdefer_attribute($tag, $handle) {
        // if the unique handle/name of the registered script has 'async' in it
        if (strpos($handle, 'async') !== false) {
            // return the tag with the async attribute
            return str_replace( '<script ', '<script async ', $tag );
        }
        // if the unique handle/name of the registered script has 'defer' in it
        else if (strpos($handle, 'defer') !== false) {
            // return the tag with the defer attribute
            return str_replace( '<script ', '<script defer ', $tag );
        }
        // otherwise skip
        else {
            return $tag;
        }
    }
    add_filter('script_loader_tag', 'add_asyncdefer_attribute', 10, 2);
}

用法示例：

function enqueue_my_scripts() {

    // script to load asynchronously
    wp_register_script('firstscript-async', '//www.domain.com/somescript.js', '', 2, false);
    wp_enqueue_script('firstscript-async');

    // script to be deferred
    wp_register_script('secondscript-defer', '//www.domain.com/otherscript.js', '', 2, false);
    wp_enqueue_script('secondscript-defer');


    // standard script embed
    wp_register_script('thirdscript', '//www.domain.com/anotherscript.js', '', 2, false);
    wp_enqueue_script('thirdscript');
}
add_action('wp_enqueue_scripts', 'enqueue_my_scripts', 9999);

输出：

<script async type='text/javascript' src='//www.domain.com/somescript.js'></script>
<script defer type='text/javascript' src='//www.domain.com/otherscript.js'></script>
<script type='text/javascript' src='//www.domain.com/anothercript.js'></script>

感谢@MattKeys @crissoca在这里启发我的答案。