06.03.20

Добавляем атрибуты Defer & Async для скриптов WordPress

Добавляем атрибуты Defer & Async для скриптов WordPress

Приветствую, дорогие читатели моего блога! При создании и оптимизации web-ресурса достаточно часто появляется необходимость сделать отложенную или асинхронную подгрузку каких-либо скриптов.

Ниже, мы узнаем как сделать асинхронную и отложенную загрузку JavaScript в WordPress. А также, попутно и подробно разберем что такое Defer & Async.

С танцами и бубном

Ранее, чтобы реализовать подобное в WordPress, нужно было довольно громко орать и радостно стучать в шаманский бубен.

Однако не так давно, начиная с версии движка 4.1 был добавлен новенький фильтр, который, наконец-то, осуществляет незамысловатый метод добавления в js сценарии необходимых атрибутов, а что самое главное без участия шамана.

apply_filters('script_loader_tag', string $tag, string $handle, string $src);

Установка

function cmswp_add_async_attribute($tag, $handle) {
    // Указываем название скрипта
    if ( 'my-js-async' !== $handle )
        return $tag;
    return str_replace( ' src', ' defer="defer" src', $tag );
}
add_filter('script_loader_tag', 'cmswp_add_async_attribute', 10, 2);

Если нужно применять async, просто заменяем defer на async. Добавляем этот код в файл functions.php

Не забудьте изменить «название скрипта», оно идет первым параметром, т.е. в примере выше это my-js-async.


Читайте также:


Разновидность

Какой тег в том или ином случаи использовать, полностью и напрямую зависит от «характера» самого js, для этого имеется три допустимых варианта.

Стандарт

Без применения каких либо атрибутов — обычная загрузка сценариев браузером.

Атрибут Defer

Останавливает выполнение js до того времени, пока HTML-парсер не закончит свои дела.

Атрибут Async

Начинает выполняться тогда, когда скрипт полностью готов и не обрывает разбор HTML кода.

Есть одно, но!

Нужно все проверять и тщательно тестировать, так как эти два атрибута могут поломать весь сайт.

Если появляются какие-то нюансы, артефакты или вовсе серьезные ошибки, связанные с каким-либо из этих атрибутов, то просто-напросто не применяйте их для какого то конкретного js.

Сразу нескольких сценариев

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

Можно добавить любой из этих отрывков кода в свой шаблон, в файл functions.php, но не забудьте отредактировать этот код, указав в нем необходимые названия js скриптов.

Defer

function cmswp_add_defer_attribute($tag, $handle) {
   // Перечисляем название скриптов через запятую
   $scripts_to_defer = array('my-js-one', 'my-js-two');
 
   foreach($scripts_to_defer as $defer_script) {
      if ($defer_script === $handle) {
         return str_replace(' src', ' defer="defer" src', $tag);
      }
   }
   return $tag;
}
add_filter('script_loader_tag', 'cmswp_add_defer_attribute', 10, 2);

Async

function cmswp_add_async_attribute($tag, $handle) {
   // Перечисляем название скриптов через запятую
   $scripts_to_async = array('my-js-one', 'my-js-two');
 
   foreach($scripts_to_async as $async_script) {
      if ($async_script === $handle) {
         return str_replace(' src', ' async="async" src', $tag);
      }
   }
   return $tag;
}
add_filter('script_loader_tag', 'cmswp_add_async_attribute', 10, 2);

Если что-то не получается или есть вопрос, дайте знать в комментариях, вместе решим задачу!

С вами был Дмитрий! А вам, самосвал $!

Не забудь про опросник
Как зарабатываешь мешки с $ ?