Skrypty zewnętrzne blokujące interakcje: diagnozowanie i ograniczanie
Co się dzieje
Skrypty zewnętrzne — analityka, menedżery tagów, reklamy, widżety czatu, testy A/B — działają na tym samym głównym wątku co Twój kod. Gdy menedżer tagów ocenia pięćdziesiąt reguł, a skrypt reklamowy parsuje ładunek, kliknięcie użytkownika czeka dokładnie tak, jak czekałoby na Twoje własne długie zadanie.
Long Animation Frames API przypisuje długie zadania do ich source URL, więc widać dokładnie, która domena kosztuje Cię INP.
Jak rozpoznać
- Długie zadania w DevTools Performance są przypisane do zewnętrznych domen (googletagmanager.com, connect.facebook.net, CDN-y widżetów).
- INP pogorszył się po dodaniu tagu marketingowego, bez zmian we własnym kodzie.
- Input delay skacze krótko po załadowaniu, gdy skrypty zewnętrzne się inicjalizują.
Jak naprawić
- Ładuj każdy skrypt zewnętrzny z async lub defer; nigdy synchronicznie w <head>.
- Skontroluj listę tagów: usuń te, których nikt nie używa — usunięcie skryptu to jedyna poprawka kosztująca zero milisekund.
- Przenieś tagi poza główny wątek za pomocą Partytown (uruchamia je w Web Workerze), a widżety takie jak czat ładuj na intencję użytkownika (pierwsze kliknięcie) zamiast przy ładowaniu strony.
Problem
<script src="https://cdn.example-widget.com/loader.js"></script>
<!-- synchronous: blocks parsing AND competes for the main thread -->Poprawka
<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>