Como melhorar o INP (Interaction to Next Paint) em sites?

Como melhorar o INP em sites? A resposta curta é: você precisa reduzir tudo o que ocupa a thread principal do navegador e atrasa a próxima atualização visual depois de um clique, toque ou interação pelo teclado. Na prática, isso significa quebrar tarefas longas de JavaScript, remover scripts desnecessários, simplificar event listeners, otimizar recursos que bloqueiam a renderização, controlar códigos de terceiros e medir o desempenho com dados reais de usuários. Um bom INP fica em 200 ms ou menos; entre 200 e 500 ms exige melhorias, e acima de 500 ms é considerado ruim.

INP, sigla de Interaction to Next Paint, é uma das métricas de Core Web Vitals mais importantes para SEO e experiência do usuário em 2026. O Google não avalia apenas se a página carrega rápido; ele também observa se, depois do carregamento, o usuário consegue interagir com o site de forma fluida. Um menu que demora para abrir após o toque, um botão de adicionar ao carrinho que parece travado, um filtro de produtos que responde tarde ou um campo de formulário que engasga enquanto a pessoa digita são sinais clássicos de problemas de INP.

Neste guia, você vai aprender como medir o INP, identificar os gargalos técnicos que pioram a pontuação e aplicar ações objetivas de otimização como desenvolvedor, dono de site ou administrador WordPress. Também veremos, com exemplos práticos, como a infraestrutura de hospedagem, o uso de CDN e uma conexão segura podem influenciar indiretamente a performance. Se você quer começar por uma base mais orientada a desempenho, pode avaliar Pacotes de hospedagem web e, para projetos em WordPress, as opções de Hospedagem WordPress.

O que é INP e por que ele é importante?

INP mede a capacidade geral de resposta de uma página às interações do usuário. A pessoa clica em um botão, troca de aba, abre um menu, digita em um formulário ou toca em um elemento no celular. O navegador processa essa interação, executa JavaScript, recalcula estilos e layout e, em seguida, exibe um novo estado visual na tela. O tempo entre a interação e essa atualização visual é o que entra na avaliação do INP.

Nos anos anteriores, a métrica mais comentada era o First Input Delay, ou FID. Porém, o FID se concentrava apenas no atraso da primeira interação. O INP é mais abrangente: ele considera as interações ao longo de todo o ciclo de vida da página. Por isso, representa melhor a experiência real em e-commerces, blogs, painéis SaaS, sites institucionais, portais de membros e aplicações com muitas ações no front-end.

Os limites recomendados pelo Google são:

O INP não é importante apenas para SEO. Ele também afeta diretamente conversões, engajamento e confiança. Imagine uma página de categoria em um e-commerce mobile: se o botão de filtro demora 700 ms para abrir, o usuário pode achar que o toque não funcionou, tocar novamente ou simplesmente abandonar a página. Por outro lado, interfaces que respondem em 150-180 ms parecem mais confiáveis, rápidas e profissionais.

Como medir o INP?

Antes de otimizar o INP, é fundamental medir corretamente. Ferramentas de laboratório ajudam a levantar hipóteses e encontrar problemas técnicos, mas os dados reais mostram como o site se comporta em dispositivos, conexões e navegadores usados pelo seu público. A abordagem mais segura é combinar esses dois tipos de informação.

1. Faça uma checagem rápida com o PageSpeed Insights

O PageSpeed Insights mostra o valor real de INP quando há dados disponíveis no Chrome User Experience Report. Analise separadamente os resultados de mobile e desktop. Dê prioridade especial ao mobile, porque celulares com processadores mais modestos sobrecarregam a thread principal com muito mais facilidade. Se o INP da página estiver acima de 200 ms, anote as oportunidades e diagnósticos indicados pela ferramenta.

2. Acompanhe o relatório de Core Web Vitals no Search Console

O relatório de Core Web Vitals no Google Search Console lista problemas por grupos de URLs. Em vez de enxergar apenas uma página isolada, você consegue entender se modelos semelhantes estão sofrendo com o mesmo gargalo. Por exemplo, se todas as páginas de produto apresentam INP ruim, a causa provavelmente está no tema, no script do carrinho, no plugin de avaliações ou no código de variações do produto.

