Cumulative Layout Shift (CLS)

Definição de Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) é uma métrica do Core Web Vitals que quantifica a estabilidade visual de uma página da web medindo mudanças inesperadas de layout que ocorrem durante todo o ciclo de vida de uma página. Especificamente, o CLS mede o maior surto de pontuações de mudança de layout para cada movimento inesperado de elementos visíveis entre quadros renderizados. Quando o conteúdo da página se move inesperadamente — como quando um anúncio carrega no topo da página e empurra o texto para baixo, ou quando imagens renderizam sem dimensões predefinidas — os usuários experimentam instabilidade visual que interrompe seu fluxo de leitura e pode causar cliques acidentais em elementos errados. O Google designou oficialmente o CLS como um 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. Uma boa pontuação CLS é 0,1 ou inferior, indicando interrupção visual mínima, enquanto pontuações entre 0,1 e 0,25 precisam de melhoria, e pontuações acima de 0,25 são consideradas ruins.

Contexto e Histórico

A introdução do Cumulative Layout Shift representa uma mudança significativa na forma 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. A pesquisa do Google revelou que mais de 70% dos usuários experimentam mudanças de layout regularmente, e essas mudanças correlacionam-se diretamente com aumento de taxas de rejeição e redução de engajamento. A métrica foi desenvolvida pelo Web Incubation Community Group (WICG) e formalizada através da Layout Instability API, que fornece aos navegadores uma maneira padronizada de detectar e reportar mudanças de layout. Quando o Google anunciou o Core Web Vitals em maio de 2020, o CLS tornou-se uma das três métricas principais, juntamente com Largest Contentful Paint (LCP) e Interaction to Next Paint (INP). A métrica evoluiu desde sua introdução — originalmente medindo a mudança total de layout ao longo de toda a vida útil de uma página, foi refinada em maio de 2021 para usar uma abordagem de janela de sessão, que reflete melhor a experiência real do usuário ao focar no pior surto de instabilidade, em vez de penalizar páginas com mudanças menores espalhadas ao longo de seu ciclo de vida. Essa evolução demonstra o compromisso do Google em criar métricas que reflitam genuinamente 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 de cálculo sofisticado 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 da viewport é afetada por elementos instáveis — elementos que mudam sua posição inicial entre dois quadros renderizados. Por exemplo, se um elemento ocupa 50% da viewport em um quadro e depois se desloca, e a união de suas posições anterior e atual cobre 75% da 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 da viewport (largura ou altura). Se um elemento se move para baixo em 25% da altura da viewport, a fração de distância é 0,25. A pontuação final de mudança de layout é calculada multiplicando esses dois valores: 0,75 × 0,25 = 0,1875. Mudanças individuais de layout são então agrupadas em janelas de sessão — surtos de mudanças ocorrendo dentro de 1 segundo umas das outras, com duração máxima de janela de 5 segundos. A métrica CLS reporta a janela de sessão com a maior pontuação cumulativa, não a soma de todas as mudanças. Essa abordagem de janela evita que páginas com muitas mudanças pequenas sejam penalizadas injustamente em comparação com páginas com um grande surto de instabilidade.

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

O Google estabeleceu limiares de desempenho CLS claros para ajudar proprietários de sites a entender seu desempenho de estabilidade visual. Uma pontuação CLS de 0,1 ou inferior é considerada “Boa” e representa o alvo que os proprietários de sites devem buscar alcançar. Pontuações entre 0,1 e 0,25 são classificadas como “Precisa de Melhoria”, indicando que, embora a página não esteja falhando, esforços de otimização melhorariam significativamente a experiência do usuário. Qualquer pontuação CLS acima de 0,25 é considerada “Ruim” e sugere instabilidade visual substancial que provavelmente frustra os usuários e impacta negativamente as métricas de engajamento. Esses limiares são medidos no 75º percentil dos carregamentos de página, segmentados entre dispositivos móveis e desktop, garantindo que a métrica reflita a experiência da maioria dos usuários, em vez de ser distorcida por outliers. A pesquisa que apoia esses limiares envolveu a análise de milhões de experiências reais de usuários e a correlação da gravidade das mudanças de layout com métricas de satisfação do usuário. A pontuação de desempenho do Lighthouse aloca 25% de seu peso total para o CLS, tornando-o um componente significativo da avaliação geral de desempenho da página. Compreender esses limiares é essencial para priorizar esforços de otimização — páginas com pontuações CLS acima de 0,25 devem ser tratadas imediatamente, enquanto aquelas entre 0,1 e 0,25 devem ser incluídas em roteiros de otimização contínua.

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

