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

Заключение

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

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

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)

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

WpKot.ru - Джамил

От автора

Нет лучшей мотивации для автора блога, чем Ваше внимание. Буду рад если вы оставите пару слов после статьи в комментариях или поделитесь ею в социальных сетях. В любом случае я уже рад, что вы мой читатель 🙂

Как удалить стандартный jquery в wordpress... Если вы хоть раз задумывались о масштабной оптимизации WordPress сайта, то вы наверняка задавались этим вопросом. Собственно, а как убрать (удалить) с...
WordPress — высокая нагрузка на хостинг. 2 х... Многие владельцы сайтов на WordPress задаются вопросами: «Почему мой сайт создает большую нагрузку на хостинг?». И если одна половина из этих вебмасте...
WordPress — запрещаем индексирование страниц... При очередном анализе своего сайта, я обнаружил страшную находку!Обратите внимание, какие страницы моего блога проиндексировал Яндекс. Вам это...
Ускоряем WordPress — перемещаем весь JavaScr... Если вы зайдете на специальные сервисы по проверке скорости и оптимизации сайта (пример PageSpeed Insights), то все они укажут вам на то, что в самом ...
Переход WordPress на HTTPS на примере моего блога... Вот и пришла пора переводить свой блог на HTTPS протокол. Хоть и до сих пор не вижу смысла, учитывая что у меня отключена регистрация пользователей, н...

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

  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 );

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

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