WpKot.Ru
Назад

Включаем асинхронную загрузку JavaScript на WordPress

Опубликовано: 07.05.2017
Время на чтение: 2 мин

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

Для чего это нужно?

Все очень просто. Современный сайт представляет из себя сборник самых разнообразных скриптов, тегов, сниппетов, стилей, шрифтов и всего прочего. Как вы понимаете, чем больше «плюшек», тем дольше грузится ваш сайт. Что касается JavaScript, тут отдельная песня. Замечали ли вы такой косяк, когда страница вроде бы загрузилась, но вкладка показывает, что страница все еще грузится? Так бывает, когда какой-то отдельный скрипт не прогрузился до конца. Ладно бы так, иногда страница вообще простаивает до тех пор, пока не загрузится тот самый, вроде бы и не совсем важный скрипт. А у ваших пользователей просто может не хватить терпения.

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

Данное понятие полностью противоположно синхронной загрузке, коей является обычный скрипт вида:

<script src="https://wpkot.ru/script.js" type="text/javascript"></script>

Асинхронный вызов скрипта выглядит так:

<script async src="https://wpkot.ru/script.js" type="text/javascript"></script>

Всего лишь добавился соответствующий атрибут.

Теперь скрипты не будут заставлять ваших пользователей ждать своей полной загрузки, все будет проходить параллельно.

Как автоматизировать процесс?

Понятное дело, если скрипты вы подключаете вручную и их не много, то сделать это можно и ручками, просто дописав соответствующий атрибут к коду вызова. Но как это дело автоматизировать, если, например, у вас WordPress с кучей скриптов, которые, вдобавок, вызываются автоматически?

Находим уже знакомый нам файл functions.php вашей темы и вставляем туда (например в конец) следующий код:

// асинхронный javascript
function wcs_defer_javascripts ( $url ) {
    if ( FALSE === strpos( $url, '.js' ) ) return $url;
    if ( strpos( $url, 'jquery.js' ) ) return $url;
    return "$url' async='async";
}
add_filter( 'clean_url', 'wcs_defer_javascripts', 11, 1 );

Заключение

Что можно добавить в заключение. Данный скрипт, возможно, подойдет не всем, так-как, кто его знает, какие скрипты подключены именно у вас, поэтому, ставьте и экспериментируйте. Минуса у такого скрипта быть не может, разве что несовместимость с конкретным сайтом ввиду его специфики. Это был еще один маленький шаг по большой оптимизации вашего сайта.

Желаю Вам удачи!

Поделиться
Комментарии:
  • Asa
    Опубликовано: 04.08.2017 Ответить на сообщение

    Добрый день.
    Обратите внимание, скрипт для асинхронной загрузки JavaScript на WordPress, блокирует визуализацию общих настроек Yoast SEO (если кто использует).

    • Asa
      Опубликовано: 04.08.2017 Ответить на сообщение

      Решение в небольшой правке кода:

      // асинхронный javascript
      function wcs_defer_javascripts ( $url ) {
      if( is_admin() ) return $url;
      if ( FALSE === strpos( $url, '.js' ) ) return $url;
      if ( strpos( $url, 'jquery.js' ) ) return $url;
      return "$url' defer='defer";
      }
      add_filter( 'clean_url', 'wcs_defer_javascripts', 11, 1 );

  • Erto
    Опубликовано: 05.12.2017 Ответить на сообщение

    А как автоматизировать асинх. загрузку для всех, но отключить для определенного скрипта?

  • Бэлль
    Опубликовано: 18.01.2018 Ответить на сообщение

    Добрый день. А вы не подскажите подобный код для асинхронной загрузки css?
    Заранее спасибо.

    • WpKot
      Опубликовано: 21.01.2018 Ответить на сообщение

      Добрый, такого кода у меня нет. А в чем смысл асинхронной загрузки css? Может все же лучше объединить несколько css и сжать их?

  • CDprint
    Опубликовано: 17.06.2018 Ответить на сообщение

    После этого включения на моем сайте показатели PageSpeed Insights "Для компьютера" выросли с 56 до 71. Так что действительно полезная фишка, Спасибо!!!

  • Сергей
    Опубликовано: 27.02.2019 Ответить на сообщение

    Раз люди говорят, что работает, и я озадачусь. Потом отпишусь.

  • Смешной
    Опубликовано: 02.04.2019 Ответить на сообщение

    Скрипт реально полезный, для тех, кто знает как его применить. Спасибо!

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.