Causas Comuns de Pontuações CLS Ruins

Imagens e vídeos sem dimensões especificadas representam uma das causas mais prevalentes de mudanças de layout. Quando os desenvolvedores não incluem atributos de largura e altura nas tags HTML de imagem, os navegadores não podem alocar espaço para esses elementos até que sejam totalmente carregados. Isso faz com que o conteúdo ao redor se desloque inesperadamente à medida que a imagem é renderizada. Da mesma forma, anúncios, incorporações e iframes sem dimensões predefinidas frequentemente causam instabilidade de layout, particularmente anúncios de terceiros onde os desenvolvedores têm controle limitado 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 que se expandem — pode empurrar o conteúdo existente se o espaço não for reservado antecipadamente. Fontes da web causando FOIT (Flash of Invisible Text) ou FOUT (Flash of Unstyled Text) ocorrem quando fontes personalizadas carregam e renderizam de forma diferente das fontes de fallback, causando refluxo de texto e mudanças de layout. Animações implementadas inadequadamente usando propriedades CSS como top, left, bottom, right ou box-shadow disparam recálculos de layout em vez de usar transformações aceleradas por GPU. JavaScript de terceiros carregando assincronamente pode injetar elementos visuais de forma imprevisível, e carregamento preguiçoso sem placeholders adequados faz com que o conteúdo se desloque quando as imagens finalmente carregam enquanto os usuários rolam. Compreender essas causas permite que os desenvolvedores implementem soluções direcionadas em vez de tentar otimizações amplas e ineficazes.

Melhores Práticas para Otimizar CLS

Especificar dimensões explícitas para toda a mídia é a estratégia fundamental de otimização de CLS. Cada imagem, vídeo e conteúdo incorporado deve incluir atributos de largura e altura no HTML, permitindo que os navegadores reservem espaço apropriado antes do carregamento do conteúdo. Para designs responsivos, caixas de proporção CSS mantêm relações largura-altura consistentes em diferentes tamanhos de tela usando a propriedade aspect-ratio ou técnicas de padding-bottom. Reservar espaço para conteúdo dinâmico através de placeholders CSS garante que anúncios, widgets e outros elementos carregados dinamicamente não causem mudanças quando aparecem. Usar transformações CSS em vez de propriedades de layout para animações evita recálculos de layout — transform: translate() e transform: scale() devem substituir top, left e alterações de dimensão. Pré-carregar fontes da web críticas e definir font-display: optional ou font-display: fallback evita que o texto fique invisível ou cause mudanças de layout durante o carregamento da fonte. Evitar inserção de conteúdo acima do conteúdo existente impede o deslocamento de elementos que os usuários estão lendo ou com os quais estão interagindo ativamente. Implementar carregamento preguiçoso adequado com placeholders garante que as imagens carreguem em espaço reservado, em vez de causar mudanças. Adiar JavaScript de terceiros para carregar abaixo da dobra ou após a interação do usuário evita injeção inesperada de conteúdo na viewport principal. Essas práticas, quando implementadas sistematicamente, geralmente reduzem as pontuações CLS de ruins (>0,25) para boas (≤0,1).

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