3. Use o painel Performance do Chrome DevTools

O painel Performance do Chrome DevTools mostra quais funções JavaScript rodam no momento do clique e quais tarefas passam de 50 ms, formando long tasks. Grave a abertura de um menu, o clique em um filtro ou a digitação em um campo de busca e observe os blocos na thread principal. Execuções longas de script, recálculos repetidos de estilo e operações pesadas de layout são sinais críticos para o INP.

4. Implemente monitoramento de usuários reais

Em projetos com tráfego relevante, usar RUM, ou Real User Monitoring, é extremamente valioso. Com a biblioteca Web Vitals, você pode coletar dados de INP e analisá-los por URL, tipo de dispositivo, navegador, país e alvo da interação. Por exemplo, os dados podem revelar que apenas usuários Android estão tendo 620 ms ao tocar no menu mobile. Essa informação evita otimizações genéricas e permite corrigir exatamente o ponto que está prejudicando a experiência.

Causas mais comuns de um INP ruim

A maior parte dos problemas de INP não vem diretamente da resposta do servidor, mas do excesso de trabalho que o navegador precisa executar no momento da interação. Ainda assim, infraestrutura, entrega de arquivos, cache e dependências de terceiros podem aumentar essa carga de forma indireta.

Arquivos JavaScript pesados

Sites modernos carregam vários arquivos JavaScript para tema, slider, chat ao vivo, anúncios, analytics, testes A/B, mapas e componentes de redes sociais. Esses arquivos não são apenas baixados; eles também precisam ser analisados, compilados e executados pelo navegador. Quando esse processo ocupa a thread principal, os cliques e toques do usuário ficam esperando na fila.

Tarefas longas

Qualquer trabalho na thread principal que dure mais de 50 ms é considerado uma long task. Uma única tarefa de 300 ms já pode atrasar a resposta a um clique. Por exemplo, se ao pressionar um botão de filtro um script recalcula no cliente todos os 1000 produtos da lista, o INP pode passar facilmente de 500 ms.

DOM complexo e operações caras de layout

Um número excessivo de nós HTML, componentes muito aninhados, alterações frequentes de estilo e o erro conhecido como layout thrashing — medir e escrever no layout repetidamente — prejudicam o INP. Mega menus, páginas de listagem de produtos e aplicações de página única muito longas estão entre os cenários de maior risco.

Scripts de terceiros

Redes de anúncios, pixels de rastreamento, ferramentas de mapa de calor, códigos de suporte online e embeds de redes sociais executam códigos que não estão totalmente sob seu controle. Se esses scripts usam a thread principal no momento da interação, até uma interface bem programada pode parecer lenta.

Excesso de plugins e temas pesados no WordPress

Em sites WordPress, cada plugin pode adicionar seus próprios arquivos CSS e JS. Quando o script de um plugin de formulário, necessário apenas na página de contato, é carregado em todo o site, ele cria peso desnecessário. O mesmo vale para page builders, sliders, pop-ups e recursos visuais que, principalmente no mobile, podem derrubar a pontuação de INP.

Como melhorar o INP? Plano de ação passo a passo

A resposta prática para como melhorar o INP é seguir um ciclo simples: medir, isolar, reduzir, dividir e medir novamente. Os passos abaixo estão organizados de acordo com a prioridade que equipes técnicas costumam aplicar em projetos reais.

1. Encontre a interação mais problemática

Primeiro, descubra qual interação está gerando o pior INP. É o menu mobile? O botão de adicionar ao carrinho? O painel de filtros? A caixa de busca? O envio de formulário? Ao gravar no DevTools Performance, repita a ação algumas vezes. Dentro do registro, observe as áreas de Event Timing ou Interaction para identificar o alvo do clique e a duração total.

Exemplo prático: em uma loja virtual, o botão de filtros da categoria gerava 740 ms de INP. A análise mostrou que, ao tocar no botão, todos os cards de produtos eram renderizados novamente e cerca de 1800 nós do DOM eram atualizados ao mesmo tempo. Ao separar o painel de filtros em um componente próprio e adiar a atualização da lista, o INP caiu para cerca de 190 ms.

2. Reduza o tamanho dos pacotes JavaScript

