RigWEB

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

Приветствую, друзья! Знаете ли Вы, что загрузка JavaScript является одним из самых узких мест в производительности сайта? Сегодня моя основная задача — объяснить что такое асинхронная загрузка скрипта и каким образом она влияет на быстродействие и производительность сайта.

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

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

  • конфигурации хостинга,
  • скорости интернет-соединения,
  • размера файла и других…

По этой причине анализатор скорости загрузки сайта Google PageSpeed Insights рекомендует удалить из верхней части страницы код JavaScript, блокирующий ее отображение. Хорошей практикой является размещение скриптов в нижней части сайта, например, перед закрывающим тегом </body> или настройка асинхронной загрузки.

Если код скрипта влияет на отображение верхней части сайта — не выносите его в отдельный файл, а встраивайте непосредственно в HTML.

JS может изменить содержимое сайта и даже перенаправить на другой URL-адрес. В таком случае подключение скрипта в конце документа приведет к эффекту «подергивания» страницы, подгружая новые или изменяя существующие элементы в верхней части.

Применение атрибутов async и defer для тега script

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

1
<script src="example.js"></script>

В наглядном примере я буду использовать следующие условные обозначения:

Парсинг — обработка страницы
Загрузка — загрузка скрипта
Выполнение — выполнение скрипта

Таким образом последовательность обработки происходит по следующей схеме:

Script

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

Атрибут defer

Атрибут defer позволяет браузеру начать загрузку js-файлов параллельно, не останавливая дальнейшую обработку страницы. Их выполнение происходит после полного разбора объектной модель документа (от англ. Document Object Model, сокращенно DOM), при этом браузер гарантирует последовательность на основе порядка подключения файлов.

1
<script defer src="example.js"></script>

Схема последовательности обработки:

Script defer

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

Атрибут async

Поддержка атрибута async появилась в HTML5, он разрешает браузеру загружать js-файлы параллельно и выполнять сразу после загрузки, не дожидаясь обработки остальной части страницы.

1
<script async src="example.js"></script>

Схема последовательности обработки:

Script async

Это асинхронная загрузка. Атрибут рекомендуется применять для таких скриптов, которые не оказывают значительного влияния на отображение документа. К ним относятся счетчики сбора статистики (Google Analytics, Яндекс Метрика), коды рекламных сетей (РСЯ, AdSense, Advertur), кнопки социальных сетей и так далее.

Скорость загрузки сайта — один из факторов ранжирования в Google.

Асинхронное подключение JavaScript снижает время загрузки страниц за счет отсутствия задержки. Наряду с этим я рекомендую сжимать и объединять js-файлы в один, например, с помощью библиотеки Minify. Пользователям нравятся быстрые сайты :cool:

  1. Сергей

    Я у себя все скрипты отпустил вниз перед закрывающим тегом и в добавок половину скриптов перевел на асинхронную загрузку. Скорость выросла в разы, правда я делал эту оптимизацию давно.

    С недавнего времени заметил что кнопки поделиться от яндекса немного тормозят загрузку, нужно наверное искать альтернативу или собирать самому. Денис, а ты как реализовал кнопки поделиться у себя?

    Кстати про атрибут defer не знал, спасибо за инфу.

    Ответить

  2. Webliberty

    Сергей, кнопки Яндекса с относительно недавних пор подгружают скрипты Метрики. Директ тоже свою Метрику загружает, вот и начинает все жутко тормозить. Сторонние скрипты собирают свои данные и потом продают их рекламодателям, даже Share42, кажется, стал этим грешить… Поэтому использую другое решение, вскоре напишу об этом.

    Ответить

  3. Дмитрий

    +1 к Сергею на счет кнопок.

    Ответить

  4. Сергей Совков

    Вот за это огромное спасибо! Буду внедрять в свой блог :cool:

    Ответить

  5. Сергей

    Webliberty, хорошо с интересом почитаю.
    Я нашел уже одно решение с кнопками, даже на одном проекте уже реализовал, с индивидуальным дизайном, все отлично работает но без счетчиков. Надо себе на сайт прикрутить будет. Правда хочется реализовать со счетчиком. Счетчики как бы информируют какой материал нравится читателю.

    Ответить

Ваш комментарий:

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: