Добавление атрибутов defer и async к WordPress скриптам

Как использовать

Добавьте предложеный код в functions.php:

function mihdan_add_async_attribute( $tag, $handle ) {
    if ( 'my-js-handle' !== $handle ) {
        return $tag;
    }

    return str_replace( ' src', ' async="async" src', $tag );
}
add_filter( 'script_loader_tag', 'mihdan_add_async_attribute', 10, 2 );

Если вы хотите использовать атрибут defer, то просто замените в сниппете async="async на defer="defer".

Где взять идентификатор обработчика my-js-handle? Его вы можете подсмотреть в коде подключения скриптов внутри темы или плагина при помощи функции wp_register_script() и wp_enqueue_script() (первый аргумент):

wp_register_script( 'my-js-handle', $src, $deps, $ver, $in_footer );

Добавления к нескольким скриптам сразу

Что делать, если надо добавить атрибут defer сразу к нескольким скриптам? Собрать все идентификаторы обработчиков в массив и пройтись по ним циклом в том же хуке:

function mihdan_add_defer_attribute( $tag, $handle ) {
   
	$handles = array(
		'my-js-handle',
		'another-handle',
	);
   
   foreach( $handles as $defer_script) {
      if ( $defer_script === $handle ) {
         return str_replace( ' src', ' defer="defer" src', $tag );
      }
   }

   return $tag;
}
add_filter( 'script_loader_tag', 'mihdan_add_defer_attribute', 10, 2 );

Для атрибута async код будет выглядеть аналогично, за исключением девятой строки, где надо просто заменить defer="defer" на async="async.

Ссылки

• Add Defer & Async Attributes to WordPress Scripts