Scripts tiers bloquant les interactions : les diagnostiquer et les contenir
Ce qui se passe
Les scripts tiers — analytique, gestionnaires de balises, publicités, widgets de chat, tests A/B — s'exécutent sur le même thread principal que votre code. Quand un gestionnaire de balises évalue cinquante règles ou qu'un script publicitaire parse une charge utile, le clic de votre utilisateur attend exactement comme il attendrait votre propre tâche longue.
La Long Animation Frames API attribue les tâches longues à leur source URL, vous voyez donc exactement quel domaine vous coûte de l'INP.
Comment le reconnaître
- Les tâches longues dans DevTools Performance sont attribuées à des domaines externes (googletagmanager.com, connect.facebook.net, CDN de widgets).
- L'INP a empiré après l'ajout d'une balise marketing, sans aucun changement dans votre propre code.
- L'input delay grimpe peu après le chargement, quand les scripts tiers s'initialisent.
Comment corriger
- Chargez chaque script tiers avec async ou defer ; jamais de façon synchrone dans <head>.
- Auditez la liste des balises : supprimez celles que personne n'utilise — supprimer un script est le seul correctif qui coûte zéro milliseconde.
- Sortez les balises du thread principal avec Partytown (les exécute dans un Web Worker), et chargez les widgets comme le chat sur l'intention de l'utilisateur (premier clic) plutôt qu'au chargement.
Problème
<script src="https://cdn.example-widget.com/loader.js"></script>
<!-- synchronous: blocks parsing AND competes for the main thread -->Correctif
<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>