Remover código não utilizado é uma das ações mais eficazes para melhorar o INP. Use um bundle analyzer para descobrir quais bibliotecas estão aumentando demais o arquivo final. Em vez de importar uma biblioteca inteira, carregue apenas o módulo necessário. Por exemplo, uma biblioteca grande de datas pode ser substituída por alternativas mais leves ou pela API nativa Intl.

• Desative recursos do tema que não estão em uso.
• Não carregue scripts de slider, galeria e animação em páginas que não precisam deles.
• Use ferramentas modernas de build com suporte a tree shaking.
• Não envie código do painel administrativo para o lado do visitante.
• Sirva polyfills antigos apenas para navegadores que realmente precisam deles.

3. Quebre tarefas longas em partes menores

Para que o navegador consiga responder às interações, a thread principal precisa ficar livre em intervalos regulares. Em vez de executar cálculos grandes de uma vez, divida o trabalho em blocos menores. setTimeout, scheduler.postTask, requestIdleCallback e os mecanismos de agendamento dos frameworks podem ajudar nesse processo. A ideia é trocar uma tarefa única de 300 ms por várias tarefas de 20-40 ms.

Se você precisa filtrar e redesenhar uma tabela com 5000 linhas, por exemplo, atualize primeiro as 50 linhas que o usuário está vendo e processe o restante com virtualização ou tarefas em segundo plano. Assim, o resultado do clique aparece rapidamente e o processamento restante não bloqueia a experiência.

4. Simplifique os event listeners

Executar funções pesadas em cada evento de click, input, scroll ou keydown prejudica muito o INP. Um erro comum é disparar uma requisição de API ou recalcular uma lista inteira a cada tecla digitada em um campo de busca. Use técnicas de debounce e throttle para reduzir a frequência das operações.

• Aplique debounce de 300 ms em campos de busca.
• Prefira passive listeners em eventos de scroll.
• Use event delegation em vez de adicionar listeners individuais a centenas de elementos.
• Após o clique, mostre primeiro um feedback visual e só depois inicie o trabalho pesado.

5. Dê feedback visual imediato ao usuário

Como o INP está ligado ao próximo paint, é importante gerar alguma mudança visual logo depois da interação. Um botão que muda para o estado ativo, um indicador de carregamento, um skeleton ou o primeiro quadro da abertura de um painel já sinalizam que o sistema recebeu a ação. Em vez de esperar uma resposta pesada de API para atualizar toda a interface de uma vez, desenhe feedback rápido e evolua a tela em etapas.

6. Reduza o custo de renderização e layout

CSS e layout também impactam o INP, não apenas JavaScript. Depois de um clique, alterar tamanho, posição e estilo de muitos elementos pode sair caro. Em animações CSS, usar transform e opacity costuma ser mais eficiente do que animar width, height, top ou left. Em listas grandes, use virtualização e evite manter centenas de cards invisíveis no DOM.

Evite layout thrashing. Ou seja, não leia a largura de um elemento, escreva um estilo e leia novamente dentro do mesmo loop. Agrupe leituras e escritas. Essa reorganização simples pode economizar dezenas de milissegundos em páginas complexas.

7. Audite códigos de terceiros

Para cada script externo, faça a pergunta: este código contribui diretamente para conversão, análise ou receita? Se o impacto for baixo, remova, adie ou carregue apenas nas páginas necessárias. Manter o chat online na página de checkout pode fazer sentido; carregá-lo imediatamente em todos os posts do blog talvez não. Sempre que possível, carregue scripts de anúncios e analytics com defer ou async e impeça que eles disputem espaço com interações críticas.

8. Use Web Worker para mover cálculos pesados

Quando tarefas como filtragem de produtos, processamento de JSON grande, criptografia, conversão de dados ou cálculos complexos travam a thread principal, considere usar Web Worker. O Worker executa essas operações em segundo plano, enquanto a thread principal continua respondendo aos cliques, toques e entradas do usuário. Nem tudo precisa ir para um Worker, mas operações que consomem mais de 100 ms de CPU podem se beneficiar bastante.

9. Otimize o custo de framework e hidratação

