• /
  • EnglishEspañolFrançais日本語한국어Português
  • EntrarComeçar agora

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

Caso haja alguma divergência entre a versão em inglês e a traduzida, a versão em inglês prevalece. Acesse esta página para mais informações.

Criar um problema

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

  1. Use o monitoramento do navegador New Relic : revise os dados do INP para identificar quais interações são mais lentas
  2. 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
  3. Verifique os padrões do dispositivo e da rede: determine se o INP lento afeta dispositivos ou tipos de conexão específicos
  4. 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

  1. Configurar o monitoramento do navegador New Relic com a coleta de dados Core Web Vitals habilitada
  2. Defina o limite de medição apropriado com base nos objetivos da sua experiência do usuário
  3. Estabelecer medições baseline antes de implementar otimizações
  4. 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

  1. Avaliação regular: agende revisões mensais dos dados de desempenho do INP
  2. framework de priorização: foco em páginas com alto tráfego e pontuações INP baixas
  3. Teste A/B: Otimizações de teste com segmentos de usuários para validar melhorias
  4. 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:

  1. Revise a regra do scorecard LCP do Core Web Vitals L3 para concluir a otimização do Core Web Vitals
  2. Explore monitoramento de erros em JavaScript para identificar problemas de interação
  3. Implementar monitoramento AJAX para observabilidade abrangente do frontend
  4. Considere o roteiro de implementação da experiência para otimização sistemática da experiência digital
Copyright © 2025 New Relic Inc.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.