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

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

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

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

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

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

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

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

<script async src="https://gladweb.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 );

Заключение

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

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

Понравилась статья? Поделиться с друзьями:
WpKot - мир, блог, интернет
Комментариев: 8
  1. Asa

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

    1. Asa

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

      // асинхронный 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 );

  2. Erto

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

  3. Бэлль

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

    1. WpKot (автор)

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

  4. CDprint

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

  5. Сергей

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

  6. Смешной

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

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: