O texto abaixo define INP, explica a diferença em relação ao FID, os limites considerados bons pelo Google, as causas mais comuns de INP alto e formas práticas de melhorar (main thread, JavaScript, scripts de terceiros). Inclui como medir, checklist, erros comuns e perguntas frequentes.
O que é INP (Interaction to Next Paint)
INP é o tempo decorrido entre o início de uma interação do usuário (por exemplo, um clique em um botão) e o momento em que o navegador consegue pintar a próxima frame na tela em resposta a essa interação. Na prática: o usuário age e espera até ver algo mudar. Se esse intervalo for longo, a página parece “travada” ou lenta para reagir.
O INP faz parte dos Core Web Vitals, junto com LCP (carregamento) e CLS (estabilidade visual). Ele substitui o FID (First Input Delay), que media apenas o atraso da primeira interação. O INP considera várias interações na sessão e usa uma representativa (por exemplo, a pior ou uma amostra) para refletir melhor a responsividade ao longo do uso. Assim, uma página que responde bem no primeiro clique mas trava em cliques seguintes passa a ser sinalizada.
O valor é dado em milissegundos (ms). O Google classifica:
- Bom: INP até 200 ms
- Precisa melhorar: entre 200 ms e 500 ms
- Ruim: acima de 500 ms
Por que o INP importa para SEO e experiência
O INP entra nos sinais de experiência na página que o Google usa para ranqueamento e no relatório de Core Web Vitals do Search Console. Páginas com INP ruim podem perder posição em relação a concorrentes mais responsivos. Além disso:
- Percepção de qualidade: atrasos acima de 200 ms já são perceptíveis. Usuários tendem a achar a página lenta ou com defeito.
- Conversão e uso: botões que demoram a responder aumentam abandono e reduzem cliques em formulários, menus e CTAs.
- Mobile-first: a indexação é mobile-first e muitos dispositivos móveis têm menos poder de processamento; JavaScript pesado impacta mais o INP nesses aparelhos.
Melhorar o INP significa deixar a página mais responsiva em todas as interações, não só na primeira. A ferramenta Page Speed do Senior SEO exibe INP e as demais Core Web Vitals por URL.
Como o INP é medido
O navegador registra, para cada interação (clique, toque, pressionar tecla), o tempo desde o evento até a próxima paint. O INP reportado para a página é um valor representativo dessas medições — no campo (dados reais de usuários), o Google usa percentis (por exemplo, o 98º percentil das interações) para não ser distorcido por um único evento muito ruim. Em ferramentas de laboratório como o PageSpeed Insights, a simulação pode usar a pior interação observada na sessão de teste.
Interações consideradas incluem cliques em elementos clicáveis, toques em telas touch e pressionar teclas. Scroll por si só não é uma “interaction” no sentido do INP; o foco é a resposta a ações diretas do usuário.
Causas comuns de INP alto
O atraso entre a interação e o next paint ocorre quando o main thread (thread principal do JavaScript) está ocupado. Enquanto o main thread processa uma tarefa longa, o evento do usuário fica na fila e a interface não atualiza. As causas mais frequentes:
JavaScript pesado e tarefas longas
Scripts que executam por muitos milissegundos sem ceder o controle bloqueiam a resposta a cliques e teclas. Cálculos pesados, manipulação grande de DOM, parsing de JSON ou processamento de listas longas no carregamento ou em resposta a um clique atrasam o INP.
Scripts de terceiros
Analytics, chats, anúncios, widgets e redes sociais costumam injetar JavaScript que roda no main thread. Vários scripts ao mesmo tempo competem pelo tempo da thread e aumentam o atraso da próxima paint.
Handlers de evento pesados
Funções executadas no clique ou no teclado que fazem muito trabalho (por exemplo, buscar dados, atualizar muitos nós do DOM, fazer layout ou reflow) deixam o INP alto para essa interação.
Layout thrashing e reflows desnecessários
Ler e escrever no DOM em sequência (layout thrashing) força o navegador a recalcular layout várias vezes. Cada reflow consome tempo do main thread e atrasa a resposta visual.
Como melhorar o INP
O objetivo é reduzir o tempo em que o main thread está ocupado quando o usuário interage e garantir que a resposta visual aconteça em até 200 ms quando possível.
Quebrar tarefas longas (long tasks)
Tarefas que rodam mais de 50 ms no main thread podem atrasar a resposta. Divida o trabalho em blocos menores e use setTimeout, requestAnimationFrame ou scheduler.yield() (quando disponível) para ceder ao navegador entre blocos. Assim os eventos de interação são processados mais cedo.
Adiar JavaScript não crítico
Carregue scripts que não são necessários para a primeira interação com defer ou async, e evite scripts bloqueantes no topo da página. Quanto menos código executar antes da primeira pintura e da primeira interação, melhor o INP.
Reduzir e otimizar JavaScript
Menos código para parsear e executar reduz carga no main thread. Use minificação de JavaScript, remova código não usado (tree shaking) e avalie se bibliotecas pesadas podem ser trocadas por alternativas mais leves ou carregadas sob demanda. O artigo minificação de CSS e JavaScript traz o passo a passo.
Mover trabalho pesado para Web Workers
Cálculos intensos, processamento de dados ou operações que não precisam acessar o DOM podem rodar em um Web Worker. A thread principal fica livre para responder às interações enquanto o worker processa em segundo plano.
Otimizar event handlers
Mantenha os handlers de clique e teclado enxutos: evite lógica pesada direto no handler; agende trabalho pesado para depois (por exemplo, com requestIdleCallback ou setTimeout(..., 0)) e atualize a interface o mais cedo possível (por exemplo, mostrar um estado de “carregando” antes de fazer a requisição).
Reduzir impacto de scripts de terceiros
Carregue analytics, chats e anúncios de forma assíncrona ou após o conteúdo principal. Use o mínimo de scripts necessário e prefira carregar sob demanda (por exemplo, chat ao clicar em “Ajuda”). Monitore no PageSpeed ou no Chrome DevTools quais origens mais consomem main thread.
Como medir o INP
Ferramentas gratuitas que exibem INP:
- Page Speed (Senior SEO): usa a API do PageSpeed Insights e mostra INP, LCP e CLS por URL, com sugestões de melhoria. Gratuito.
- PageSpeed Insights (pagespeed.web.dev): analisa a URL em mobile e desktop e retorna Core Web Vitals, incluindo INP, com oportunidades de otimização.
- Google Search Console: relatório “Experiência na página” / “Core Web Vitals” com dados de campo (usuários reais). Mostra quantas URLs estão “Bem avaliadas” ou com problemas em INP.
- Chrome DevTools → Performance: grave uma sessão, interaja com a página e analise as “Long tasks” e o tempo até a próxima frame após o evento. Útil para identificar qual script ou handler está atrasando a resposta.
Dados de campo (Search Console) refletem usuários reais; laboratório (PageSpeed, DevTools) ajuda a reproduzir e corrigir em ambiente controlado.
Checklist para melhorar o INP
- Medir INP por URL com PageSpeed ou Page Speed do Senior SEO e priorizar páginas com mais tráfego ou pior métrica.
- Identificar long tasks no Chrome DevTools (Performance) e quebrar em blocos menores com yield ao main thread.
- Usar defer ou async em scripts não críticos; evitar bloqueio de renderização no <head>.
- Minificar e, quando possível, reduzir JavaScript (minificador de JavaScript, tree shaking).
- Manter event handlers leves; adiar trabalho pesado e dar feedback visual rápido (ex.: “Carregando…”).
- Mover processamento pesado para Web Workers quando não depender do DOM.
- Revisar scripts de terceiros: carregar sob demanda, adiar ou reduzir quantidade.
- Conferir no Search Console se as melhorias refletem em mais URLs “Bem avaliadas” em Core Web Vitals.
Erros comuns com INP
- Focar só em LCP e CLS: as três métricas (LCP, INP, CLS) contam para Core Web Vitals. Página que carrega rápido mas demora a responder a cliques continua com experiência ruim.
- Ignorar mobile: INP costuma ser pior em dispositivos móveis. Teste e otimize pensando em mobile-first.
- Handler que faz tudo no clique: colocar requisições, processamento e DOM pesado dentro do mesmo handler atrasa a próxima paint. Separe resposta imediata e trabalho em background.
- Muitos scripts de terceiros carregando juntos: cada um compete pelo main thread. Adie ou reduza para melhorar INP.
Perguntas frequentes sobre INP
Qual a diferença entre INP e FID?
O FID media apenas o atraso da primeira interação na página. O INP considera várias interações na sessão e usa um valor representativo (por exemplo, uma das piores), refletindo a responsividade ao longo do uso. O Google substituiu o FID pelo INP em março de 2024 nos Core Web Vitals.
INP afeta o SEO?
Sim. O INP é um dos Core Web Vitals usados como sinal de experiência na página. Páginas com INP ruim podem ser avaliadas pior e perder posição em relação a concorrentes mais responsivos. O relatório de Experiência no Search Console usa INP para marcar URLs como “Bem avaliadas” ou com problemas.
O que é um bom valor de INP?
O Google considera bom INP até 200 ms; entre 200 e 500 ms precisa melhorar; acima de 500 ms é ruim. O objetivo é manter a maioria das páginas no verde (até 200 ms).
Por que meu INP é bom no desktop e ruim no mobile?
Dispositivos móveis costumam ter CPU mais lenta e menos memória. O mesmo JavaScript que no desktop roda em poucos milissegundos no mobile pode gerar long tasks e atrasar a resposta. Otimize reduzindo e adiando JavaScript e quebrando tarefas longas; teste sempre em condições de mobile.
Conclusão
INP (Interaction to Next Paint) mede o tempo entre uma interação do usuário (clique, toque, tecla) e a próxima atualização visual e substitui o FID nos Core Web Vitals desde março de 2024. Valores até 200 ms são considerados bons; acima de 500 ms, ruins. INP alto costuma vir de main thread ocupada: JavaScript pesado, tarefas longas, handlers de evento pesados e scripts de terceiros. Melhorar exige quebrar long tasks, adiar e reduzir JavaScript, otimizar handlers, usar Web Workers quando fizer sentido e reduzir impacto de terceiros. Meça com Page Speed, PageSpeed Insights e Search Console e priorize mobile. O INP é um dos três Core Web Vitals; manter LCP, INP e CLS no verde ajuda experiência e SEO.
Quer ver INP, LCP e CLS do seu site? Use a ferramenta Page Speed do Senior SEO e confira também a análise de SEO para uma visão técnica completa.