Когда использовать async для скриптов?

Атрибут async в теге script загружает JavaScript асинхронно, не блокируя разбор HTML. Скрипты с атрибутом async загружаются параллельно, браузер продолжает парсинг. Выполняется скрипт JS сразу после загрузки, но порядок выполнения async-скриптов не гарантирован. Используйте async для независимых скриптов типа Google Analytics.

Когда использовать defer для скриптов?

Атрибут defer в теге script загружает JavaScript асинхронно, как async. Скрипты с defer выполняются в исходном порядке, сохраняя зависимости. Браузер не блокирует разбор HTML, парсит документ перед выполнением defer-скриптов. Используйте defer, когда между скриптами есть зависимости.

Как загружать скрипты через Intersection Observer?

Intersection Observer API в JavaScript отслеживает видимость элемента на странице. При видимости элемента динамический import() загружает скрипты асинхронно, не блокируя загрузку HTML. Используйте document.querySelector для выбора элемента, addEventListener для отслеживания событий видимости. Это lazy loading: скрипты загружаются, только если контент действительно требуется пользователю страницы.

Отложенная загрузка javascript

Когда браузер начинает загружать вашу страницу, он встречает тег <script src="app.js"> и останавливается. Полностью. Прерывает парсинг HTML-документа, загружает файл JavaScript, выполняет скрипт целиком. Только потом продолжает разбор дальше. А пользователь видит белый экран. Пусто.

Это не просто раздражает — это отбирает деньги. Дополнительная задержка может увеличить долю посетителей, которые покидают страницу до её загрузки. Обычный скрипт блокирует разбор HTML-документа, и именно в этом главная проблема.

Как браузер загружает скрипты обычно

Представьте два совершенно разных сценария.

Первый: скрипт находится в <head> или начале <body>. Браузер парсит страницу, встречает тег script с src атрибутом. Дальше:

Загружает файл JavaScript через сеть. Выполняет скрипт полностью. Только после этого продолжает разбор HTML. Весь контент ниже этого скрипта не может отрисоваться — рендеринг ждет. Если скрипт весит полмегабайта или сервер медленный, ждать придется долго.

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

Второй сценарий: асинхронная загрузка JavaScript. Здесь всё иначе.

Браузер парсит HTML параллельно загрузке скрипта. Не ждет, не блокирует, не приостанавливает разбор документа. Загружает файл в фоне. Время загрузки страницы падает ощутимо. Пользователь видит содержимое страницы раньше в несколько раз.

Атрибуты defer и async — главные инструменты

Вот как работает атрибут defer:

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

Браузер загружает скрипт асинхронно, параллельно парсингу HTML. Но не выполняет его сразу. Ждет, пока document полностью загрузится. После завершения разбора HTML-документа скрипты выполняются в том порядке, в котором они указаны в коде. Порядок выполнения скриптов сохраняется. Это критично, если один скрипт зависит от другого.

Атрибут async работает по-другому:

<script async src="analytics.js"></script>

Загружает скрипт асинхронно параллельно разбору HTML, но выполняет его сразу как загружен. Порядок выполнения скриптов не гарантирован — какой загружен первым, тот и выполнится первым. Используйте async для независимых скриптов: аналитика, реклама, внешние сервисы. Используйте defer для основного JS приложения.

Netflix, Medium и Slack: как большие сайты решили проблему

Netflix загружает скрипты волнами. На первой волне — только критичные для первого экрана, для воспроизведения видео. На второй волне асинхронно загружаются скрипты для рекомендаций, интерфейса, комментариев. Это позволило им заметно сократить время загрузки страницы и улучшить LCP.

Medium не загружает JavaScript для интерактивности до того, как пользователь начнёт скроллить страницу. Кнопки лайков, комментарии, поделиться — эти скрипты используют асинхронную загрузку и выполняются в фоне, пока вы читаете статью. Браузер не блокирует разбор HTML-документа. Результат: LCP улучшается.

Slack применяет Intersection Observer API. Загружает скрипты в момент, когда элемент появляется на экране. Если блок с чатом еще не виден пользователю — зачем загружать его скрипты? Это сокращает время загрузки страницы.

Все они поняли одно: не все скрипты одинаково важны. Критичные — для первого экрана. Остальное может загружаться позже.

Влияние на Core Web Vitals и SEO-рейтинг

Google отслеживает три метрики, и отложенная загрузка JavaScript влияет на каждую.

Largest Contentful Paint (LCP) — время появления основного содержимого. Когда вы откладываете загрузку скриптов через атрибут defer или async, браузер начинает рендеринг HTML раньше. LCP улучшается на 30–40%.

Interaction to Next Paint (INP) — время ответа на действие пользователя. Асинхронная загрузка скриптов освобождает главный поток браузера. Страница становится интерактивной раньше.

Cumulative Layout Shift (CLS) — неожиданные сдвиги содержимого. Когда скрипты выполняются после рендеринга и изменяют DOM, появляются прыжки. Правильное использование async и defer минимизирует это.

Google включил Core Web Vitals в алгоритм ранжирования. Хорошие метрики — бонус в поиске, плохие — штраф. Отложенная загрузка JavaScript — это не просто техника оптимизации производительности сайта, это прямой способ улучшить SEO-видимость вашего проекта в поисковых результатах.

Определение отложенной загрузки JavaScript

Отложенная загрузка JavaScript — это техника асинхронной загрузки скриптов, при которой использование тегов script не блокирует разбор HTML-документа и не замораживает рендеринг страницы. Браузер загружает файл JavaScript параллельно парсингу контента, повышая производительность сайта и улучшая пользовательский опыт. Достигается применением атрибутов async и defer для тегов script, динамическими импортами в коде, Intersection Observer API для условной загрузки или другими методами асинхронного выполнения скриптов.