INP explicado: o que é e como melhorar essa métrica

INP, ou Interaction to Next Paint, mede o tempo entre o momento em que o visitante interage com a página — um clique, um toque na tela, uma tecla pressionada — e o momento em que o navegador consegue atualizar visualmente a tela em resposta a essa interação. Em 2024, o INP substituiu o antigo FID (First Input Delay) como a métrica oficial de responsividade dentro das Core Web Vitals, justamente porque avalia todas as interações da visita, não só a primeira.

Um INP bom fica abaixo de 200 milissegundos. Entre 200 e 500 ms é considerado "precisa melhorar", e acima de 500 ms é ruim. A diferença entre esses números pode parecer pequena, mas é exatamente o tipo de atraso que faz um visitante clicar de novo em um botão, achando que não funcionou — e às vezes disparar a ação duas vezes.

Por que o site "trava" ao clicar

O navegador processa JavaScript em uma única linha de execução principal. Enquanto essa linha está ocupada rodando um script pesado, ela não consegue responder a nada mais, incluindo cliques do usuário — a interação fica na fila até o script liberar o processador. Isso é chamado de "long task" (tarefa longa), geralmente qualquer bloco de execução acima de 50 milissegundos.

Os causadores mais comuns de INP alto são: scripts de terceiros (chats, pixels de anúncio, analytics, pop-ups), frameworks JavaScript que re-renderizam páginas inteiras a cada interação pequena, event listeners mal otimizados que fazem cálculos pesados a cada clique, e uma quantidade excessiva de JavaScript sendo processada logo após o carregamento inicial, competindo com as primeiras interações do visitante.

Como melhorar o INP

• Quebrar tarefas longas em pedaços menores, cedendo o controle ao navegador entre uma etapa e outra (usando técnicas como setTimeout ou scheduler.yield).
• Adiar JavaScript não essencial que não é necessário para a primeira interação do visitante.
• Auditar scripts de terceiros — muitas vezes um único widget de chat ou uma tag de marketing mal implementada é responsável pela maior parte do atraso.
• Evitar re-renderizações desnecessárias em frameworks front-end, atualizando só a parte da tela que realmente mudou.
• Usar web workers para processar cálculos pesados fora da linha principal, quando aplicável.

Por que é uma métrica difícil de medir em laboratório

Diferente do LCP, o INP depende de haver uma interação real — um teste de laboratório sem ninguém clicando na página simplesmente não gera esse dado. É por isso que o INP é uma métrica que só ganha sentido de verdade com dados de campo, coletados de visitantes reais interagindo com o site ao longo do tempo, em vez de uma simulação única de carregamento. Um site pode parecer irrepreensível em um teste de Lighthouse e ainda assim ter um INP ruim na prática, se os scripts carregados dinamicamente durante a navegação real pesarem mais do que na simulação.

Este conteúdo tem caráter informativo e não substitui uma análise técnica personalizada do seu site.