Включаем асинхронную загрузку 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 );

Заключение

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

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


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

Как удалить стандартный jquery в wordpress Если вы хоть раз задумывались о масштабной оптимизации WordPress сайта, то вы наверняка задавались э...
WordPress — высокая нагрузка на хостинг. 2 хитрости для защиты с... Многие владельцы сайтов на WordPress задаются вопросами: «Почему мой сайт создает большую нагрузку н...
WordPress — запрещаем индексирование страниц с изображениями (At... При очередном анализе своего сайта, я обнаружил страшную находку! Обратите внимание, какие ст...
Ускоряем WordPress — перемещаем весь JavaScript в Footer (подвал... Если вы зайдете на специальные сервисы по проверке скорости и оптимизации сайта (пример PageSpeed In...
Что меня раздражает в твоем сайте? В этом посте я решил собрать самые раздражающие факторы, влияющие на ваших пользователей. Какие-то п...

Комментарии к посту

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

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

      // асинхронный 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. А как автоматизировать асинх. загрузку для всех, но отключить для определенного скрипта?

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

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

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

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

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