async & defer в WordPress – ускоряем загрузку JavaScript

async & defer – это очень полезные механики, которые позволяют существенно ускорить загрузку страниц и их отрисовку для посетителей. Однако они относительно новые в мире JavaScript. И потому в мире WordPress еще существует много скриптов которые не используют их. Но это легко решается через wp_script_add_data.

Описание метода wp_script_add_data есть тут https://developer.wordpress.org/reference/functions/wp_script_add_data/

Как настроить?

Выглядит это примерно так:

add_action( 'wp_enqueue_scripts', function(){
    wp_enqueue_script( 'wpdemo-respond', get_template_directory_uri().'/js/respond.min.js' );
    wp_script_add_data( 'wpdemo-respond', 'conditional', 'lt IE 9' );
 
    wp_enqueue_script( 'wpdemo-html5shiv',get_template_directory_uri().'/js/html5shiv.js');
    wp_script_add_data( 'wpdemo-html5shiv', 'defer', true );
});

//add support for async and defer params
add_filter( 'script_loader_tag', function($tag, $handle){
    if ( wp_scripts()->get_data( $handle, 'defer' ) ) {
        $tag = str_replace( '></', ' defer></', $tag );
    }
    if ( wp_scripts()->get_data( $handle, 'async' ) ) {
        $tag = str_replace( '></', ' async></', $tag );
    }
    return $tag;
}, 10, 2 );

Пример как добавляют async & defer в TwentyTwenty

Еще для общего развития полезно посмотреть как внедряют async & defer в новой теме для WordPress TwentyTwenty https://github.com/WordPress/twentytwenty/pull/30/files