Cumulative Layout Shift (CLS)

Definição de Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) é uma métrica dos Core Web Vitals que quantifica a estabilidade visual de uma página da web ao medir os deslocamentos inesperados do layout que ocorrem durante todo o ciclo de vida da página. Especificamente, o CLS mede o maior burst de pontuações de deslocamento de layout para cada movimento inesperado de elementos visíveis entre frames renderizados. Quando o conteúdo da página se move inesperadamente — como quando um anúncio é carregado no topo da página e empurra o texto para baixo ou quando imagens são renderizadas sem dimensões pré-definidas — os usuários experimentam instabilidade visual que interrompe o fluxo de leitura e pode causar cliques acidentais em elementos errados. O Google designou oficialmente o CLS como fator de ranqueamento em junho de 2021, tornando-o uma métrica crítica tanto para a experiência do usuário quanto para a otimização de mecanismos de busca. Um bom valor de CLS é 0,1 ou inferior, indicando mínima perturbação visual, enquanto valores entre 0,1 e 0,25 precisam de melhorias e valores acima de 0,25 são considerados ruins.

Contexto e Histórico

A introdução do Cumulative Layout Shift representa uma mudança significativa em como a comunidade de desempenho web mede a experiência do usuário. Antes do CLS, a maioria das métricas de desempenho focava em velocidade de carregamento e interatividade, ignorando a frustração causada pelo movimento inesperado de elementos da página. Pesquisas do Google revelaram que mais de 70% dos usuários experimentam deslocamentos de layout regularmente, e esses deslocamentos se correlacionam diretamente com taxas de rejeição mais altas e menor engajamento. A métrica foi desenvolvida pelo Web Incubation Community Group (WICG) e formalizada por meio da Layout Instability API, que fornece aos navegadores uma forma padronizada de detectar e reportar deslocamentos de layout. Quando o Google anunciou os Core Web Vitals em maio de 2020, o CLS tornou-se uma das três principais métricas ao lado do Largest Contentful Paint (LCP) e do Interaction to Next Paint (INP). A métrica evoluiu desde sua introdução — originalmente medindo o deslocamento total do layout durante toda a vida útil da página, foi refinada em maio de 2021 para usar a abordagem de janela de sessão, que reflete melhor a experiência real do usuário ao focar no pior burst de instabilidade em vez de penalizar páginas com pequenos deslocamentos ao longo do ciclo de vida. Essa evolução demonstra o compromisso do Google em criar métricas que realmente refletem a frustração do usuário, em vez de medições técnicas arbitrárias.

Explicação Técnica: Como o CLS Funciona

O Cumulative Layout Shift opera através de um sistema sofisticado de cálculos que combina dois componentes principais: fração de impacto e fração de distância. A fração de impacto mede qual porcentagem da área visível é afetada por elementos instáveis — elementos que mudam sua posição inicial entre dois frames renderizados. Por exemplo, se um elemento ocupa 50% do viewport em um frame e, ao se mover, a união de sua posição anterior e atual cobre 75% do viewport, a fração de impacto é 0,75. A fração de distância mede o quanto o elemento instável se moveu em relação à maior dimensão do viewport (largura ou altura). Se um elemento se move para baixo em 25% da altura do viewport, a fração de distância é 0,25. A pontuação final do deslocamento de layout é calculada multiplicando esses dois valores: 0,75 × 0,25 = 0,1875. Deslocamentos individuais do layout são agrupados em janelas de sessão — bursts de deslocamentos que ocorrem dentro de 1 segundo um do outro, com duração máxima de 5 segundos. A métrica CLS reporta a janela de sessão com maior pontuação cumulativa, e não a soma de todos os deslocamentos. Essa abordagem impede que páginas com muitos pequenos deslocamentos sejam penalizadas injustamente em comparação com páginas que têm um único grande burst de instabilidade.

Medição e Limiares de Pontuação do CLS

O Google estabeleceu limiares de desempenho claros para o CLS para ajudar os proprietários de sites a entenderem o desempenho de sua estabilidade visual. Um valor de CLS de 0,1 ou inferior é considerado “Bom” e representa a meta a ser alcançada. Valores entre 0,1 e 0,25 são classificados como “Necessita Melhorias”, indicando que, embora a página não esteja reprovada, esforços de otimização melhorariam significativamente a experiência do usuário. Qualquer valor de CLS acima de 0,25 é considerado “Ruim” e sugere instabilidade visual substancial que provavelmente frustra os usuários e impacta negativamente métricas de engajamento. Esses limiares são medidos no percentil 75 das visitas, segmentados para dispositivos móveis e desktop, garantindo que a métrica reflita a experiência da maioria dos usuários e não seja distorcida por outliers. Pesquisas que embasam esses limiares analisaram milhões de experiências reais de usuários e correlacionaram a gravidade dos deslocamentos do layout com métricas de satisfação. O Lighthouse performance score destina 25% de seu peso total ao CLS, tornando-o um componente importante da avaliação geral de desempenho da página. Entender esses limiares é essencial para priorizar otimizações — páginas com valores de CLS acima de 0,25 devem ser resolvidas imediatamente, enquanto aquelas entre 0,1 e 0,25 devem estar no roadmap de melhorias contínuas.

