Включаем асинхронную загрузку JavaScript на WordPress
Опубликовано: 01.09.2018
Сейчас я расскажу Вам об интересном способе, который поможет вам ускорить свой сайт на WordPress за счет параллельной загрузки скриптов.
Как сделать прелоадер? ► CSS/JS
Для чего это нужно?
Все очень просто. Современный сайт представляет из себя сборник самых разнообразных скриптов, тегов, сниппетов, стилей, шрифтов и всего прочего. Как вы понимаете, чем больше «плюшек», тем дольше грузится ваш сайт. Что касается 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 );Заключение
Что можно добавить в заключение. Данный скрипт, возможно, подойдет не всем, так-как, кто его знает, какие скрипты подключены именно у вас, поэтому, ставьте и экспериментируйте. Минуса у такого скрипта быть не может, разве что несовместимость с конкретным сайтом ввиду его специфики. Это был еще один маленький шаг по большой оптимизации вашего сайта.
Желаю Вам удачи!