Сверхбыстрые VPS на SSD дисках! Скидка 50% по промокоду moon2018!

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

 1 апреля 2018      
 WordPress      
 комментария 2      
 79

Философия 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 на дескрипторы своих скриптов, которые необходимо загружать асинхронно.

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

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

то дискрипторами будут являться ‘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
Поделись этой страницей с друзьями!

Прочтите это обязательно

Как включить SSH доступ для пользователя root на Debian

По-умолчанию, и это правильно, подключение по SSH для пользователя root в операционной системе Debian запрещен ...

GNU Linux - CentOS / Debian debian root ssh Далее

15 препятствий на пути к эффективной работе вашей команды

Инфографику предоставила Wrike - Программа Управления Проектами ...

Полезное wrike программа управления проектами система управления проектами Далее

Обсуждение: 2 комментария

  1. klim:

    «Для ускорения работы вашего сайта ссылки на загрузку JavaScript лучше располагать в конце HTML документа перед закрывающим тегом HEAD.» Может все же BODY?

    Ответить
    1. О, да! Спасибо, исправил.

      Ответить

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Нажимая кнопку "Отправить" Вы даёте свое согласие на обработку введенной персональной информации в соответствии с Федеральным Законом №152-ФЗ от 27.07.2006 "О персональных данных", на условиях и для целей определенных политикой конфиденциальности.

2018 © Технический блог
SQL - 111 | 0,244 сек. | 8.33 МБ
доступность сайта