Атрибут defer в script js src для ускорения сайта

Иногда, чтобы улучшить загрузку сайта, не нужно переписывать половину кода. Достаточно просто поставить одно слово - defer.

Быстрее загружающийся сайт = лучше для SEO и пользовательского опыта. Поисковики любят, когда страница не заставляет ждать.

«defer» реально тот инструмент, который дает отличный буст скорости загрузки сайта, если понимать, как он работает. Поговорим про него в этой статье!

Это пятая часть серии «Разгоняем показатели PageSpeed до 100»

Остальные части можно прочитать здесь - https://teletype.in/@naweba/pagespeed

Содержание:

1. Что такое defer?

Это атрибут HTML. Скрипт с defer загружается параллельно с HTML, но выполняется только после загрузки документа. То есть браузер не останавливает парсинг страницы, пока грузит JS, от этого сайт открывается быстрее.

Пример использования

Так мы подключаем обычный файл со скриптами js:

<script src="main.js"></script>

А вот так файл js подключается уже ОТЛОЖЕННО с defer:

<script src="main.js" defer></script>

2. Особенности использования

Также важно знать особенности, а они такие:

2.1 defer работает только для внешних скриптов (с src)

Это значит, что мы не можем с помощью этого атрибута подгружать вложенные в саму разметку скрипты. Т.е. подобного вида:

<p>здесь какой-то текст</p>
<script defer>
    console.log('текст для консоли');
</script>
<p>и еще текст для примера</p>

ЭТО НЕ СРАБОТАЕТ! Скрипт выполнится в обычном режиме.

Отсюда вывод, что:

Если есть инлайн-скрипты, которые зависят от подключённых файлов JS, то лучше обернуть их в DOMContentLoaded.

Выглядит это так:

<p>здесь какой-то текст</p>
<script>
document.addEventListener('DOMContentLoaded', function () {
    console.log('текст для консоли');
});
</script>
<p>и еще текст для примера</p>

2.2 Порядок выполнения скриптов с defer сохраняется

Жирный плюс в том, что подключенные скрипты выполнятся в том порядке, в каком прописаны в разметке. Например, у нас есть четыре подключенных файла js:

<script src="script.js" defer></script>
<script src="script2.js" defer></script>
<script src="script3.js" defer></script>
<script src="script4.js" defer></script>

Загружаться они будут параллельно, а выполнятся в порядке очереди.

Внимание, особенность!

Если какой-то из файлов будет подключен без атрибута defer, то он не будет ждать загрузки всего DOM, а выполнится сразу, как сам загрузится. Выглядит это так:

<script src="script.js" defer></script>
<script src="script2.js"></script>
<script src="script3.js" defer></script>
<script src="script4.js" defer></script>

В итоге выйдет так: script.js, script3.js и script4.js сначала загрузятся, а потом будут выполнятся по очереди. Тогда как script2.js выполнится сразу, как только загрузится, не дожидаясь остальные скрипты.

3. Как проверить эффективность использования

3.1 Инструмент проверки Google PageSpeed

Используем сервис PageSpeed Insights ДО и ПОСЛЕ добавления defer. Просто вводим ссылку на сайт в поле, жмём «анализировать» и дожидаемся окончания проверки.

Как показывает практика, сайты с defer для файлов js загружаются заметно быстрее и общий балл производительности в гугл пейдж спид становится больше.

Это можно объяснить тем, что важна первая отрисовка страницы, когда сначала подгружается разметка html с файлами CSS. И только потом тяжелые скрипты.

3.2 DevTools вкладка Network

Открываем браузер Google Chrome и средства разработчик (F12), переключаемся на вкладку Network. Выбираем вкладку JS и видим порядок загрузки всех файлов js. (скрин сделан на рандомном сайте из поисковика)

Вкладка network в devtools

Вывод:

Атрибут defer - идеальный пример, когда одно слово экономит десятки миллисекунд в загрузке сайта и поднимает зелёные цифры PageSpeed!

Без костылей, без танцев с бубном, просто ставишь слово, а сайт уже быстрее. (Но, конечно, важно учитывать особенности каждого отдельного сайта)

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Все части серии “Как разогнать PageSpeed и Lighthouse до 100” можно прочитать по хэштегу #pagespeed в Telegram (@naweba) или в моём блоге в Teletype.

Пусть быстрые сайты будут с нами!!! 🙌

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

👍 Была полезна статья?

Подпишись на меня @naweba. Рассказываю про web, фронтенд и про всё, что связано с сайтами!

🤝Нужно улучшить загрузку сайта?

Свяжитесь со мной, обсудим ваш проект! Мой телеграм для связи - @naweba. (можно писать в личные сообщения канала - иконка слева внизу)