Асинхронная загрузка JavaScript, CSS: что это, скрипты и настройка

Обновлено: 18.01.2019
Рубрика: Верстка
Асинхронная загрузка

Асинхронная загрузка – это загрузка, которая позволяет браузеру загружать основной HTML и прочие ресурсы без ожидания загрузки стилей CSS и JavaScript, что существенно ускоряет работу сайта.

Проще говоря, пользователь, посещая ресурс, не дожидается последовательной загрузки всех скриптов и стилей, они подгружаются в конце. Тем самым не тормозя процесс загрузки HTML, который загружается последовательно (строка за строкой) и может долго подгружаться на CSS и JavaScript.

Асинхронная загрузка играет одну из важнейших ролей в SEO-продвижении - скорость загрузки страницы. Ведь, многие посетители, зайдя на страницу и прождав загрузки по 10 секунд и дольше, просто покинут сайт, что негативно скажется на его поведенческих факторах, на которые поисковые системы в последние годы обращают все больше внимания.

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

По умолчанию JS файлы загружаются следующим образом:

<script src="http://www.site.ru/script.js" type="text/javascript"></script>

Асинхронная загрузка скрипта HTML5

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

<script defer src="http://www.site.ru/script.js" type="text/javascript"></script>
<script async src="http://www.site.ru/script.js" type="text/javascript"></script>

Чем отличаются атрибуты async и defer?

Применение этих атрибутов в конечном итоге обеспечивает нам загрузку скриптов асинхронным способом. Но зачем тогда создавать два атрибута? Дело в том, что они отличаются выполнением скрипта.

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

При использовании async, скрипт выполнится моментально после его полной загрузки и до загрузки window.

На заметку. Данный механизм актуален не для всех браузеров, в частности, Internet Explorer. Еще он не функционирует, если в script.js есть строки document.write.

Загрузка JavaScript асинхронно скриптом от Google

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

Во избежание проблем с загрузкой, Google разработал и предложил вебмастерам собственный скрипт, позволяющий загружать JS непоследовательно.

Для его использования достаточно заменить <script src=”…”> на <script extsrc=”…”>, а потом подключить файл extsrc.js. Получится следующее:

<script src="http://extsrcjs.googlecode.com/svn/trunk/extsrc.js"></script>
<script extsrc="...."></script>

Но метод также подходит не для всех, потому что опять-таки неактивен в файлах с document.write.

Универсальная асинхронная загрузка JS

А вот вариант, подходящий всем браузерам (кроме IE 6 и старее, которыми уже практически никто не пользуется), сервисов и даже для document.write.

Во фрагменте страницы, предназначенном для отображения элемента, пропишите блок div и оставьте его пустым:

<div id="script_block" class="script_block"></div>

Внизу документа, а именно перед тегом </body>, вставьте необходимый скрипт:

<div id="script_ad" class="script_ad" style="display:none;">

Здесь файл или скрипт для загрузки.</div>

<script type="text/javascript">
 // переместить файл в место отображения
 document.getElementById('script_block').appendChild(document.getElementById('script_ad'));

 // показать
 document.getElementById('script_ad').style.display = 'block';

</script>

Еще один способ асинхронной загрузки JavaScript

Скрипты непоследовательной загрузки нужно прописывать к каждому скрипту JS отдельно, в особенности к тем, что сильно замедляют загрузку документа и с которыми конфликтует программа проверки скорости работы сайтов Google PageSpeed.

Чтобы JS загружались асинхронно, добавьте атрибут asyc к необходимому файлу:

<script async src="https://webmasterie.ru/main.js"></script>

Учтите, что скрипт больше не будет загружаться последовательно:

<script src="/jquery.js" async></script>
<script>$('a').addClass('ajax');</script>

Данный метод не будет работать, потому что загрузка jQuery будет происходить в фоновом режиме, в то время как функция $ пока неизвестна.

Во избежание этого к скрипту нужно применить событие onload:

<script>function init() {
$('a').addClass('ajax');
}</script>
<script src="/jquery.js" async onload="init()"></script>

Так функция init выполнится после того, как загрузится jQuery.

Асинхронная загрузка файлов CSS

Как и асинхронная загрузка файлов JS, она позволяет ускорить работоспособность вашего ресурса, быстрее загружая страницы с их содержимым, а затем сами файлы CSS со стилями.

Крайне важно внедрить асинхронную загрузку CSS для мобильной версии сайта, потому что у смартфонов зачастую интернет куда медленнее.

Прежде всего подключите jQuery. Только после этого загружайте стили асинхронно:

$("head").append("<link rel='stylesheet' type='text/css' href='/stylesheet.css' />")

Чтобы загрузить код, обязательно предварительно загрузите jQuery и непосредственно страницу. Показываем пример с использованием ready:

<script>
 $(document).ready(function() {
 $("head").append("<link rel='stylesheet' type='text/css' href='/stylesheet.css' />");
 });
</script>

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

Еще у него есть недостаток. Из-за того, что CSS загружается после HTML, в процессе загрузки страницы внешне она будет отображаться криво.

Можно либо отрисовать некоторые стили внутри тега <body> HTML страницы, сохранив приемлемый внешний вид ресурса в момент загрузки, либо оставить файл CSS синхронным, а асинхронную загрузку использовать к стилям, не влияющим на внешний вид во время загрузки.

Заключение

Сегодня асинхронная загрузка крайне важна, так как многие сайты используют скрипты JavaScript и CSS, замедляющие работу сайтов. Применив асинхронную загрузку указанными в данной статье методами, вы тем самым ускорите работу своего ресурса и предотвратите потерю трафика, так как мало кто из пользователей остался бы на сайте, загружающем страницы очень долго.

Александр Овсянников
Занимаюсь продвижением и заработком на сайтах с 2009 года.
Добавить комментарий