如何将此WordPress javascript片段推迟或异步加载,以加快页面加载速度？

Question

我有各种javascripts,这是我的一个WordPress域中必需的插件,我知道它在php文件中的位置.

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

我已经阅读了关于defer ='defer'和javascript中的异步函数,我认为其中一个将完成我想要完成的任务.但是我不明白我是如何在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片段是最后加载并加快页面加载时间？在所有浏览器中增加页面加载时间的理想方法是什么？感谢任何人提供的任何指导!

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

因此,您可以在不更改代码的情况下将async添加到任何脚本,只需将#asyncload添加到脚本URL,如下所示:

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

Answer 2

这篇博客文章链接到两个感兴趣的插件:

异步Javascript
通过使用head.js异步加载javascript来提高页面加载性能

WP Deferred Javascripts
使用LABJS(异步javascript库)推迟使用wp_enqueue_scripts添加的所有javascripts的加载.

没有测试过它们但是检查了代码,他们用WordPress脚本排队进程做了很多花哨的东西.

但随后WPSE来救援:

// Adapted from https://gist.github.com/toscho/1584783
add_filter( 'clean_url', function( $url )
{
    if ( FALSE === strpos( $url, '.js' ) )
    { // not our file
        return $url;
    }
    // Must be a ', not "!
    return "$url' defer='defer";
}, 11, 1 );

Answer 3

为了保持模块化和包含所有内容,以下方法通过在$ handle名称后附加一个小标识符来动态选择如何使用async或defer属性嵌入标记:

/**
* 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在这里激发了我的答案.

Answer 4

使用不同过滤器的另一种解决方案,可用于定位特定脚本句柄:

function frontend_scripts()
{
    wp_enqueue_script( 'my-unique-script-handle', 'path/to/my/script.js' );
}
add_action( 'wp_enqueue_scripts', 'frontend_script' );

function make_script_async( $tag, $handle, $src )
{
    if ( 'my-unique-script-handle' != $handle ) {
        return $tag;
    }

    return str_replace( '<script', '<script async', $tag );
}
add_filter( 'script_loader_tag', 'make_script_async', 10, 3 );

Answer 5

一种简化的方法.添加到您的functions.php文件,使Word在JavaScript中异步

// Make JavaScript Asynchronous in Wordpress
add_filter( 'script_loader_tag', function ( $tag, $handle ) {    
    if( is_admin() ) {
        return $tag;
    }
    return str_replace( ' src', ' async src', $tag );
}, 10, 2 );

Answer 6

要控制哪些js文件延迟并避免冲突,您可以将变量附加到wp_register_script函数中的url,如下所示.

wp_register_script( 'menu', get_template_directory_uri() . '/js/script.js?defer', array('jquery'), '1.0', true );

然后换行:

if ( FALSE === strpos( $url, '.js' ))

至:

if ( FALSE === strpos( $url, '.js?defer' ))

新过滤器看起来像这样.

add_filter( 'clean_url', function( $url )
{
    if ( FALSE === strpos( $url, '.js?defer' ) )
    { // not our file
    return $url;
    }
    // Must be a ', not "!
    return "$url' defer='defer";
}, 11, 1 );

Answer 7

很少的修改代码Mike Kormendy，它允许您一次添加2个属性：

// Async load
function add_asyncdefer_attribute($tag, $handle)
{
    $param = '';
    if ( strpos($handle, 'async') !== false ) $param = 'async ';
    if ( strpos($handle, 'defer') !== false ) $param .= 'defer ';
    if ( $param )
        return str_replace('<script ', '<script ' . $param, $tag);
    else
        return $tag;
}

结果：

<script async defer type='text/javascript' src='#URL'></script>