Асинхронная загрузка JavaScript в WordPress

Философия WordPress рекомендует оформлять загрузку JacaScript в файле functions.php вашей темы. Но предлагаемый кодексом код не учитывает атрибут асинхронной загрузки async.

Правила загрузки JavaScript

Для ускорения загрузки вашего сайта ссылки на файлы JavaScript лучше располагать в конце HTML документа перед закрывающим тегом BODY.

Чтобы браузер не ждал загрузки скриптов и продолжал обрабатывать содержимое вашей страницы файлы JavaScript нужно загружать асинхронно, указав параметр async.

Например так:

<script type='text/javascript' async src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'></script>

Ранее я писал как правильно подключать JavaScript к шаблону сайта на WordPress.

Если вы используете подобный метод, то обратили внимание, что WordPress не формирует параметр async для загружаемых скриптов.

Как добавить async для JavaScript в WordPress

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

Чтобы реализовать асинхронную загрузку добавьте следующий код в файл functions.php вашей темы:

function add_async_attribute($tag, $handle) {
   // добавьте дескрипторы (названия) скриптов в массив ниже
   $scripts_to_async = array('myscript-1', 'myscript-2', 'myscript-3');
   
   foreach($scripts_to_async as $async_script) {
      if ($async_script === $handle) {
         return str_replace(' src', ' async src', $tag);
      }
   }
   return $tag;
}

add_filter('script_loader_tag', 'add_async_attribute', 10, 2);

Важное замечание. Замените myscript-1, myscript-2, myscript-3 на дескрипторы своих скриптов, которые необходимо загружать асинхронно.

То есть если вы загружаете скрипты следующим кодом:

то дискрипторами будут являться ‘jquery’ и ‘adsbygoogle’. И строка массива асинхронных скриптов будет выглядеть так:

$scripts_to_async = array('adsbygoogle', 'jquery');

Полученный HTML код загрузки JavaScript будет выглядеть следующим образом:

<script type='text/javascript' async src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'></script>

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

Похожий вариант асинхронной загрузки скриптов в WordPress предложил Тимур Камаев — https://wp-kama.ru/hook/script_loader_tag.

Альтернативный код асинхронной загрузки скриптов в WordPress

Для асинхронной загрузки JavaScript в WordPress добавьте хеш-тег #asyncload к адресу загрузки скрипта, например:

wp_enqueue_script( 'adsbygoogle', '//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js#asyncload', false, null, true );

Код преобразования для асинхронной загрузки в таком случае будет выглядеть так (добавьте его в файл functions.php вашей темы):

function add_async_forscript($url)
{
    if (strpos($url, '#asyncload')===false)
        return $url;
    else
        return str_replace('#asyncload', '', $url)."' async='async"; 
}
add_filter('clean_url', 'add_async_forscript', 11, 1);

Полученный HTML код загрузки JavaScript будет выглядеть следующим образом:

<script type='text/javascript' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js' async='async'></script>

В данном примере вы с помощью хеш-тега указываете какой скрипт загружать асинхронно. А функция преобразования при нахождении его добавляет атрибут асинхронной загрузки.

Благодарности

При написании статьи были использованы следующие ресурсы:

1. https://matthewhorne.me/defer-async-wordpress-scripts/
2. https://stackoverflow.com/questions/18944027/how-do-i-defer-or-async-this-wordpress-javascript-snippet-to-load-lastly-for-fas/20672324#20672324