Сторонние скрипты блокируют взаимодействия: как диагностировать и изолировать
Что происходит
Сторонние скрипты — аналитика, тег-менеджеры, реклама, чат-виджеты, A/B-тесты — выполняются в том же главном потоке, что и ваш код. Когда тег-менеджер вычисляет полсотни правил, а рекламный скрипт парсит payload, клик пользователя ждёт точно так же, как ждал бы вашу собственную длинную задачу.
Long Animation Frames API атрибутирует длинные задачи их source URL — видно, какой именно домен стоит вам INP.
Как распознать
- Длинные задачи в DevTools Performance атрибутированы внешним доменам (googletagmanager.com, connect.facebook.net, CDN виджетов).
- INP ухудшился после добавления маркетингового тега без изменений вашего кода.
- Input delay скачет вскоре после загрузки, когда инициализируются сторонние скрипты.
Как починить
- Грузите каждый сторонний скрипт с async или defer; никогда — синхронно в <head>.
- Проведите аудит тегов: удалите неиспользуемые — удаление скрипта единственный фикс, который стоит ноль миллисекунд.
- Уведите теги с главного потока через Partytown (выполняет их в Web Worker), а виджеты вроде чата грузите по намерению пользователя (первый клик), а не при загрузке страницы.
Проблема
<script src="https://cdn.example-widget.com/loader.js"></script>
<!-- synchronous: blocks parsing AND competes for the main thread -->Фикс
<script async src="https://cdn.example-widget.com/loader.js"></script>
<!-- or better: inject on first user intent -->
<script>
chatButton.addEventListener("click", loadChatWidget, { once: true })
</script>