O que é CLS (Cumulative Layout Shift) e como reduzir nos Core Web Vitals

O CLS, sigla de Cumulative Layout Shift (mudança cumulativa de layout), é a métrica que mede a estabilidade visual de uma página enquanto ela carrega. Ele faz parte dos Core Web Vitals, o conjunto de métricas de experiência que o Google usa como sinal de ranqueamento.

Na prática, o CLS captura aquele incômodo em que você vai clicar em um botão e, de repente, um banner ou uma imagem carrega, empurra tudo para baixo e você acaba clicando no lugar errado. Cada salto inesperado de um elemento soma pontos ao CLS: quanto mais a página se mexe sozinha, pior a nota.

Um aviso rápido sobre a sigla: CLS também é o nome de um modelo de carro da Mercedes-Benz e de várias empresas. Neste glossário, CLS significa sempre a métrica de estabilidade visual dos Core Web Vitals.

O CLS não mede tempo, e sim movimento. Ele resulta da combinação de dois fatores a cada salto de layout: a fração de impacto (quanto da tela o elemento instável ocupa) e a fração de distância (o quanto ele se deslocou). A pontuação de um salto é a multiplicação dos dois.

O buscador soma esses saltos em janelas de sessão e considera a maior delas como a nota final da página. Só entram na conta os deslocamentos inesperados: se o elemento se move por causa de uma ação do usuário, como clicar para expandir um menu, aquele movimento não é penalizado.

Por ser uma métrica de campo, o CLS costuma ser medido com dados reais de usuários. Ferramentas de SEO técnico e o próprio relatório do Google reúnem esses números ao longo do tempo, no percentil 75 dos carregamentos.

O Google define faixas claras para o CLS. Segundo a documentação do web.dev, a meta é ficar em 0,1 ou menos no percentil 75 dos carregamentos, tanto no celular quanto no computador:

Ao contrário de métricas medidas em segundos, o CLS é um número sem unidade: quanto mais perto de zero, mais estável a página. Ele forma o trio dos Core Web Vitals ao lado do LCP, que mede o carregamento, e do INP, que mede a resposta à interação.

Os saltos de layout quase sempre têm as mesmas origens. As mais comuns são:

• Imagens sem dimensões: fotos e vídeos sem largura e altura definidas fazem o texto pular quando finalmente carregam.
• Anúncios, embeds e iframes: blocos de tamanho variável que aparecem sem um espaço reservado empurram o conteúdo ao redor.
• Fontes web: quando a fonte personalizada troca a fonte padrão, o texto pode mudar de tamanho e reorganizar a página.
• Conteúdo injetado dinamicamente: avisos de cookie, banners e widgets inseridos acima do que já estava na tela deslocam tudo para baixo.
• Ações que esperam a rede: elementos que só aparecem depois de uma resposta do servidor e entram no meio do conteúdo.

Reconhecer a causa é metade do caminho: a maioria desses problemas se resolve reservando espaço antes de o elemento chegar.

Estabilizar a página é, na prática, garantir que cada elemento já tenha o seu lugar antes de carregar. Um bom roteiro:

• Defina largura e altura das mídias: informe as dimensões de imagens e vídeos para o navegador reservar o espaço exato.
• Reserve área para anúncios e embeds: deixe um contêiner com tamanho fixo onde o bloco vai entrar.
• Cuide das fontes: faça o pré-carregamento das fontes principais e use estratégias de exibição que evitem a troca brusca.
• Não empurre o conteúdo: insira banners e avisos sem deslocar o que a pessoa já está lendo, de preferência em espaços fixos.
• Anime com transform: prefira animações que não alterem o fluxo do layout.

Depois dos ajustes, meça de novo com dados reais. Pequenas mudanças no reservar de espaço costumam derrubar bastante a nota.

Reduzir o CLS não é só capricho técnico. Uma página estável evita cliques errados, transmite qualidade e mantém a pessoa lendo, o que melhora métricas de negócio de ponta a ponta.

Os dados reforçam isso. Em um estudo de caso publicado pelo web.dev, a Rakuten 24 melhorou os Core Web Vitals de uma página, com o CLS caindo cerca de 92% em relação à versão original, e registrou aumento de 53,37% na receita por visitante e de 33,13% na taxa de conversão. Como os Core Web Vitals são um sinal de ranqueamento, o ganho aparece tanto em experiência quanto em busca.

Para acompanhar a evolução, o relatório de Core Web Vitals do Google Search Console mostra quais URLs estão nas faixas boa, a melhorar e ruim, com base em usuários reais. É por ali que se prioriza o que corrigir primeiro.