Em projetos com React, Vue, Angular, Next.js ou Nuxt, o custo de hidratação após o carregamento inicial pode afetar o INP. Em vez de tornar a página inteira interativa, avalie arquitetura de ilhas, partial hydration ou server components. Mantenha estático o que não exige interação. Componentes como modal, comentários ou recomendações podem ser carregados apenas quando o usuário realmente precisar deles.

10. Reduza o peso de plugins em sites WordPress

Se você usa WordPress, faça um inventário dos plugins como parte da otimização de INP. Remova plugins duplicados que fazem a mesma função. Verifique se plugins de formulário, galeria, slider e pop-up carregam arquivos em todas as páginas. Com plugins de performance que oferecem asset unload, você pode desativar CSS e JS desnecessários página por página.

Exemplo prático: em um site institucional WordPress, o INP da página inicial no mobile era de 560 ms. O plugin de slider foi removido e a área hero foi refeita com HTML/CSS leve; o script de pop-up passou a carregar com 5 segundos de atraso; e o JavaScript do formulário de contato ficou restrito à página de contato. O INP mobile caiu para 210 ms e, após pequenos ajustes adicionais, chegou a 175 ms.

Como hospedagem e infraestrutura afetam o INP?

O INP é principalmente uma métrica de responsividade do lado do cliente, ou seja, a carga na thread principal do navegador é o fator decisivo. Mesmo assim, a hospedagem não é irrelevante. Resposta rápida do servidor, cache bem configurado, versão moderna de PHP, suporte a HTTP/2 ou HTTP/3, CDN e compressão ajudam a entregar arquivos de forma mais rápida e previsível. Isso contribui para que a thread principal trabalhe de maneira mais controlada, especialmente no carregamento inicial.

Em uma infraestrutura fraca, TTFB alto, recursos que chegam tarde, cache inconsistente e sobrecarga do servidor degradam a experiência. Um WordPress sem cache, que executa PHP e consultas pesadas ao banco de dados a cada requisição, demora mais para deixar a página pronta para interação. Por isso, o trabalho de INP não deve ser tratado como algo totalmente separado das otimizações de LCP e TTFB.

• Use cache do lado do servidor.
• Prefira PHP 8.x e versões atualizadas de banco de dados.
• Sirva arquivos estáticos por uma CDN.
• Ative compressão Brotli ou Gzip.
• Mantenha a configuração SSL/TLS atualizada; para conexão segura, consulte certificado SSL.
• Se está criando um novo projeto ou site de marca, use Consulta de domínio para escolher o domínio certo.

Tabela de prioridades para otimização de INP

A tabela abaixo resume quando cada melhoria costuma ser indicada em um site típico. Os resultados variam de projeto para projeto; por isso, depois de cada alteração, meça novamente com PageSpeed Insights, Search Console e dados reais de usuários.

Checklist técnico para desenvolvedores

A melhoria de INP deve virar uma checklist acompanhável dentro da equipe. Caso contrário, uma otimização pontual de performance pode ser desfeita poucos meses depois por novos plugins, scripts de campanha e mudanças de design.

• Definir meta de INP mobile abaixo de 200 ms para cada template crítico.
• Controlar o aumento de bundle size nos processos de pull request.
• Testar o impacto de performance antes de adicionar qualquer novo script de terceiros.
• Medir pelo DevTools Performance pelo menos menu mobile, busca, formulário e interações de compra.
• Tentar reduzir long tasks para menos de 50 ms; quando não for possível, quebrá-las em partes.
• Preferir transform e opacity em animações.
• Usar paginação, infinite scroll ou virtualização em listas grandes.
• Reportar dados de RUM mensalmente e acompanhar alertas do Search Console.

Erros comuns na otimização de INP

Instalar apenas um plugin de cache

Cache é importante, mas não é a solução única para INP ruim. Ele pode entregar a página mais rapidamente, porém não corrige automaticamente um JavaScript pesado executado depois do clique do usuário. Por isso, cache deve caminhar junto com otimização de código.

Olhar só para o score de laboratório e esquecer o usuário real

Testes do Lighthouse são úteis, mas não bastam sozinhos. Usuários reais acessam o site com dispositivos, redes e navegadores diferentes. Celulares Android de entrada, em especial, costumam revelar problemas de INP que não aparecem em testes feitos em desktop.

Adiar todos os scripts sem critério

