CLS: por que a página se mexe sozinha e como fazer ela parar

A página se mexe sozinha depois de já ter aparecido. A métrica que mede isso é o CLS, e ela soma cada deslocamento inesperado de conteúdo que já estava visível na tela. O visitante começa a ler, uma imagem termina de carregar acima do texto e tudo desce trinta pixels — ele perde a linha, e às vezes o dedo acerta o botão errado.

Segundo a documentação do Google, abaixo de 0,1 é considerado bom. É a única das três métricas de experiência sem unidade de tempo: a pontuação vem da fração da tela afetada multiplicada pela distância do movimento.

A boa notícia é que as causas são poucas e conhecidas. Quatro padrões respondem pela maior parte dos casos, e todos se corrigem com CSS e HTML — sem tocar em servidor, sem trocar de plataforma.

Por que o navegador desloca o conteúdo já pintado?

Porque ele desenha com a informação que tem no momento. Se o HTML não diz quanto espaço um elemento vai ocupar, o navegador reserva zero, desenha o que vem depois e depois corrige quando o elemento chega.

Essa correção é o deslocamento que o CLS registra. E ela só é penalizada quando é inesperada: se o usuário clica em "ver mais" e o conteúdo expande, o navegador entende que houve interação e não conta o movimento — há uma janela de meio segundo após a interação em que os deslocamentos são ignorados.

Isso dá a regra geral do trabalho: tudo que muda de tamanho sem o usuário pedir precisa ter o espaço reservado antes.

Imagens sem largura e altura declaradas

É a maior fonte de CLS na maioria dos sites, e a mais fácil de resolver. Sem os atributos width e height na tag, o navegador não sabe a proporção do arquivo até baixar o cabeçalho da imagem. Enquanto isso, o espaço vale zero.

Declare os dois atributos com as dimensões reais do arquivo. O CSS continua controlando o tamanho exibido — width: 100%; height: auto — mas o navegador já sabe a proporção e reserva a altura correta desde a primeira pintura.

Para casos em que a proporção varia, use aspect-ratio no CSS do contêiner. Vale também para vídeos incorporados, mapas e qualquer iframe: um contêiner com proporção fixa e o elemento ocupando 100% dele.

E imagens de tamanho desconhecido?

Acontece com conteúdo enviado por editores ou vindo de API. Duas saídas: gravar largura e altura no momento do upload e emitir os atributos no template, ou fixar um contêiner com proporção definida e usar object-fit: cover. A segunda corta um pouco da imagem, e é o preço da estabilidade.

Fontes que trocam e geram CLS no texto

Quando uma fonte customizada carrega depois da primeira pintura, o texto é redesenhado com métricas diferentes. Letras mais largas ou mais altas mudam onde as linhas quebram, o parágrafo muda de altura e tudo abaixo dele se move.

font-display: swap mostra o texto imediatamente com uma fonte de sistema e troca quando a customizada chega. Bom para a velocidade de exibição, ruim para a estabilidade: a troca é justamente o que empurra o layout.

font-display: optional faz o contrário. Dá um prazo curto para a fonte chegar; se ela não chegar, o navegador mantém a fonte de sistema pela visita inteira e não troca depois. Zero deslocamento, ao custo de nem sempre exibir sua tipografia.

Como decidir entre os dois

Se a identidade visual depende da tipografia, use swap e reduza o impacto: hospede a fonte no próprio domínio, faça preload do arquivo usado no topo e ajuste size-adjust e ascent-override na fonte de fallback para que as duas ocupem quase o mesmo espaço. Bem calibrado, o salto some.

Se a tipografia é decorativa, optional resolve o problema em uma linha. A escolha entre as duas é um daqueles pontos em que velocidade e estabilidade se contrapõem — o mesmo trade-off que aparece em como as fontes atrasam a exibição do conteúdo principal.

Banners, avisos e barras injetadas no topo

Uma barra de frete grátis, um aviso de cookies ou um alerta de estoque que entra no topo do documento empurra a página inteira para baixo. Se isso acontece meio segundo depois do carregamento, o visitante já começou a ler.

Três correções, em ordem de preferência. A primeira: renderizar o aviso no HTML inicial, junto com o resto da página, para que ele nunca "apareça". A segunda: posicionar o elemento com position: fixed sobre o conteúdo, sem ocupar espaço no fluxo. A terceira: reservar a altura com um espaço vazio desde o início, que o banner preenche quando chega.

O caso mais irritante é o do aviso que entra e sai. Uma barra que soma 60 pixels e depois é fechada sozinha gera dois deslocamentos, não um, e ambos contam para o CLS.

Conteúdo que chega depois: anúncios e embeds

Blocos de anúncio, players de vídeo, widgets de avaliação e formulários carregados por script têm a mesma característica: o HTML sai do servidor sem eles, e o espaço aparece depois.

Anúncios costumam ser o item de maior CLS em sites que vivem de mídia. Reserve o espaço com um contêiner de altura mínima definida, dimensionado pelo tamanho mais frequente daquele slot. Se o tamanho varia, escolha a maior altura provável — sobra de espaço em branco custa menos que deslocamento.

Em rolagem infinita, cuidado com o rodapé: cada bloco novo empurra tudo abaixo dele. Reserve a área da próxima página de resultados antes de pedi-la.

Por que animar transform não gera CLS?

Porque transform e opacity são aplicados na composição, em uma camada separada, sem refazer o layout da página. O elemento se move na tela, mas as posições calculadas dos vizinhos não mudam. Para a métrica, nada aconteceu.

Animar top, left, margin, width ou height é outra história. Cada quadro recalcula o layout e reposiciona o que está em volta, e esse é exatamente o movimento que o CLS mede. Um acordeão que anima altura durante 300 milissegundos gera deslocamento em cada quadro.

Duas saídas práticas: usar transform: scaleY() no lugar de height quando o efeito visual permite, ou disparar a animação apenas em resposta a um clique do usuário, aproveitando a janela em que os deslocamentos não contam.

Como descobrir onde está o CLS no seu site?

O painel de performance do Chrome marca cada deslocamento na linha do tempo e mostra qual elemento se moveu. O PageSpeed Insights aponta os maiores contribuintes. Faça as duas coisas no perfil de celular, onde as colunas se empilham e um elemento fora de lugar move muito mais tela.

Um detalhe que engana: o teste de laboratório mede só o intervalo em que rodou, e ninguém rola a página durante ele. Deslocamento que acontece no meio do conteúdo, ou vários segundos depois, só aparece nos dados de usuários reais — a mesma diferença entre o que o laboratório vê e o que o Google usa para ranquear.

Do lado de dentro, é útil registrar os deslocamentos em produção com a biblioteca oficial de métricas do Google, que reporta o seletor do elemento culpado. Sem isso, a equipe passa o dia atrás de um movimento que só acontece em uma resolução específica. Fazemos esse levantamento junto com o restante do diagnóstico nos nossos projetos de sites com SEO técnico, porque as correções são baratas e o custo real está em localizá-las.

Por último, uma observação de prioridade: estabilidade visual costuma ser a métrica mais rápida de resolver e a mais fácil de manter — bem diferente da resposta a cliques, que depende de disciplina contínua com JavaScript. Comece por aqui se as três estiverem reprovadas. É o ganho mais barato disponível.