Nível 2 - Interação Core web vitals com a próxima regra do scorecard de pintura

A interação com o Next Paint (INP) mede a rapidez com que seu site responde à interação do usuário, como cliques, toques e pressionamentos de teclas. Esta regra do scorecard ajuda você a identificar e corrigir problemas de capacidade de resposta que podem frustrar o usuário e impactar negativamente o engajamento e as conversões.

Sobre esta regra do scorecard

Essa interação com a próxima regra de pintura faz parte do Nível 2 (Proativo) no modelo de maturidade da experiência digital. Ele avalia se suas páginas respondem rapidamente à interação do usuário, garantindo uma experiência do usuário suave e responsiva.

Por que isso é importante: Respostas de interação lentas fazem com que as interfaces pareçam lentas e sem resposta, fazendo com que o usuário clique várias vezes, abandone tarefas ou perca a confiança no seu aplicativo. Pontuações INP rápidas indicam uma interface que parece ágil e confiável para o usuário.

Como funciona esta regra

Esta regra avalia se o 75º percentil do tempo de interação com a próxima pintura (INP) da sua página excede 200 milissegundos, que é o limite do Google para uma capacidade de resposta "boa". O INP mede o tempo desde o momento em que um usuário inicia uma interação até que o navegador apresente a próxima atualização visual.

Nota importante: INP é medido em milissegundos, não segundos. A métrica captura a pior capacidade de resposta de interação durante uma visita à página.

Compreendendo sua pontuação

Aprovado (Verde): 75º percentil INP é 200 ms ou menos (Bom)
Reprovado (Vermelho): 75º percentil INP excede 200 ms (precisa de melhoria ou ruim)
Destino: Alcançar tempos INP abaixo de 200ms para uma ótima experiência do usuário

Limite de INP do Google:

Bom: 200 ms ou menos
Precisa de melhorias: 200 ms a 500 ms
Ruim: Maior que 500 ms

O que o INP mede: O INP captura a capacidade de resposta da interface à interação do usuário, incluindo cliques, toques e entradas de teclado. Ele mede o tempo desde o início da interação até que o navegador possa apresentar a resposta visual ao usuário.

Compreendendo a responsividade da interação

O INP mede três fases do tratamento da interação:

Atraso de entrada

Tempo desde a interação do usuário (clique/toque) até o manipulador de eventos começar a ser executado

Causado pelo fato do thread principal estar ocupado com outras tarefas
Pode ser melhorado reduzindo o tempo de execução do JavaScript

Tempo de processamento

Tempo gasto executando manipuladores de eventos e atualizando o estado do aplicativo

Inclui execução de código JavaScript e atualizações de DOM
Pode ser otimizado por meio de códigos e algoritmos eficientes

Atraso na apresentação

Tempo desde a conclusão do manipulador até que o navegador apresente a atualização visual

Inclui cálculos de estilo, layout e operações de pintura
Pode ser melhorado otimizando CSS e reduzindo a complexidade do DOM

Causas comuns de INP lento

Execução pesada de JavaScript: cálculos complexos bloqueando o thread principal
Grandes manipulações de DOM: mudanças extensas que exigem recálculo de layout
Manipuladores de eventos ineficientes: código mal otimizado em manipuladores de clique/toque
Script de terceiros: código externo interferindo no processamento de interação

Como melhorar as pontuações do INP

Se sua pontuação mostrar baixa capacidade de resposta de interação, siga estas etapas para otimizar o desempenho:

1. Identifique a interação lenta

Use o monitoramento do navegador New Relic : revise os dados do INP para identificar quais interações são mais lentas
Analisar padrões de interação: entender quais ações do usuário (cliques, entradas de formulário, navegação) têm baixa capacidade de resposta
Verifique os padrões do dispositivo e da rede: determine se o INP lento afeta dispositivos ou tipos de conexão específicos
Priorize a interação crítica: Foco na interação essencial para tarefas e conversões do usuário

2. Otimize o desempenho do JavaScript

Reduzir o bloqueio do thread principal:

Divida tarefas longas em pedaços menores usando setTimeout() ou requestIdleCallback()
Use web workers para tarefas computacionais pesadas
Implementar divisão de código para carregar apenas o JavaScript necessário

