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
- Revise os dados do CLS no New Relic Browser: identifique quais páginas têm as maiores pontuações CLS
- Avalie o impacto do usuário: determine quantos usuários encontram problemas de mudança de layout
- Analisar padrões de mudança: entender quando as mudanças ocorrem com mais frequência durante o carregamento da página
- 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
- Ação imediata: identificar páginas com maiores pontuações CLS e implementar correções rápidas para imagens e conteúdo dinâmico
- Otimização técnica: Aborde o carregamento de fontes, script de terceiros e arquitetura de layout
- Integração de processos: Adicionar monitoramento CLS aos fluxos de trabalho de desenvolvimento e orçamentos de desempenho
- 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.