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

Разработчики WordPress очень часто неправильно ставили в очередь свои скрипты, это, зачастую, было связано с тем, что у WordPress раньше не было простого способа добавлять атрибуты async и defer.

Начиная с версии 4.1, был представлен новый фильтр script_loader_tag, который, предоставляет простой способ добавить атрибуты async/defer без ковыряний в заднем проходе.

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

Добавьте предложеный код в 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.

Ссылки

Источник: https://www.kobzarev.com/wordpress/defer-async-wordpress-scripts/

Михаил Кобзарёв

Суровый русский тимлид. Жил в Магадане, в офисе московских веб студий и в Тульской деревне. Виртуозно знает WordPress, PHP, ООП, Vue.js и вот это вот все. Делает крутые высоконагруженные сайты, поэтому уже почти захватил весь рынок WordPress разработки в России. Не дает никому делать сайты без спроса. Ведет блог о разработке, дайджест в телеграмме и в ВК. Любит сиськи, баню и радиоэлектронику. 100% патриот (но это не точно). Тролль 542 уровня. Ездит в отпуск раз в 5 лет.

Добавить комментарий

%d такие блоггеры, как: