Scripts de terceros que bloquean interacciones: diagnosticarlos y contenerlos
Qué ocurre
Los scripts de terceros — analítica, gestores de etiquetas, anuncios, widgets de chat, pruebas A/B — se ejecutan en el mismo hilo principal que tu código. Cuando un gestor de etiquetas evalúa cincuenta reglas o un script de anuncios parsea una carga útil, el clic de tu usuario espera igual que esperaría por tu propia tarea larga.
La Long Animation Frames API atribuye las tareas largas a su source URL, así que puedes ver exactamente qué dominio te está costando INP.
Cómo reconocerlo
- Las tareas largas en DevTools Performance se atribuyen a dominios externos (googletagmanager.com, connect.facebook.net, CDN de widgets).
- El INP empeoró tras añadir una etiqueta de marketing, sin cambios en tu propio código.
- El input delay se dispara poco después de la carga, cuando se inicializan los scripts de terceros.
Cómo solucionarlo
- Carga todo script de terceros con async o defer; nunca de forma síncrona en <head>.
- Audita la lista de etiquetas: elimina las que nadie usa — borrar un script es la única solución que cuesta cero milisegundos.
- Saca las etiquetas del hilo principal con Partytown (las ejecuta en un Web Worker), y carga widgets como el chat según la intención del usuario (primer clic) en vez de al cargar la página.
Problema
<script src="https://cdn.example-widget.com/loader.js"></script>
<!-- synchronous: blocks parsing AND competes for the main thread -->Solución
<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>