Tabela Comparativa: CLS vs. Métricas Relacionadas de Desempenho

Causas Comuns de Maus Valores de CLS

Imagens e vídeos sem dimensões especificadas representam uma das causas mais recorrentes de deslocamentos de layout. Quando desenvolvedores não incluem atributos de largura e altura nas tags de imagem do HTML, os navegadores não podem reservar espaço para esses elementos até que estejam totalmente carregados. Isso faz com que o conteúdo ao redor se desloque inesperadamente quando a imagem é renderizada. Da mesma forma, anúncios, embeds e iframes sem dimensões pré-definidas frequentemente causam instabilidade no layout, principalmente anúncios de terceiros, onde os desenvolvedores têm pouco controle sobre as dimensões finais. Conteúdo injetado dinamicamente — como banners que aparecem após certo tempo, widgets de posts relacionados ou seções de comentários expandidas — pode empurrar o conteúdo existente caso o espaço não seja reservado previamente. Web fonts causando FOIT (Flash of Invisible Text) ou FOUT (Flash of Unstyled Text) acontecem quando fontes personalizadas carregam e são renderizadas de forma diferente das fontes fallback, causando realocação do texto e deslocamentos do layout. Animações implementadas incorretamente usando propriedades CSS como top, left, bottom, right ou box-shadow provocam recálculos de layout em vez de usarem transformações aceleradas por GPU. JavaScript de terceiros carregando de forma assíncrona pode injetar elementos visuais imprevisivelmente, e lazy loading sem placeholders adequados faz com que o conteúdo se desloque ao carregar imagens quando o usuário rola a página. Entender essas causas permite que os desenvolvedores implementem soluções direcionadas, ao invés de tentarem otimizações amplas e ineficazes.

Boas Práticas para Otimizar o CLS

Especificar dimensões explícitas para toda mídia é a estratégia fundamental para otimização do CLS. Toda imagem, vídeo e conteúdo incorporado deve incluir atributos de largura e altura no HTML, permitindo que o navegador reserve o espaço apropriado antes do carregamento do conteúdo. Para designs responsivos, caixas de proporção CSS mantêm proporções consistentes entre largura e altura em diferentes tamanhos de tela, usando a propriedade aspect-ratio ou técnicas de padding-bottom. Reservar espaço para conteúdo dinâmico por meio de placeholders CSS garante que anúncios, widgets e outros elementos carregados dinamicamente não provoquem deslocamentos ao aparecer. Usar transformações CSS em vez de propriedades de layout para animações previne recálculos de layout — transform: translate() e transform: scale() devem substituir top, left e mudanças de dimensão. Pré-carregar web fonts críticas e definir font-display: optional ou font-display: fallback impede que o texto fique invisível ou provoque deslocamentos durante o carregamento da fonte. Evitar inserção de conteúdo acima do existente previne o deslocamento de elementos que o usuário está lendo ou interagindo. Implementar lazy loading adequado com placeholders garante que imagens sejam carregadas no espaço já reservado, sem causar deslocamentos. Adiar o carregamento de JavaScript de terceiros para fora do primeiro viewport ou após interação do usuário evita injeções inesperadas de conteúdo na área principal de visualização. Essas práticas, quando implementadas de forma sistemática, normalmente reduzem os valores de CLS de ruins (>0,25) para bons (≤0,1).

Impacto do CLS na Experiência do Usuário e Métricas de Negócio

Deslocamentos de layout impactam diretamente a satisfação do usuário e os resultados de negócio de forma mensurável. Estudos demonstram que deslocamentos inesperados fazem com que os usuários percam a linha durante a leitura, aumentando taxas de rejeição e diminuindo o tempo de permanência na página. Em contextos de e-commerce, deslocamentos de layout podem causar cliques acidentais em produtos ou links errados, resultando em frustração e abandono de carrinho. Pesquisas da Relive mostraram que reduzir deslocamentos de layout para praticamente zero melhorou a experiência do cliente e aumentou as taxas de conversão em 5%, enquanto outro estudo de caso demonstrou melhora de 41% no CLS levando a um aumento de 10% nas conversões. A pesquisa da Layout Instability API indica que usuários que experimentam deslocamentos significativos têm 2 a 3 vezes mais probabilidade de abandonar a página antes de concluir a ação desejada. Além da experiência do usuário, o algoritmo de ranqueamento do Google recompensa explicitamente páginas com bons valores de CLS, o que significa que otimizar a estabilidade visual traz benefícios imediatos à experiência do usuário e vantagens de SEO a longo prazo. Páginas com valores ruins podem ter menor visibilidade nos resultados de busca, especialmente para palavras-chave competitivas onde várias páginas têm bons Core Web Vitals. O efeito cumulativo da otimização de CLS — melhor experiência do usuário, maiores taxas de conversão e melhores rankings — torna essa métrica um alvo de alto ROI para a maioria dos sites.

