Верх страницы
Обложка к записи Добавление атрибутов defer и async к WordPress скриптам
Время для прочтения: 0 мин. 8 сек.

Добавление атрибутов 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.

Ссылки

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

Русский разработчик с 20-ти летним стажем. Работаю с PHP, ООП, JavaScript, Git, WordPress, Битрикс, Joomla, Drupal, Opencart, DLE, Laravel, Moonshine, SuiteCRM.

Оптимизирую сайты под Google Page Speed, настраиваю импорты для больших магазинов на WooCommerce + WP All Import. Пишу плагины на заказ. Все мои услуги.

Веду блог о разработке, дайджест в телеграмме и в ВК.

Вы всегда можете нанять меня.

Комментарии
Подписаться
Уведомить о
guest

0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
Предыдущая запись
Следующая запись

Давайте дружить
в Телеграме

Авторский блог вашего покорного слуги в Telegram про web, программирование, алгоритмы, инструменты разработчика, WordPress, Joomla, Opencart, Laravel, Moonshine, фильмы и сериалы