Otimizar manipuladores de eventos:

Debounce eventos frequentes como rolagem ou redimensionamento
Use delegação de eventos para melhor desempenho com muitos elementos
Consulta e cálculos de Cache DOM fora dos manipuladores de eventos
Evite operações síncronas em manipuladores de interação

Melhore a eficiência do código:

Perfil de desempenho de JavaScript para identificar gargalo
Otimizar algoritmos e estruturas de dados
Remova código não utilizado e dependência
Use técnicas eficientes de manipulação de DOM

3. Otimize o desempenho da renderização

Reduza a sobrecarga de layout:

Leituras e gravações em lote do DOM para minimizar o recálculo do layout
Use transformações CSS e opacidade para animações em vez de propriedades de layout
Implementar rolagem virtual para listas longas
Evite operações forçadas de layout síncrono

Simplifique o CSS:

Minimize seletores CSS complexos
Reduza o número de elementos DOM que requerem cálculo de estilo
Use a contenção CSS para isolar o trabalho de renderização
Otimize animações e transições CSS

4. Implementar práticas de desempenho recomendadas

Use APIs da web modernas:

Implementar content-visibility para conteúdo fora da tela
Use requestAnimationFrame() para animações suaves
Aproveite o cache do navegador e os service workers
Implementar a priorização adequada de recursos

Monitorar e testar:

Use o painel de desempenho Chrome DevTools para criar perfis de interação
Teste em vários dispositivos, especialmente dispositivos móveis de baixo custo
Implemente monitoramento de usuário real com New Relic Browser
Configurar alertas para detecção de regressão de INP

Orientação de implementação

Configurando o monitoramento do INP

Configurar o monitoramento do navegador New Relic com a coleta de dados Core Web Vitals habilitada
Defina o limite de medição apropriado com base nos objetivos da sua experiência do usuário
Estabelecer medições baseline antes de implementar otimizações
Crie um painel para rastrear o desempenho do INP em diferentes páginas e segmentos de usuários

Criando alertas acionáveis

Configurar alertas para degradação de desempenho do INP:

Bom limite: alerta quando o 75º percentil exceder 200 ms
Limite ruim: alerta crítico quando o percentil 75 ultrapassa 500ms
Trend monitoramento: alerta sobre degradação de 20% semana após semana
Alertas específicos do segmento: monitore o desempenho do celular e do desktop separadamente

Fluxo de trabalho de otimização de edifícios

Avaliação regular: agende revisões mensais dos dados de desempenho do INP
framework de priorização: foco em páginas com alto tráfego e pontuações INP baixas
Teste A/B: Otimizações de teste com segmentos de usuários para validar melhorias
Processo de escalonamento: Defina caminhos claros para o envolvimento da engenharia quando os limites forem violados

Considerações importantes

Avaliação personalizada: Essas diretrizes fornecem uma base, mas cada aplicativo é único. Avalie o desempenho do INP com base em suas metas específicas de experiência do usuário e objetivos comerciais. Considere sua base de usuário, padrões típicos de interação e jornadas críticas do usuário ao definir o desempenho destino.

Melhoria contínua: a otimização do desempenho da Web é um processo contínuo. As expectativas do usuário, os recursos do navegador e os padrões da web evoluem constantemente. Revise regularmente sua estratégia de INP, atualize os critérios de medição e adapte as técnicas de otimização para manter uma excelente capacidade de resposta de interação.

Abordagem holística: o INP funciona melhor como parte de uma estratégia de desempenho abrangente. Combine-o com outros Core Web Vitals (CLS e LCP) e métricas de desempenho tradicionais para visibilidade completa da experiência do usuário.

Próximos passos

Após implementar esta regra do scorecard:

Revise a regra do scorecard LCP do Core Web Vitals L3 para concluir a otimização do Core Web Vitals
Explore monitoramento de erros em JavaScript para identificar problemas de interação
Implementar monitoramento AJAX para observabilidade abrangente do frontend
Considere o roteiro de implementação da experiência para otimização sistemática da experiência digital

Esta tradução de máquina é fornecida para sua comodidade.