Сторонні скрипти блокують взаємодії: як діагностувати та ізолювати
Що відбувається
Сторонні скрипти — аналітика, тег-менеджери, реклама, чат-віджети, 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>