Scripts de terceiros bloqueando interações: diagnosticá-los e contê-los
O que acontece
Scripts de terceiros — analytics, gerenciadores de tags, anúncios, widgets de chat, testes A/B — rodam na mesma thread principal que o seu código. Quando um gerenciador de tags avalia cinquenta regras ou um script de anúncio parseia um payload, o clique do seu usuário espera exatamente como esperaria pela sua própria tarefa longa.
A Long Animation Frames API atribui as tarefas longas ao seu source URL, então você vê exatamente qual domínio está custando INP.
Como reconhecer
- As tarefas longas no DevTools Performance são atribuídas a domínios externos (googletagmanager.com, connect.facebook.net, CDNs de widgets).
- O INP piorou após adicionar uma tag de marketing, sem mudanças no seu próprio código.
- O input delay dispara logo após o carregamento, quando os scripts de terceiros inicializam.
Como corrigir
- Carregue todo script de terceiros com async ou defer; nunca de forma síncrona no <head>.
- Audite a lista de tags: remova as que ninguém usa — apagar um script é a única correção que custa zero milissegundos.
- Tire as tags da thread principal com Partytown (executa-as em um Web Worker) e carregue widgets como o chat conforme a intenção do usuário (primeiro clique) em vez de no carregamento.
Problema
<script src="https://cdn.example-widget.com/loader.js"></script>
<!-- synchronous: blocks parsing AND competes for the main thread -->Correção
<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>