Problemas de INP explicados: causas de interações lentas e como corrigi-las
Interaction to Next Paint (INP) é um Core Web Vital que mede a rapidez com que uma página responde a cliques, toques e teclas. Um INP acima de 200 ms parece lento; acima de 500 ms parece quebrado.
Quase todo INP ruim se resume a uma de poucas causas raiz. Cada guia abaixo explica uma causa: como reconhecê-la, por que acontece e como corrigi-la — com código.
Causas raiz
Um manipulador de eventos demorado bloqueia a thread principal e atrasa a próxima pintura. Como encontrar manipuladores pesados e dividi-los com scheduler.yield() ou Web Workers.
Layout thrashing: reflows repetidos em um frame e como pará-losAlternar leituras e escritas do DOM força o navegador a recalcular o layout repetidamente em um único frame. Como agrupar leituras e escritas para corrigir o INP.
Layout síncrono forçado: ler geometria após escrever no DOMLer offsetWidth ou getBoundingClientRect logo após alterar o DOM força o navegador a recalcular o layout dentro da sua tarefa JS. Como detectar e corrigir.
Thread principal bloqueada: input delay alto antes mesmo de o manipulador rodarQuando a thread principal está ocupada com outra tarefa longa, os cliques esperam na fila antes de o manipulador começar. Como encontrar e dividir a tarefa bloqueadora para corrigir o input delay do INP.
Scripts de terceiros bloqueando interações: diagnosticá-los e contê-losAnalytics, anúncios e widgets de chat executam tarefas longas na sua thread principal e arruínam o INP. Como atribuir tarefas longas a terceiros e contê-las com async, defer ou um worker.
Cascata de re-renders do React: quando um clique re-renderiza a árvore inteiraUma atualização de estado no alto da árvore do React re-renderiza centenas de componentes a cada clique. Como encontrar cascatas de render e corrigi-las com memo, useCallback e useTransition.