• /
  • 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 - Regra do placar de mudança de layout cumulativa de Core web vitals

O Cumulative Layout Shift (CLS) mede a quantidade de conteúdo da página que muda inesperadamente durante o carregamento, o que pode frustrar o usuário e causar cliques acidentais. Esta regra do scorecard ajuda você a identificar e corrigir problemas de estabilidade visual que impactam negativamente a experiência do usuário e a conclusão de tarefas.

Sobre esta regra do scorecard

Essa regra de mudança cumulativa de layout faz parte do Nível 2 (Proativo) no modelo de maturidade da experiência digital. Ele avalia se suas páginas mantêm estabilidade visual durante o carregamento, evitando que o conteúdo fique saltando e interrompendo a interação do usuário.

Por que isso é importante: mudanças de layout fazem com que o usuário clique acidentalmente em elementos errados, perca o lugar durante a leitura ou abandone tarefas por frustração. Boas pontuações CLS indicam páginas que carregam previsivelmente, permitindo que o usuário interaja com confiança, sem movimentação inesperada de conteúdo.

Como funciona esta regra

Esta regra avalia se o 75º percentil da pontuação Cumulative Layout Shift (CLS) da sua página excede 0,1, que é o limite do Google para "boa" estabilidade visual. O CLS mede a soma de todas as pontuações de mudanças inesperadas de layout durante todo o ciclo de vida de uma página.

Nota importante: o CLS é medido como uma pontuação sem unidade, não em segundos. A pontuação representa o impacto e a distância das mudanças de layout combinadas.

Compreendendo sua pontuação

  • Aprovado (Verde): a pontuação CLS do 75º percentil é 0,1 ou inferior (Bom)
  • Reprovado (Vermelho): a pontuação CLS do 75º percentil excede 0,1 (precisa melhorar ou é ruim)
  • destino: Alcançar pontuações CLS abaixo de 0,1 para uma experiência ideal do usuário

Limite do CLS do Google:

  • Bom: 0,1 ou menos
  • Precisa melhorar: 0,1 a 0,25
  • Ruim: Maior que 0,25

O que significam mudanças de layout: Uma mudança de layout ocorre quando um elemento visível muda sua posição de um quadro renderizado para o próximo. O CLS mede a maior explosão de pontuações de mudança de layout durante todo o ciclo de vida de uma página, afetando a estabilidade visual e a experiência do usuário.

Como melhorar as pontuações do CLS

Se sua pontuação mostrar baixa estabilidade visual, siga estas etapas para reduzir mudanças de layout:

1. Identifique páginas e elementos problemáticos

  1. Revise os dados do CLS no New Relic Browser: identifique quais páginas têm as maiores pontuações CLS
  2. Avalie o impacto do usuário: determine quantos usuários encontram problemas de mudança de layout
  3. Analisar padrões de mudança: entender quando as mudanças ocorrem com mais frequência durante o carregamento da página
  4. Priorize por impacto comercial: concentre-se em páginas críticas para conversões e tarefas do usuário

2. Corrija causas comuns de mudanças de layout

Reserve espaço para imagens:

  • Sempre especifique os atributos de largura e altura para imagens
  • Use a propriedade de proporção de aspecto CSS para imagens responsivas
  • Implementar estratégias adequadas de carregamento de imagens

Manipule o conteúdo dinâmico adequadamente:

  • Reserve espaço mínimo para anúncios, widgets e conteúdo dinâmico
  • Evite inserir conteúdo acima do conteúdo existente
  • Utilize o espaço reservado enquanto o conteúdo carrega

Otimizar o carregamento de fontes:

  • Pré-carregue fontes críticas para reduzir mudanças no layout do texto
  • Use font-display: swap para melhor desempenho de carregamento
  • Escolha fontes alternativas seguras para a web, semelhantes a fontes personalizadas

Gerenciar conteúdo de terceiros:

  • Defina dimensões consistentes para conteúdo incorporado
  • Carregue widgets de mídia social e anúncios de forma assíncrona
  • Teste script de terceiros para impacto no layout

3. Implementar práticas de desenvolvimento recomendadas

Design para estabilidade:

  • Use CSS Grid e Flexbox para layouts mais previsíveis
  • Implementar telas de esqueleto enquanto o conteúdo é carregado
  • Teste layouts em diferentes tamanhos e tipos de conteúdo

Monitorar e validar:

  • Use o Chrome DevTools e o Lighthouse para testes de CLS
  • Implemente monitoramento de usuário real com New Relic Browser
  • Configurar alertas quando as pontuações CLS excederem o limite
  • Teste em vários dispositivos e condições de rede

Medindo a melhoria

Acompanhe essas métricas para verificar seus esforços de otimização do CLS:

  • Redução da pontuação CLS: Diminuição dos valores CLS do 75º percentil para 0,1 ou menos
  • experiência do usuário métrica: Taxas de rejeição reduzidas, melhoria na conclusão de tarefas
  • Impacto na conversão: maiores taxas de conversão em páginas com melhor estabilidade visual
  • Feedback do usuário: menos reclamações sobre experiências de página "instáveis" ou irregulares

Cenários e soluções comuns

Páginas de produtos de comércio eletrônico:

  • Reserve espaço exato para imagens de produtos e avaliações de clientes
  • Use layouts consistentes para informações de produtos e preços

Sites de conteúdo:

  • Reserve espaço para anúncios para evitar mudanças de conteúdo
  • Otimize o carregamento de fontes para reduzir o refluxo de texto

Páginas de destino:

  • Projete formulários com espaçamento fixo para mensagem de erro
  • Garanta que os botões de chamada para ação permaneçam em posições estáveis

Considerações importantes

  • Otimização do equilíbrio com a funcionalidade: algumas alterações de layout podem ser necessárias para a experiência do usuário
  • Teste em condições reais: garanta que as otimizações funcionem em vários dispositivos e velocidades de rede
  • Foco no impacto do usuário: priorize a correção de mudanças que afetam jornadas e conversões críticas do usuário
  • Monitore continuamente: o CLS pode mudar com atualizações de conteúdo, novos recursos e modificações de terceiros

Próximos passos

  1. Ação imediata: identificar páginas com maiores pontuações CLS e implementar correções rápidas para imagens e conteúdo dinâmico
  2. Otimização técnica: Aborde o carregamento de fontes, script de terceiros e arquitetura de layout
  3. Integração de processos: Adicionar monitoramento CLS aos fluxos de trabalho de desenvolvimento e orçamentos de desempenho
  4. Continuar a otimização: progredir para outros Core Web Vitals, como LCP e INP

Para obter orientações detalhadas sobre a otimização do CLS, consulte nossa documentação do Core Web Vitals e práticas recomendadas de monitoramento de desempenho.

Copyright © 2025 New Relic Inc.

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