Async defer: отложенная загрузка скриптов в HTML

Когда вы работаете с async и defer, это атрибуты тега script, позволяющие управлять порядком загрузки и исполнения JavaScript‑кода в браузере. Также известны как отложенная загрузка скриптов, они помогают избежать блокировки рендеринга и ускоряют отображение контента. Async defer — это средство, которое браузеру даёт возможность — загружать файлы параллельно (subject), — не ждать их завершения перед отрисовкой (predicate), — показывать пользователю готовую страницу (object). Тег script, контейнер для JavaScript‑кода в HTML‑документе без этих атрибутов будет блокировать поток — браузер остановит построение DOM, пока не получит и не выполнит скрипт. Это простая, но часто упускаемая из виду причина медленной загрузки, особенно на мобильных устройствах с ограниченной пропускной способностью.

Как выбирать между async и defer

Если сравнивать два атрибута, то JavaScript, язык программирования, который оживляет веб‑страницы в случае async начинает загружаться сразу и выполняется сразу после скачивания, без ожидания других скриптов. Это полезно для небольших аналитических или рекламных модулей, которым не важен порядок исполнения. defer же откладывает выполнение до тех пор, пока весь документ не будет полностью построен, но скрипт всё равно загружается асинхронно. Поэтому для библиотек, которые зависят от DOM (например, UI‑фреймворки), предпочтительнее defer. На практике я часто ставлю async на сторонние виджеты, а defer — на собственный код, который манипулирует разметкой. Такой подход сохраняет скорость — браузер скачивает оба скрипта параллельно, но рендеринг не останавливается, а исполнение происходит в нужный момент. Помните, что атрибуты не совместимы: если указать одновременно async и defer, браузер будет считать только async. Ошибки часто возникают из‑за неправильного порядка подключения библиотек — если один скрипт зависит от другого, ставьте их без атрибутов или используйте defer для всех, чтобы сохранить порядок.

Практические советы: проверяйте загрузку через DevTools, смотрите колонку «Waterfall», ищите блокировки «(blocked)». Если ваш сайт медленно реагирует на первый ввод, попробуйте перенести все кастомные файлы в конец  и добавить defer. Для критических функций, требующих мгновенного запуска, используйте async, но следите, чтобы они не меняли структуру DOM до её полной готовности. В нашем блоге уже есть несколько статей: «Где правильно размещать тег script», «Где писать код JavaScript в HTML», «Смылс JavaScript», где мы детально разбираем примеры кода, сравниваем загрузку на мобильных и десктопных устройствах, а также показываем, как отладить конфликт между async и defer. В следующем разделе вы найдете подборку материалов, где мы пошагово покажем, как настроить отложенную загрузку, как измерять её влияние на Core Web Vitals и какие подводные камни могут подстерегать, если забыть про порядок зависимостей. Приготовьтесь к практическим примерам — они помогут применить полученные знания сразу же.