Core Web Vitals
Core Web Vitals são as três métricas-chave do Google que medem carregamento, interatividade e estabilidade visual de páginas. Conheça os thresholds de LCP, INP,...
13 min de leitura
Interaction to Next Paint (INP)
Interaction to Next Paint (INP) é uma métrica dos Core Web Vitals que mede a responsividade de uma página da web, rastreando o tempo entre uma interação do usuário (clique, toque ou pressionamento de tecla) e a próxima atualização visual do navegador. Introduzida em maio de 2022 e substituindo oficialmente o First Input Delay (FID) em março de 2024, a INP avalia a responsividade geral de uma página durante toda a sessão do usuário, não apenas a primeira interação.
Definição de Interaction to Next Paint (INP)
Interaction to Next Paint (INP) é uma métrica dos Core Web Vitals que mede a rapidez com que uma página da web responde às interações do usuário, rastreando o tempo decorrido entre o momento em que um usuário inicia uma ação (como clicar em um botão, tocar em uma tela sensível ao toque ou pressionar uma tecla do teclado) e o momento em que o navegador renderiza a próxima atualização visual. Introduzida pela equipe do Chrome do Google em maio de 2022 como uma métrica experimental e promovida oficialmente a Core Web Vital estável em março de 2024, a INP substituiu o First Input Delay (FID) como a principal métrica de responsividade para avaliar a experiência da página. Diferentemente do FID, que media apenas o atraso da primeira interação em uma página, a INP fornece uma avaliação abrangente da responsividade ao observar todas as interações durante toda a sessão do usuário. Essa mudança reflete uma abordagem mais holística para medir a experiência do usuário, reconhecendo que 90% do tempo de um usuário em uma página ocorre após seu carregamento, tornando a responsividade consistente ao longo da sessão crítica para a satisfação do usuário e o desempenho de SEO.
Contexto Histórico e Evolução das Métricas de Responsividade
A introdução da INP representa uma evolução significativa na forma como o Google mede e avalia a responsividade de sites. Por anos, o First Input Delay (FID) serviu como a principal métrica de responsividade nos Core Web Vitals, focando exclusivamente no componente de atraso de entrada da primeira interação do usuário. No entanto, pesquisas e testes no mundo real revelaram limitações substanciais na abordagem do FID. A métrica capturava apenas o atraso antes dos manipuladores de eventos começarem a executar, ignorando o tempo gasto processando a interação e renderizando a resposta visual. Além disso, o foco do FID na primeira interação significava que páginas com responsividade ruim mais tarde na sessão do usuário ainda podiam obter boas pontuações de FID, criando uma imagem enganosa da responsividade geral da página. Em resposta a essas limitações, a equipe do Chrome do Google começou a explorar métricas alternativas em 2021, anunciando finalmente a INP como uma métrica experimental em maio de 2022. Após quase dois anos de testes com a comunidade e coleta de feedback, a INP tornou-se oficialmente um Core Web Vital estável em 12 de março de 2024, substituindo totalmente o FID. Essa transição ressalta o compromisso do Google em fornecer métricas de desempenho mais precisas e centradas no usuário que reflitam melhor as experiências reais de navegação.
Como o Interaction to Next Paint Funciona: Detalhamento Técnico
A INP mede a responsividade rastreando três fases distintas da interação do usuário: atraso de entrada, tempo de processamento e atraso de apresentação. O atraso de entrada representa o tempo entre o momento em que um usuário inicia uma ação e o momento em que o navegador começa a executar os manipuladores de eventos associados, geralmente causado por tarefas longas ou processamento em segundo plano bloqueando a thread principal. O tempo de processamento abrange a duração necessária para todos os callbacks dos manipuladores de eventos executarem, incluindo o código JavaScript que responde à ação do usuário. Finalmente, o atraso de apresentação é o tempo entre a conclusão dos manipuladores de eventos e o momento em que o navegador renderiza o próximo quadro, podendo envolver recálculo de layout, atualizações de estilo e trabalho de renderização. O valor total da INP representa a soma desses três componentes para uma única interação. É importante notar que a INP é calculada como o 98º percentil de todas as interações em uma página, o que significa que, se uma página receber muitas interações, o Google ignora os 2% piores como outliers e relata a responsividade que a grande maioria dos usuários experimenta. Para páginas com menos de 50 interações, a INP normalmente relata a pior interação observada. Essa abordagem baseada em percentil garante que falhas ocasionais de desempenho não penalizem desproporcionalmente sites que são geralmente responsivos.
Tabela Comparativa: INP vs. FID vs. Outras Métricas de Desempenho
| Métrica | Mede | Escopo | Limite (Bom) | Limite (Ruim) | Status |
|---|---|---|---|---|---|
| Interaction to Next Paint (INP) | Ciclo completo de interação (atraso de entrada + processamento + apresentação) | Todas as interações durante a sessão | ≤ 200ms | > 500ms | Core Web Vital Ativo (março 2024+) |
| First Input Delay (FID) | Apenas atraso de entrada (antes dos manipuladores de eventos executarem) | Primeira interação apenas | ≤ 100ms | > 300ms | Obsoleto (substituído por INP) |
| Total Blocking Time (TBT) | Bloqueio da thread principal durante o carregamento | Fase de carregamento apenas | ≤ 300ms | > 600ms | Métrica de laboratório (não de campo) |
| Largest Contentful Paint (LCP) | Tempo para renderizar o maior elemento visível | Fase de carregamento | ≤ 2,5s | > 4s | Core Web Vital Ativo |
| Cumulative Layout Shift (CLS) | Estabilidade visual e mudanças inesperadas de layout | Sessão inteira | ≤ 0,1 | > 0,25 | Core Web Vital Ativo |
Stay Updated on AI Visibility Trends
Get the latest insights on AI mentions, brand monitoring, and optimization strategies.
Limites de Desempenho e Estatísticas do Mundo Real
O Google define limites de desempenho da INP no 75º percentil dos carregamentos de página, segmentados por tipo de dispositivo (móvel e desktop). Uma INP abaixo de 200 milissegundos indica boa responsividade, significando que a página responde rapidamente às interações do usuário e fornece feedback visual imediato. Uma INP entre 200 e 500 milissegundos se enquadra na categoria “necessita de melhoria”, sugerindo que, embora a página seja funcional, os usuários podem perceber atrasos notáveis que podem impactar a satisfação. Uma INP acima de 500 milissegundos é classificada como ruim, indicando problemas significativos de responsividade que provavelmente frustram os usuários e impactam negativamente o engajamento e as conversões. De acordo com o Web Almanac de 2024 do HTTP Archive, 74% dos sites móveis e 97% dos sites desktop alcançaram boas pontuações INP, revelando uma lacuna substancial de desempenho entre as experiências móvel e desktop. Essa diferença de 23 pontos percentuais destaca os desafios contínuos que os desenvolvedores enfrentam na otimização da responsividade para dispositivos móveis, que normalmente têm menos poder de processamento e condições de rede mais variáveis do que computadores desktop. Os dados ressaltam por que a otimização da INP é crítica para o desenvolvimento web mobile-first, já que os usuários móveis representam a maioria do tráfego web para a maioria dos sites.
Papel da INP nos Core Web Vitals e Impacto no SEO
A INP é uma das três métricas dos Core Web Vitals que o Google usa para avaliar a experiência da página e determinar as classificações de busca, juntamente com o Largest Contentful Paint (LCP) para desempenho de carregamento e o Cumulative Layout Shift (CLS) para estabilidade visual. O Google afirmou explicitamente que os Core Web Vitals são fatores de classificação, o que significa que páginas com pontuações INP ruins podem sofrer menor visibilidade nos resultados de busca. Isso torna a otimização da INP não apenas uma preocupação de experiência do usuário, mas um imperativo crítico de SEO. O impacto comercial da otimização da INP foi demonstrado por meio de estudos de caso do mundo real: a RedBus, uma plataforma online de bilhetagem de ônibus, alcançou um aumento de 7% nas vendas ao otimizar a INP de seu site de 870-900ms para 350-370ms por meio de técnicas como debounce de manipuladores de eventos de rolagem, otimização do gerenciamento de estado de componentes de entrada e redução de re-renderizações desnecessárias. Este estudo de caso ilustra que melhorias na INP se correlacionam diretamente com métricas de negócio aprimoradas, incluindo aumento de conversões, redução de taxas de rejeição e melhoria na retenção de usuários. Para sites de comércio eletrônico, plataformas SaaS e qualquer negócio que dependa de interações do usuário, a otimização da INP representa um investimento de alto retorno tanto na experiência do usuário quanto na visibilidade em buscas.
Principais Estratégias de Otimização para Melhorar a INP
Os desenvolvedores podem empregar várias estratégias baseadas em evidências para reduzir a INP e melhorar a responsividade da página. Reduzir o atraso de entrada requer minimizar o processamento em segundo plano que bloqueia a thread principal, como dividir tarefas longas usando a API scheduler.yield(), adiar a execução de JavaScript não crítico e otimizar o carregamento de scripts de terceiros. Otimizar o tempo de processamento envolve simplificar os callbacks dos manipuladores de eventos para executar apenas o trabalho essencial, usando técnicas como debounce e throttling para limitar a frequência de execução dos manipuladores de eventos, e aproveitando frameworks como React para evitar re-renderizações desnecessárias de componentes por meio de memoização. Reduzir o atraso de apresentação pode ser alcançado minimizando a complexidade do DOM, usando contenção CSS para limitar o escopo de renderização e adiando atualizações visuais não críticas. Além disso, os desenvolvedores devem analisar as interações usando o Chrome DevTools para identificar quais funções e scripts específicos mais contribuem para os atrasos da INP, priorizando então as otimizações de maior impacto. As soluções de Real User Monitoring (RUM) fornecem dados inestimáveis sobre quais elementos da página os usuários mais interagem e quais interações são mais lentas, permitindo decisões de otimização baseadas em dados. A biblioteca JavaScript web-vitals permite que os desenvolvedores meçam a INP programaticamente e enviem dados para plataformas de análise, facilitando o monitoramento e a melhoria contínuos.
Medindo a INP: Ferramentas e Metodologias
A INP pode ser medida tanto por dados de campo quanto por testes de laboratório, embora os dados de campo de usuários reais forneçam a representação mais precisa do desempenho real. O Google PageSpeed Insights exibe as métricas INP com base nos dados do Chrome User Experience Report (CrUX), mostrando o 75º percentil das experiências reais do usuário para páginas que recebem tráfego suficiente. O Google Search Console inclui um relatório INP em sua seção Core Web Vitals, permitindo que proprietários de sites identifiquem páginas com responsividade ruim e acompanhem as melhorias ao longo do tempo. A aba Performance do Chrome DevTools permite que os desenvolvedores gravem e analisem interações individuais, mostrando a decomposição dos componentes de atraso de entrada, tempo de processamento e atraso de apresentação. A biblioteca JavaScript web-vitals fornece uma maneira programática de medir a INP em ambientes de produção e enviar dados para backends de análise personalizados. As soluções de Real User Monitoring (RUM) como DebugBear, Datadog e New Relic oferecem insights detalhados sobre o desempenho da INP, incluindo dados de atribuição que mostram quais scripts e componentes contribuem para os atrasos. A ferramenta INP Debugger identifica automaticamente elementos clicáveis da página e simula interações para identificar interações lentas em um ambiente de laboratório. Para uma otimização abrangente da INP, os desenvolvedores devem combinar múltiplas abordagens de medição: usar dados do CrUX para entender o desempenho de base, RUM para identificar interações problemáticas em produção e DevTools para diagnosticar causas raiz e validar correções.
INP e Integração com Busca por IA: Implicações para Usuários do AmICited
À medida que sistemas de busca alimentados por IA como ChatGPT, Perplexity, Google AI Overviews e Claude cada vez mais referenciam e citam conteúdo web, a responsividade da página torna-se um fator na avaliação e nos padrões de citação dos sistemas de IA. Embora a INP não afete diretamente se um sistema de IA cita seu conteúdo, páginas com responsividade ruim podem receber métricas de engajamento mais baixas (taxa de rejeição, tempo na página, profundidade de interação) que influenciam indiretamente os sinais de qualidade do conteúdo. Além disso, os sistemas de IA priorizam cada vez mais os sinais de experiência do usuário ao avaliar a credibilidade e relevância das fontes. Uma página que responde rapidamente às interações do usuário demonstra competência técnica e profissionalismo, potencialmente influenciando como os sistemas de IA avaliam e classificam o conteúdo para citação. Para organizações que usam o AmICited para monitorar sua marca e aparições de domínio em respostas de IA, entender a INP torna-se parte de uma estratégia holística de otimização de conteúdo. Páginas que são tanto responsivas (boa INP) quanto contêm conteúdo de alta qualidade e autoridade têm maior probabilidade de serem citadas por sistemas de IA. Além disso, à medida que os sistemas de IA se tornam mais sofisticados na avaliação de sinais de experiência do usuário, manter boas pontuações INP pode se tornar um fator cada vez mais importante nos padrões de citação de IA, tornando a otimização da INP relevante não apenas para o SEO tradicional, mas também para a visibilidade emergente em buscas de IA.
Solução de Problemas Comuns de INP
A maioria das pontuações INP ruins tem origem em um dos três componentes da métrica, portanto, o diagnóstico começa isolando qual deles está falhando. Alto atraso de entrada geralmente significa que uma tarefa longa na thread principal — muitas vezes um script de analytics ou anúncio empacotado — está sendo executada quando o usuário clica; a correção é dividir o trabalho em partes menores com scheduler.yield() ou adiar scripts não críticos até após a janela de interação. Tempo de processamento longo normalmente vem de manipuladores de eventos fazendo mais trabalho do que o necessário, como uma caixa de busca disparando uma chamada de API a cada tecla pressionada em vez de usar debounce na entrada, ou um componente React re-renderizando a lista inteira em vez de apenas a linha alterada — memoização e throttling resolvem ambos. Atraso de apresentação longo é frequentemente um problema de CSS ou DOM: seletores complexos, thrashing de layout ou um DOM profundamente aninhado forçam o navegador a recalcular estilos e layout antes de poder renderizar, o que a contenção CSS e a simplificação da árvore DOM resolvem diretamente. Um modo de falha menos óbvio são os scripts de terceiros, que podem dominar silenciosamente a INP mesmo quando seu próprio código é rápido; a análise na aba Performance do Chrome DevTools atribuirá o atraso ao script correto. Por fim, se as pontuações INP de laboratório e de campo divergirem nitidamente, verifique se as interações sendo testadas correspondem ao que os usuários reais realmente clicam — testes sintéticos perdem interações que os dados de RUM capturam.
Lista de Verificação Essencial para Otimização da INP
- Audite o desempenho atual da INP usando PageSpeed Insights, Search Console e ferramentas de Real User Monitoring para estabelecer métricas de base
- Identifique interações lentas por meio de dados RUM e Chrome DevTools para entender quais elementos da página e ações do usuário causam atrasos
- Divida tarefas longas usando
scheduler.yield()e padrões assíncronos para evitar atraso de entrada durante o carregamento da página e processamento em segundo plano - Otimize os manipuladores de eventos reduzindo o tempo de processamento, aplicando debounce em eventos frequentes e adiando trabalho não crítico
- Minimize a complexidade do DOM para reduzir o atraso de apresentação e o tempo de renderização após a conclusão dos manipuladores de eventos
- Implemente divisão de código (code splitting) e carregamento preguiçoso (lazy loading) para reduzir a execução inicial de JavaScript e o processamento em segundo plano
- Otimize scripts de terceiros adiando scripts não críticos, usando web workers via Partytown ou removendo integrações desnecessárias
- Use otimizações específicas de frameworks como React.memo, propriedades computadas do Vue e divisão de código do Next.js para evitar re-renderizações desnecessárias
- Monitore continuamente com soluções RUM para acompanhar as melhorias da INP e identificar regressões antes que impactem os usuários
- Teste em dispositivos reais, incluindo dispositivos móveis de baixo custo, para garantir responsividade em todo o espectro de hardware do usuário
+++