Técnicas de defer e delay precisam ser aplicadas com cuidado. Uma configuração errada pode quebrar menu, carrinho, formulário ou fluxo de pagamento. Scripts ligados a interações críticas devem ser preservados, enquanto códigos desnecessários e de terceiros podem ser adiados de forma controlada.

Focar em performance visual e ignorar interação

Comprimir imagens é excelente para LCP, mas nem sempre resolve INP. Se o problema está no código executado depois do clique, otimização de imagem não será suficiente. Core Web Vitals precisa ser tratado de forma integrada.

Estratégia de SEO focada em INP para 2026

Em 2026, uma boa estratégia de SEO combina performance técnica, qualidade de conteúdo e infraestrutura confiável. Com AI Overviews e experiências de busca cada vez mais sofisticadas, o Google tende a valorizar páginas que entregam respostas rápidas, úteis e agradáveis. Por isso, otimizar INP não é apenas tarefa de desenvolvedor; é uma responsabilidade compartilhada entre SEO, UX, conteúdo e infraestrutura.

Em um artigo de blog, o menu de índice, o filtro de categorias ou o formulário de comentários devem responder rapidamente. Em um e-commerce, seleção de tamanho, mudança de variação e adição ao carrinho precisam parecer instantâneas. Em sites institucionais, formulário de orçamento, menu mobile e botões de contato não podem atrasar. Quando o usuário sente que o site é rápido, ele permanece mais tempo, visita mais páginas e tem maior probabilidade de converter.

Com a Hostragons, você pode criar uma base sólida para SEO técnico ao escolher hospedagem orientada a performance, tecnologias de servidor atualizadas e uma infraestrutura segura. Gerenciar domínio, hospedagem e segurança em um só lugar reduz a carga operacional e permite que sua equipe foque mais em experiência do usuário e qualidade de conteúdo. Para soluções relacionadas, veja Hosting Corporativo, servidor VPS e certificado SSL.

Conclusão

Melhorar o INP significa, em essência, evitar que o navegador faça trabalho desnecessário exatamente no momento em que o usuário interage com a página. Comece encontrando, com dados reais, as interações mais lentas. Depois, reduza o peso do JavaScript, quebre tarefas longas, simplifique event listeners, diminua o custo de renderização e controle scripts de terceiros. Hospedagem, cache, CDN e configurações modernas de segurança formam uma base importante para sustentar esse processo.

Se você quer tornar seu site mais rápido, confiável e agradável, comece por uma medição simples: verifique o INP mobile da sua página mais importante e aplique os três primeiros passos deste guia. Pelo lado da infraestrutura, você pode analisar as soluções da Hostragons e comparar com calma o plano de hospedagem mais adequado para as necessidades do seu projeto.

Perguntas frequentes

Qual deve ser a pontuação de INP?

Um bom INP é de 200 ms ou menos. Entre 200 e 500 ms indica que há pontos a melhorar, enquanto acima de 500 ms sinaliza uma experiência ruim para o usuário. Os dados mobile devem ser avaliados com prioridade.

Qual é a diferença entre INP e FID?

FID mede apenas o atraso da primeira interação do usuário. INP avalia a qualidade de resposta das interações ao longo de toda a vida da página. Por isso, o INP representa a experiência real de forma mais completa.

Por que o INP costuma ser ruim em sites WordPress?

Normalmente por excesso de plugins, tema pesado, CSS/JS desnecessário carregado em todas as páginas, sliders, scripts de pop-up e códigos de terceiros. Limpeza de plugins, desativação de arquivos por página e uso de temas leves costumam gerar boas melhorias.

Trocar de hospedagem melhora o INP?

A hospedagem, sozinha, não corrige JavaScript pesado nem tarefas longas. Porém, servidor rápido, bom cache, CDN, PHP atualizado e entrega estável de recursos apoiam a otimização de INP. O efeito é indireto, mas pode ser importante, especialmente em sites WordPress.

Quanto tempo leva para a otimização de INP aparecer?

Depois de ajustes em código e plugins, os resultados podem aparecer imediatamente em testes de laboratório. Já no Search Console e nos dados reais do Chrome, a mudança costuma levar algumas semanas para ser refletida, pois é necessário coletar volume suficiente de dados de usuários.