Главная Часть 1. Создание блога Глава 8. Техническая часть Асинхронная загрузка JavaScript на сайте? Легко!

Асинхронная загрузка JavaScript на сайте? Легко!

Доброго времени суток, друзья!

У большинства из нас в шапке сайта или в футере размещено много различных скриптов. У кого-то они вынесены в отдельные файлы, а бывают сайты, на которых javascript код внедрен прямо в html страницу. Суть всегда одна - скрипты хоть и выполняют много полезных функций, их негативное влияние на скорость загрузки страницы очевидно. Как же оставить скрипты и при этом ускорить загрузку сайта? Загружайте их асинхронно!

Что за JavaScript скрипты?

Начнем с объяснения для тех, кто не в курсе. На большинстве сайтов есть какие-то интересные фишки: кнопки, нажав на которые плавно открываются\закрываются различные панели, вкладки меню, счетчики, калькуляторы или что-то подобное. Лично мне сейчас сложно представить более-менее интересный сайт без скриптов.

Тем, кто использует CMS, например, WordPress - скрипты вполне знакомое явление. Во время загрузки страницы всегда выполняются скрипты, и пока они не будут выполнены, страница не загрузится. Вот наглядный пример того, как загружается страница и скрипты на ней:

загрузка страницы и скриптов

Как видим, загрузка страницы прерывается для того, чтобы начать загрузку скриптов. И после того, как скрипты загружены, начинается их выполнение. И только после того, как со скриптами разобрались, продолжается загрузка страницы.

Подключается скрипт очень просто:

Думаю, после такого объяснения всем сразу стало ясно, как это плохо, когда на сайте подключено множество скриптов.

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

С выходом html5 стала возможна асинхронная загрузка скриптов на сайте. Что это значит? Это значит, что можно сделать так, чтобы сначала страница загрузилась, а затем уже начали выполняться скрипты. Это полезно делать, если скриптов подключено много.

Помимо стандартного типа загрузки выделяют еще два: async и defer.

Тип async

Подключается вот так:

Подключая файлы типом async Вы разрешаете браузеру параллельно с загрузкой страницы загружать и скрипты. То есть, открывая сайт, например, wpguru.ru, вместо одной обычной операции, начинают выполняться сразу две параллельных: идет загрузка всех скриптов и загрузка самой страницы.

Однако после того, как были загружены скрипты, загрузка страницы прекращается. Начинают выполняться скрипты, которые уже загрузились. После того, как все скрипты выполнятся, загрузка страницы продолжится. Вот наглядное представление:

тип загрузки async

Тип defer

Подключается вот так:

Мой любимый тип, хоть и не ко всем скриптам хорошо подходит. Дело в том, что в данном случае загрузка страницы и загрузка скриптов происходят параллельно не прерывая работу друг друга. В этом defer полностью схож с типом async.

Однако в отличии от последнего, defer сначала позволяет странице полностью загрузиться, и когда пользователь уже видит сайт и может с ним работать, начинается выполнение скриптов. Это заметно ускоряет сайт, вот только подходит не ко всем скриптам.

Если Ваши скрипты меняют внешний вид на сайте, то будьте готовы к тому, что пользователь после загрузки страницы будет видеть сайт без всяких изменений, которые производят скрипты. И только потом на его глазах эти изменения начнут происходить.

Посмотрим на наглядную схему:

тип defer javascript

Плагин асинхронной загрузки для WordPress

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

Из-за частых обновлений тех же плагинов, как Вы знаете, все изменения будут удалены. Поэтому смысла там что-то править нет. Остается браться за плагин. Сразу скажу, я не любитель плагинов, и плагин, речь о котором пойдет ниже я не использую. Я его тестировал, и на скорости это отразилось в худшую сторону.wp_acync

Да-да, как ни странно. По гугл-спид сервису скорость открытия моего блога равна 90. А используя этот плагин скорость падала до 88. Думаю дело в том, что плагину нужно время на поиск скриптов, добавления в них типа асинхронной загрузки.

Плагин называется Async JS and CSS.

Настроек там почти нет: достаточно выбрать тип, который Вы предпочитаете. О типах мы говорили Выше. Еще плагин позволяет асинхронно загружать css стили. Это я считаю лишним, т.к. стили всегда отвечают за внешний вид, и мне не особо понравился результат: заходишь на блог, и через какое-то время начинает меняться шрифт, некоторые цвета и тд. Накой этой надо?!

Итоги

Какой из типов асинхронной загрузки выбирать - решать Вам. Лично я на своих сайтах всегда сортирую скрипты на те, от которых зависит внешний вид, и на те, от которых он не зависит. Первые я не трогаю, а вот вторые вывожу через тип defer.

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

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

Успехов Вам!

Полезные статьи Вам на почту!

Нас более 700 человек!

Комментарии

Андрей Николаев
6

Самое лучшее объяснение!!! И наглядно, и понятно, просто супер! Я даже не знал, что такое асинхронная загрузка скрипта. Натыкался несколько раз, искал в интернете, но что-то так все было объяснено замудренно. А ты молодец, разложил все по полочкам! Спасибо за полезную статью!

21.02.2016
2

Спасибо)

21.02.2016
Дарья
2

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

27.02.2016
0

Спасибо) Тема давняя, написать, правда, пришло в голову только недавно.

27.02.2016

Оставить комментарий

Поделиться