Mudanças de layout impactam diretamente a satisfação do usuário e os resultados de negócio de maneiras mensuráveis. Estudos demonstram que mudanças inesperadas de layout fazem com que os usuários percam seu lugar durante a leitura, levando ao aumento das taxas de rejeição e redução do tempo na página. Em contextos de e-commerce, mudanças de layout podem fazer com que os usuários cliquem acidentalmente em produtos ou links errados, resultando em frustração e abandono de carrinho. Pesquisas da Relive mostraram que reduzir as mudanças de layout a praticamente zero melhorou a experiência do cliente e aumentou as taxas de conversão em 5%, enquanto outro estudo de caso demonstrou uma melhoria de 41% no CLS levando a um aumento de 10% nas taxas de conversão. A pesquisa da Layout Instability API indica que usuários que experimentam mudanças significativas de layout têm 2 a 3 vezes mais probabilidade de abandonar uma página antes de completar a ação pretendida. Além da experiência do usuário, o algoritmo de ranqueamento do Google recompensa explicitamente páginas com boas pontuações CLS, o que significa que otimizar a estabilidade visual proporciona benefícios imediatos na experiência do usuário e vantagens de SEO a longo prazo. Páginas com pontuações CLS ruins podem ver visibilidade reduzida nos resultados de busca, particularmente para palavras-chave competitivas onde múltiplas páginas têm bons Core Web Vitals. O efeito cumulativo da otimização de CLS — melhoria da experiência do usuário, maiores taxas de conversão e melhores rankings de busca — torna-o um alvo de otimização 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 CLS apenas durante o carregamento inicial da página em um ambiente sintético controlado, tipicamente capturando apenas mudanças de layout visíveis na primeira viewport. Essa abordagem perde mudanças de layout que ocorrem quando os usuários rolam, 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 em todas as interações ao longo de todo o ciclo de vida da página, incluindo mudanças que ocorrem durante a rolagem e após interações do usuário. Isso explica por que uma página pode mostrar uma boa pontuação CLS no Lighthouse, mas uma pontuação ruim no relatório Core Web Vitals do Search Console — os dados de campo incluem mudanças que o teste de laboratório nunca encontrou. Soluções de Real User Monitoring (RUM) fornecem insights detalhados sobre quando e onde as mudanças de layout ocorrem para visitantes reais, incluindo padrões específicos de dispositivo e mudanças baseadas em rolagem. Os desenvolvedores devem priorizar dados de campo quando disponíveis, pois refletem a experiência genuína do usuário, enquanto usam dados de laboratório para identificar e depurar problemas específicos. A discrepância entre dados de laboratório e campo destaca a importância do monitoramento contínuo em vez de testes pontuais, garantindo que os esforços de otimização abordem experiências reais do usuário em vez de cenários de teste sintéticos.

CLS e Monitoramento de 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 torna-se relevante para plataformas de monitoramento de IA. Quando sistemas de IA citam ou referenciam seu site, os usuários que clicam para acessar seu domínio encontram o desempenho CLS da sua página em primeira mão. Pontuações CLS ruins podem impactar negativamente a experiência do usuário para tráfego referido por IA, potencialmente aumentando taxas de rejeição e reduzindo o valor das citações de IA. Ferramentas de monitoramento como AmICited rastreiam como seu domínio aparece em plataformas de IA, e entender o desempenho CLS torna-se parte de uma estratégia abrangente de monitoramento de marca. Sites com pontuações CLS excelentes proporcionam melhor experiência do usuário para todas as fontes de tráfego, incluindo visitantes referidos por 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 CLS e a presença digital geral torna-se cada vez mais importante para manter a reputação da marca e a satisfação do usuário em todos os canais de tráfego.

Como Auditar Seu Site para Problemas de CLS

Execute esta auditoria sempre que as pontuações CLS no Search Console aumentarem ou antes de um redesenho importante. Comece com dados de campo, não dados de laboratório: abra o relatório Core Web Vitals do Search Console e identifique quais grupos de URL estão nas categorias “Precisa de Melhoria” ou “Ruim”, pois isso reflete a experiência real do usuário através do CrUX, em vez de um teste sintético de página única. Para cada página sinalizada, abra o painel Performance do Chrome DevTools, grave um carregamento de página e procure pelas entradas “Layout Shift” sinalizadas na seção Experience — clicar em cada uma mostra exatamente qual elemento DOM se moveu e quanto, permitindo mapear contribuições de pontuação diretamente para elementos específicos. Verifique cada tag de imagem e vídeo em busca de atributos de largura/altura ausentes ou de uma regra CSS aspect-ratio ausente; esta é a causa mais comum e é corrigível com dimensões explícitas. Inspecione espaços de anúncios, incorporações e widgets de terceiros quanto a espaço reservado — se um contêiner não tiver altura mínima definida antes do carregamento do anúncio, ele empurrará o conteúdo para baixo quando renderizar. Teste o comportamento de carregamento de fontes da web especificamente: compare o CLS com a rede limitada a 3G, pois trocas lentas de fonte causadas por font-display ausente ou falta de pré-carregamento são uma causa comum de mudanças que não aparecem em conexões rápidas. Finalmente, revise qualquer conteúdo injetado dinamicamente — banners de cookies, barras promocionais ou seções de carregamento preguiçoso — que aparecem acima do conteúdo existente, pois inserir conteúdo acima da dobra após a renderização inicial é um dos maiores gatilhos de CLS e requer um placeholder ou tratamento de posição fixa em vez de uma injeção no fluxo.