Defer – отложенная загрузка скриптов в HTML

When working with defer, атрибут, который откладывает выполнение JavaScript‑файла до полной загрузки документа. Also known as отложенный скрипт, it allows браузеру загрузить файл параллельно, но выполнить его после построения DOM. Это значит, что пользователь получает полностью отрисованную страницу, а скрипты не блокируют рендеринг. Технически defer реализует связь: defer → script execution → after DOMContentLoaded. При этом файл всё равно участвует в процессе загрузки, просто его вызов откладывается до события DOMContentLoaded. Если сравнивать с обычным <script src="…">, где загрузка и исполнение идут последовательно, defer значительно ускоряет «first paint» и улучшает метрики Core Web Vitals.

Почему стоит пользоваться defer

Another important attribute is async, запускающий скрипт сразу после загрузки, без ожидания построения DOM. While async → execution → as soon as file is ready, defer → execution → after DOM, the two serve different goals. Async отлично подходит для небольших аналитических кусков кода, но может вызвать конфликт, если скрипт зависит от элементов страницы. Defer же гарантирует, что все элементы уже существуют, поэтому он часто используется в крупных библиотеках, фреймворках и кастомных модулях. В реальном проекте script, HTML‑элемент, в котором размещают JavaScript‑код или ссылку на внешний файл может выглядеть так: <script src="app.js" defer></script>. Такая запись создаёт связь: script → defer → improved page load performance. Кроме ускорения визуального отображения, defer помогает SEO‑оптимизации: поисковые роботы получат полностью построенный DOM, что упрощает индексацию контента. Также отложенная загрузка снижает количество «layout thrashing», потому что браузер реже пересчитывает позицию элементов во время выполнения скриптов.

В коллекции статей ниже вы найдёте практические примеры: от базовых инструкций по добавлению defer в HTML‑страницу до сравнения async и defer в реальных проектах, от анализа влияния на SEO до тестов скорости с инструментами Lighthouse. Каждый материал раскрывает отдельный аспект отложенной загрузки, так что независимо от вашего уровня (новичок или опытный разработчик) вы сможете быстро применить полученные знания. Готовы увидеть, как правильно разместить скрипты, какие подводные камни бывают и как измерить эффект? Дальше – подборка проверенных руководств, гайдлайнов и аналитических статей, которые помогут вам использовать defer на полную мощность.