Interação com a próxima pintura (INP): guia técnico completo e padrão de otimização

Interação com o Next Paint (INP) é uma métrica oficial do Google Core Web Vital introduzida para avaliar a capacidade de resposta geral da interface das páginas da web.

Ao contrário do First Input Delay (FID), que avaliou apenas a interação inicial no carregamento da página, o INP observa a latência de todas as interações do usuário (cliques, toques e entradas do teclado) que ocorrem durante toda a vida útil da visita de um usuário a uma página.

Resumo da resposta primeiro

Interação com a próxima pintura (INP) é uma métrica Core Web Vital que mede o tempo decorrido desde quando um usuário interage com uma página (clicando, tocando ou pressionando uma tecla) até que o navegador apresente o quadro visual atualizado na tela.A latência INP consiste em três subpartes: Atraso de entrada, Duração de processamento e Atraso de apresentação.Uma pontuação INP para aprovação é de 200 milissegundos ou menos no 75º percentil de visitas de usuários reais.Em março de 2024, o INP substituiu oficialmente o First Input Delay (FID) nos algoritmos de classificação de busca do Google.

Limites de pontuação INP e escala de classificação

Para fornecer uma experiência de usuário responsiva, as páginas da web devem atender aos seguintes limites do Core Web Vitals para INP avaliados no 75º percentil de visitas de campo de usuários reais:

Bom: $\le 200\text {ms} $ (Verde) - Resposta da interface do usuário rápida e fluida que parece instantânea para os usuários.
Precisa de melhorias: $> 200\text {ms} $ e $\le 500\text {ms} $ (Âmbar) – Atraso perceptível durante cliques ou toques que afeta o envolvimento do usuário.
Ruim: $> 500\text {ms} $ (Vermelho) - Grave congelamento da interface e bloqueio do thread principal que leva à frustração do usuário e altas taxas de rejeição.

Latência INP	Classificação de Desempenho	Impacto na experiência do usuário	Status de classificação da Pesquisa Google
$\le 200\text {ms} $	Bom	Feedback visual instantâneo ao tocar ou clicar.	Nota de aprovação total na avaliação Core Web Vitals.
$201\texto {ms} - 500\texto {ms} $	Precisa de melhorias	Interações lentas;atraso perceptível na atualização do estado da UI.	Pode sofrer penalidades de classificação em palavras-chave competitivas.
$> 500\texto {ms} $	Pobre	Botões que não respondem, UI congelada e impasses no thread principal.	Falha na avaliação Core Web Vitals;penalidade de classificação ativa.

Os três componentes da latência de interação INP

Quando um usuário interage com um elemento de uma página web, a latência total de interação medida pelo INP consiste em três fases sequenciais:

Atraso de entrada: o tempo decorrido entre o momento em que o usuário inicia a interação física (clique, toque ou pressionamento de tecla) e o momento em que o thread principal do navegador começa a executar os manipuladores de eventos associados.O atraso de entrada é causado principalmente pelo congestionamento do thread principal devido a longas tarefas JavaScript em segundo plano em execução durante o carregamento da página ou re-renderizações de componentes.
Duração do processamento: o tempo gasto na execução do código JavaScript em todos os ouvintes de eventos registrados para essa interação (como onclick , onkeydown ou manipuladores de atualização de estado reativo da estrutura).
Atraso de apresentação: o tempo decorrido após a conclusão dos manipuladores de eventos até que o navegador conclua o cálculo do recálculo do estilo, do layout, da pintura dos pixels atualizados e da exibição do próximo quadro visual no hardware de exibição do usuário.

Matematicamente, a latência total do INP para uma única interação é expressa como:

$$\text{Latência INP} = \text{Atraso de entrada} + \text{Duração do processamento} + \text{Atraso de apresentação}$$

Por que o Google substituiu o FID pelo INP em março de 2024

O First Input Delay (FID) mediu apenas o componente de atraso de entrada da primeira interação em uma página.Embora o FID tenha ajudado a identificar páginas onde o bloqueio do thread principal impedia a interação inicial, ele sofria de duas limitações técnicas principais:

Escopo de interação única: o FID ignorou todas as interações subsequentes do usuário após o carregamento da página, não conseguindo capturar a lentidão durante a navegação complexa do lado do cliente do aplicativo de página única (SPA).
Medição de latência incompleta: o FID mediu apenas o atraso de entrada, ignorando totalmente o tempo de processamento e o atraso de apresentação.Um manipulador de eventos que levou 2.000 ms para ser executado recebeu uma pontuação FID de aprovação se o atraso de entrada inicial fosse inferior a 50 ms.

Em março de 2024, o Google substituiu oficialmente o FID pelo INP como um fator oficial de classificação Core Web Vital.O INP avalia o percentil 75 de todas as interações durante uma sessão, fornecendo uma avaliação muito mais abrangente e realista da experiência do usuário real em aplicações web modernas.

Interações qualificadas do usuário versus eventos não qualificados

O INP mede interações discretas do usuário, onde o usuário espera feedback visual imediato.Compreender quais interações contam para o INP é essencial para o perfil diagnóstico:

Interações medidas

Cliques do mouse: clicar em botões, links, controles de formulário ou componentes interativos personalizados.
Toques na tela sensível ao toque: toque em elementos em dispositivos móveis ou tablets.
Pressionamento do teclado: pressionar teclas do teclado físico ou virtual (como Enter , Space ou teclas alfanuméricas em entradas de texto).

Eventos não medidos

Rolagem e movimento panorâmico: rolar uma página ou deslocar um componente do mapa não aciona a medição INP.
Passar o mouse: Mover o cursor do mouse sobre um elemento sem clicar é excluído do INP.
Animações de carregamento de página: animações CSS que são acionadas automaticamente sem a entrada do usuário não contam para o INP.

Estratégias técnicas comprovadas para otimizar altas pontuações de INP

Para reduzir a latência INP abaixo do limite de 200 ms, as equipes de engenharia devem implementar as seguintes otimizações técnicas:

Dividir tarefas longas do thread principal: Use requestIdleCallback() , setTimeout() ou scheduler.yield() para dividir tarefas de execução com mais de 50 ms em partes menores, permitindo que o navegador processe as entradas recebidas do usuário imediatamente entre os blocos de execução de tarefas.
Otimizar atualizações de estado da estrutura: em aplicativos Vue 3 e Nuxt 4, adie rerrenderizações de UI não críticas usando limites de componentes assíncronos ou atualizações de referência reativas adiadas.
Minimize o desgaste do layout: evite ler as propriedades da geometria DOM (como offsetHeight ou getBoundingClientRect() ) imediatamente após a mutação dos elementos DOM, o que força o recálculo síncrono do layout.
Reduza a profundidade da árvore DOM: Árvores DOM superdimensionadas aumentam o cálculo de estilo e o custo de layout durante o atraso da apresentação.Mantenha a contagem total de elementos DOM abaixo de 1.500 nós por página.
Otimize scripts de terceiros: scripts pesados de terceiros (análises, redes de anúncios, widgets de bate-papo com clientes) frequentemente sequestram o tópico principal.Adie ou o web-worker descarregue scripts de terceiros não essenciais.

Monitoramento contínuo de INP com SimpleOps

SimpleOps rastreia continuamente o desempenho do INP, capturando métricas de conjunto de dados de campo de usuário real do Chrome UX Report (CrUX) junto com auditorias sintéticas do Lighthouse.SimpleOps alerta automaticamente sua equipe sempre que o INP do percentil 75 do seu site exceder 200 ms, garantindo que seu aplicativo permaneça rápido, fluido e otimizado para classificações em mecanismos de pesquisa.