Interaction to Next Paint (INP)
Interaction to Next Paint (INP) e uma metrica do Core Web Vitals que mede quanto tempo uma pagina leva para responder visualmente apos uma interacao do usuario - clique, toque ou pressionamento de tecla. Em marco de 2024, o Google promoveu o INP a fator oficial de ranqueamento, substituindo o First Input Delay (FID).
Interaction to Next Paint (INP) e uma metrica do Core Web Vitals que mede quanto tempo uma pagina leva para responder visualmente apos uma interacao do usuario - clique, toque ou pressionamento de tecla. Em marco de 2024, o Google promoveu o INP a fator oficial de ranqueamento, substituindo o First Input Delay (FID).
Por Que Importa
O FID capturava apenas o atraso da primeira interacao, mas o INP acompanha todas as interacoes ao longo do ciclo de vida da pagina e pontua pela mais lenta. Isso reflete o que os usuarios realmente sentem. Segundo o Google, em 2026, cerca de 36% dos sites desktop e 45% dos sites mobile ainda nao atingem o limite "Bom" - o que torna a otimizacao do INP um claro diferencial em relacao as paginas concorrentes.
Limites
| Classificacao | Valor de INP |
|---|---|
| Bom | <= 200ms |
| Precisa Melhorar | 200-500ms |
| Ruim | > 500ms |
Pontuado no 75o percentil (p75) dos dados reais de usuarios do Chrome User Experience Report (CrUX).
O Que Deixa o INP Mais Lento
Tarefas longas de JavaScript: Qualquer tarefa que mantenha a thread principal ocupada por mais de 50ms bloqueia a proxima interacao.
Atraso de entrada (input delay): O tempo antes de um manipulador de eventos rodar porque a thread principal esta ocupada com outro trabalho.
Atraso de apresentacao (presentation delay): O tempo entre o termino do tratamento do evento e a renderizacao do proximo quadro pelo navegador - normalmente causado por mudancas complexas de DOM ou layout.
Como Otimizar
Quebre tarefas longas: Use setTimeout, scheduler.yield() ou requestIdleCallback para dividir tarefas com mais de 50ms.
Mantenha os manipuladores de eventos leves: Nao execute trabalho pesado dentro de um manipulador de clique - adie-o para alem do proximo requestAnimationFrame.
Evite re-renderizacoes desnecessarias: No React, use memo, useMemo e useCallback para evitar atualizacoes redundantes.
Use contain do CSS: Propriedades como contain: content limitam o escopo de layout e pintura, tornando a renderizacao de quadros mais barata.
Adie scripts de terceiros: Carregue anuncios, analytics e widgets de chat com async/defer para que nao bloqueiem as interacoes.
Ferramentas de medicao: Use o PageSpeed Insights, a extensao Web Vitals para Chrome e o relatorio Core Web Vitals do Search Console para obter dados reais de INP.
Fontes: