Interaction to Next Paint (INP)

O que esta verificação faz

Lê o INP do PageSpeed Insights. O INP mede a interação mais lenta no percentil 98 (clique, toque, tecla) durante uma sessão, em milissegundos. Desde março de 2024, o INP substituiu o First Input Delay (FID) como terceiro Core Web Vital.

Valor de INP	Veredicto
≤ 200 ms	Bom
200–500 ms	Precisa de melhorar
> 500 ms	Mau

Porque é importante

O INP é a métrica de desempenho mais próxima de “este site parece rápido?”. Ao contrário do LCP (que mede o carregamento) ou do CLS (que mede a estabilidade), o INP mede a interatividade ao longo da sessão, não só no carregamento.

Um INP fraco é quase sempre um problema de JavaScript. A thread principal está ocupada a correr os teus scripts, por isso, quando o utilizador clica, o handler do clique fica em fila atrás do que está a correr e o ecrã arrasta.

Como corrigir

1. Encontra as tuas piores interações. Nas Chrome DevTools, abre o separador Performance, grava uma sessão que inclua a interação lenta. Procura tarefas longas (>50 ms) logo a seguir ao evento de clique.

2. Divide tarefas longas. Qualquer JavaScript síncrono que corra por mais de 50 ms bloqueia a entrada do utilizador. Divide com blocos compatíveis com await:

async function processarItens(items) {
  for (const item of items) {
    await cederAoPrincipal();
    processar(item);
  }
}

function cederAoPrincipal() {
  return new Promise(resolve => setTimeout(resolve, 0));
}

Browsers modernos também têm scheduler.yield() (Chromium 129+) que é mais limpo.

3. Adia scripts não críticos. Move analytics, anúncios, snippets de A/B testing, widgets de chat para carregarem após a primeira interação (ou usa requestIdleCallback).

4. Usa content-visibility: auto em secções fora do ecrã. O browser salta o layout e a pintura de conteúdo escondido até este entrar no scroll.

5. Aligeira re-renderizações em React/Vue/Svelte. Um assassino comum do INP: um handler de clique dispara uma atualização de estado que volta a renderizar 500 componentes. Usa memoização (React.memo, useMemo), virtualização para listas longas e fatias granulares de estado.

Perguntas frequentes

O PageSpeed Insights mostra INP?

Sim — em laboratório e em campo. O INP de campo vem do Chrome User Experience Report (CrUX) para sites com tráfego suficiente; sites mais pequenos só mostram INP simulado em laboratório.

O INP é o mesmo que o FID?

Não. O FID media apenas o atraso da primeira interação. O INP mede o pior caso de toda a sessão, incluindo o runtime do handler de clique e a próxima pintura. O INP é cerca de 5 vezes mais difícil de otimizar do que o FID era.

O meu site é maioritariamente estático. Porque é que o INP é fraco?

Mesmo um site estático costuma ter scripts pesados de terceiros (analytics, chat, banners de consentimento) a monopolizar a thread principal. Audita as tuas tags <script> e adia tudo o que não seja crítico para a primeira pintura.