INP: o que fazer quando cliques e toques demoram para responder

O INP (Interaction to Next Paint) mede o tempo entre uma interação — clique, toque, tecla — e a próxima atualização visual da tela. Abaixo de 200ms é bom; acima de 500ms, o usuário sente que a página "travou". Diferente do LCP, aqui o vilão quase sempre é o JavaScript.

Por que a página não responde

O navegador tem uma thread principal que faz tudo: executa JavaScript, calcula layout, pinta a tela. Se um script ocupa essa thread por 300ms, o clique espera na fila.

Os culpados frequentes

• Re-renderizações grandes: um estado global que, ao mudar, re-renderiza a página inteira.
• Trabalho pesado no evento: filtrar milhares de itens a cada tecla. Debounce ajuda (Debounce e throttle em inputs: busca rápida sem derrubar a API).
• Scripts de terceiros: chat, mapas de calor, pixels — tudo disputando a mesma thread.
• Bundles enormes sendo interpretados enquanto o usuário já tenta interagir (Bundle JavaScript pesado: como descobrir quem está engordando o seu site).

Técnicas que funcionam

1. 1.Dê feedback primeiro, calcule depois: atualize o botão imediatamente e processe em seguida.
2. 2.Quebre tarefas longas em pedaços menores, devolvendo o controle ao navegador entre eles.
3. 3.Use transições do React (useTransition, useDeferredValue) para atualizações que podem esperar.
4. 4.Virtualize listas longas.
5. 5.Carregue scripts de terceiros depois da interação inicial.

Como medir

O Search Console mostra o INP dos usuários reais. No Chrome, o painel Performance revela as tarefas longas que bloqueiam cada interação.

INP completa a tríade com LCP e CLS — panorama em Como otimizar a performance de aplicações React e React Native para passar no Core Web Vitals.

Veja a frente de Performance WPO da We Codex ou fale com a gente.