Как безопасно отложить JavaScript
Для независимого кода подходит async, для упорядоченной цепочки — defer, а тяжёлую необязательную функцию можно загружать по событию. Выбор делается для каждого скрипта после проверки назначения.
Самый безопасный путь
Сообщение разработчику или поддержке
«Найдите синхронные внешние JavaScript в head, составьте карту зависимостей и предложите defer, async или загрузку по событию для каждого файла. Сохраните резервную копию, не откладывайте критический код вслепую и проверьте меню, формы, корзину, оплату, аналитику, Console и waterfall на desktop/mobile».
Перед изменением сохраните шаблон и конфигурацию сборки, включите версионирование файлов и запишите рабочие сценарии. Меняйте по одной группе, чтобы источник сбоя оставался понятен.
Пошаговая настройка
- В DevTools → Network отфильтруйте JS и найдите синхронные внешние теги в исходном HTML.
- Для каждого файла укажите владельца, назначение, зависимости и элементы DOM, которые он ожидает.
- Оставьте синхронным только действительно критичный код, необходимость которого подтверждена тестом.
- Для цепочки библиотека → плагин → инициализация добавьте
deferвсем внешним участникам в нужном порядке. - Независимую аналитику или интеграцию используйте с
asyncтолько если порядок не важен. - Необязательный виджет ниже первого экрана загружайте при приближении блока или осознанном взаимодействии, предусмотрев видимую кнопку и состояние ошибки.
- Очистите кеш, повторите waterfall и функциональные сценарии на desktop/mobile с медленной сетью.
Техническая памятка
Упорядоченные зависимости
<script defer src="/js/library.js"></script>
<script defer src="/js/app.js"></script>defer сохраняет порядок внешних классических скриптов и запускает их после разбора HTML.
Независимый скрипт
<script async src="https://vendor.example/analytics.js"></script>async выполняется после загрузки и не гарантирует порядок относительно соседних тегов.
У type="module" по умолчанию отложенное выполнение; для старых браузеров и nomodule проверяйте выбранную стратегию проекта. Атрибут defer не действует на классический inline-скрипт без src.
Риски, откат и проверка
| Симптом | Причина | Действие |
|---|---|---|
… is not defined | Потребитель запустился раньше зависимости | Вернуть порядок и использовать defer для цепочки |
| Кнопка реагирует только со второго раза | Обработчик добавлен слишком поздно | Инициализировать лёгкий обработчик раньше |
| Потеря событий аналитики | Очередь событий не создана до загрузки | Вернуть рекомендованный bootstrap поставщика |
| Улучшился render, ухудшился INP | Тяжёлое выполнение сдвинулось к взаимодействию | Разделить задачу или загрузить заранее в простой |
Для отката восстановите прежние теги и сборку, очистите кеш и повторите критические действия. После правки выполните независимую проверку. Минификация, удаление кода и исправление логики оцениваются отдельно.
