Script di terze parti che bloccano le interazioni: diagnosticarli e contenerli
Cosa succede
Gli script di terze parti — analytics, tag manager, annunci, widget di chat, test A/B — girano sullo stesso main thread del tuo codice. Quando un tag manager valuta cinquanta regole o uno script di annunci fa il parsing di un payload, il clic del tuo utente aspetta esattamente come aspetterebbe per il tuo task lungo.
La Long Animation Frames API attribuisce i task lunghi al loro source URL, così vedi esattamente quale dominio ti costa INP.
Come riconoscerlo
- I task lunghi in DevTools Performance sono attribuiti a domini esterni (googletagmanager.com, connect.facebook.net, CDN di widget).
- L'INP è peggiorato dopo aver aggiunto un tag di marketing, senza modifiche al tuo codice.
- L'input delay schizza poco dopo il caricamento, quando gli script di terze parti si inizializzano.
Come risolverlo
- Carica ogni script di terze parti con async o defer; mai in modo sincrono in <head>.
- Verifica la lista dei tag: rimuovi quelli che nessuno usa — eliminare uno script è l'unica correzione che costa zero millisecondi.
- Sposta i tag fuori dal main thread con Partytown (li esegue in un Web Worker) e carica widget come la chat sull'intento dell'utente (primo clic) invece che al caricamento.
Problema
<script src="https://cdn.example-widget.com/loader.js"></script>
<!-- synchronous: blocks parsing AND competes for the main thread -->Soluzione
<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>