CLS em Diferentes Contextos: Dados de Laboratório vs. Dados de Campo

Dados de laboratório e dados de campo frequentemente mostram diferenças significativas nas medições de CLS, criando confusão para desenvolvedores que tentam otimizar. Ferramentas de laboratório como Lighthouse e PageSpeed Insights medem o CLS apenas durante o carregamento inicial da página em ambiente sintético controlado, geralmente capturando apenas deslocamentos visíveis no primeiro viewport. Essa abordagem ignora deslocamentos que ocorrem conforme os usuários rolam a página, interagem com menus ou acionam carregamento de conteúdo dinâmico. Dados de campo do Chrome User Experience Report (CrUX) capturam experiências reais de usuários durante todas as interações no ciclo de vida da página, incluindo deslocamentos que ocorrem durante o scroll e após interações do usuário. Isso explica por que uma página pode exibir um bom CLS no Lighthouse, mas um valor ruim no Core Web Vitals do Search Console — os dados de campo incluem deslocamentos que o teste de laboratório não encontrou. Soluções de Real User Monitoring (RUM) fornecem insights detalhados sobre quando e onde ocorrem deslocamentos reais para visitantes, incluindo padrões específicos por dispositivo e deslocamentos ao rolar a página. Os desenvolvedores devem priorizar dados de campo quando disponíveis, pois refletem a experiência genuína do usuário, enquanto utilizam os dados de laboratório para identificar e depurar problemas específicos. A diferença entre dados de laboratório e de campo destaca a importância do monitoramento contínuo, e não de testes pontuais, garantindo que os esforços de otimização abordem experiências reais em vez de cenários sintéticos.

CLS e Monitoramento em Plataformas de IA

À medida que sistemas de IA como ChatGPT, Perplexity, Google AI Overviews e Claude geram cada vez mais resumos e citações de conteúdo web, a estabilidade visual dos sites citados se torna relevante para plataformas de monitoramento de IA. Quando sistemas de IA citam ou referenciam seu site, usuários que clicam para acessar seu domínio experimentam o desempenho do CLS da sua página em primeira mão. Valores ruins de CLS podem impactar negativamente a experiência do usuário proveniente de tráfego referenciado por IA, potencialmente aumentando taxas de rejeição e reduzindo o valor dessas citações. Ferramentas de monitoramento como AmICited acompanham como seu domínio aparece em diferentes plataformas de IA, e entender o desempenho do CLS passa a ser parte da estratégia abrangente de monitoramento de marca. Sites com excelentes valores de CLS oferecem melhor experiência para todas as fontes de tráfego, incluindo visitantes vindos de IA, reforçando a importância da otimização da estabilidade visual. À medida que o conteúdo gerado por IA se torna mais prevalente nos resultados de busca, a conexão entre o desempenho do CLS e a presença digital global se intensifica para manter a reputação da marca e a satisfação do usuário em todos os canais.

Evolução Futura e Perspectivas Estratégicas

O CLS continua evoluindo à medida que os padrões web e as expectativas dos usuários mudam. O Google já indicou que a métrica pode ser refinada ainda mais conforme as capacidades dos navegadores evoluem e surgem novos padrões de instabilidade de layout. A introdução da abordagem de janela de sessão em 2021 demonstrou a disposição do Google em ajustar métricas quando melhores métodos de medição se tornam viáveis. Tecnologias emergentes como Web Components e frameworks modernos de JavaScript apresentam novos desafios e oportunidades para o CLS, já que os desenvolvedores utilizam cada vez mais padrões de renderização dinâmica que exigem estratégias sofisticadas de otimização. A Layout Instability API continua recebendo atualizações e melhorias, com fornecedores de navegadores trabalhando para fornecer dados mais granulares sobre as causas dos deslocamentos de layout. A adoção da otimização de CLS pela indústria acelerou significativamente desde sua introdução como fator de ranqueamento, com a maioria das principais plataformas CMS e construtores de sites já oferecendo recursos integrados de otimização para CLS. Olhando para o futuro, o CLS provavelmente permanecerá uma métrica central para medir a experiência do usuário, embora possa ser complementado por métricas adicionais que capturem outros aspectos da estabilidade visual. A evolução desta métrica reflete a tendência mais ampla de medição de desempenho centrada no usuário, em que métricas se correlacionam diretamente com a satisfação real dos usuários em vez de benchmarks técnicos arbitrários. Organizações que priorizarem a otimização do CLS agora manterão vantagens competitivas à medida que a estabilidade visual se torna um diferencial cada vez mais importante nos rankings de busca e na qualidade da experiência do usuário.