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/

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

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

function wpdemo_enqueue_scripts() {
    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_action( 'wp_enqueue_scripts', 'wpdemo_enqueue_scripts' );

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

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