Guias

CLS, sigla de Cumulative Layout Shift, é uma das Core Web Vitals do Google, as métricas que o Google usa para avaliar o quão boa uma página é de usar. O CLS mede a estabilidade visual: enquanto uma página carrega, os elementos ficam no lugar ou saltam de um lado para o outro? Um CLS baixo significa que o layout é estável e previsível; um CLS alto significa que o conteúdo se desloca diante dos seus olhos justamente quando tenta ler uma linha ou tocar num botão, uma das coisas mais frustrantes que uma página web pode fazer.

Como o CLS é medido e pontuado

O nome descreve o que capta. É cumulativo porque soma os deslocamentos de layout que ocorrem durante a vida da página, e um deslocamento de layout acontece sempre que um elemento visível muda de posição de um frame renderizado para o seguinte sem que você tenha pedido. O movimento que você desencadeou não conta: clicar num link, abrir um acordeão ou um menu é um movimento esperado e é excluído. Uma imagem que carrega tarde e empurra para baixo o parágrafo que estava a ler não é esperada, e é exatamente isso que o CLS foi concebido para detetar.

O CLS é uma das três Core Web Vitals, ao lado do Largest Contentful Paint, que mede o carregamento, e do Interaction to Next Paint, que mede a capacidade de resposta. O CLS é aquele que cobre a estabilidade visual. Uma página pode carregar depressa e responder de imediato e ainda assim ter um CLS fraco se as coisas se moverem depois de aparecerem pela primeira vez, por isso as três métricas medem qualidades realmente diferentes e uma página precisa de passar em todas.

Ao contrário de uma métrica baseada em tempo como o LCP ou o INP, o CLS é uma pontuação sem unidades em vez de um número de milissegundos. Cada deslocamento individual é pontuado multiplicando duas frações: a fração de impacto, quanto do viewport os elementos em movimento afetaram, e a fração de distância, quanto se moveram em relação ao viewport. Essas pontuações de deslocamento são combinadas no valor que o Google reporta, de modo que contam tanto o quanto se moveu como a distância percorrida.

Os limites do Google

Os limites do Google, medidos no percentil 75 dos carregamentos reais, são fáceis de recordar. Um CLS de 0,1 ou menos é Good. Entre 0,1 e 0,25 é Needs improvement. Acima de 0,25 é Poor. Como a pontuação é cumulativa, vários deslocamentos pequenos podem somar-se numa nota de reprovação mesmo quando nenhum salto isolado parece dramático, e é por isso que a estabilidade tem de ser um hábito em toda a página e não uma correção para um único elemento visível.

• O que é: Cumulative Layout Shift, uma das três Core Web Vitals, ao lado do Largest Contentful Paint e do Interaction to Next Paint.
• O que mede: a estabilidade visual, o quanto o conteúdo visível se move de forma inesperada enquanto uma página carrega.
• Como é pontuado: um valor sem unidades obtido somando pontuações de deslocamento, cada uma a fração de impacto multiplicada pela fração de distância.
• Limites no percentil 75: Good é 0,1 ou menos, Needs improvement é de 0,1 a 0,25, Poor é acima de 0,25.
• Como melhorá-lo: definir dimensões ou aspect-ratio nos media, reservar espaço para conteúdo tardio como anúncios e banners, ajustar as fontes web e animar com transform.

O que provoca os deslocamentos de layout

A maioria dos deslocamentos de layout vem de um punhado de causas conhecidas. Imagens, vídeos e iframes inseridos sem atributos width e height não têm espaço reservado, por isso o navegador tem de recalcular o layout quando chegam e conhece o seu tamanho real. As fontes web podem causar um deslocamento quando uma fonte de recurso é substituída pela fonte web e o texto é recomposto num tamanho diferente. E conteúdo injetado acima do que já está a ler, como anúncios, embeds ou um banner tardio de cookies ou consentimento, empurra para baixo tudo o que está por baixo.

Como corrigir e evitar os deslocamentos

As correções decorrem diretamente das causas. Defina sempre os atributos width e height em imagens e vídeo, ou reserve o espaço com a propriedade CSS aspect-ratio, para que o navegador conheça o tamanho antes de o media carregar. Reserve espaço para tudo o que chega tarde, incluindo espaços publicitários e banners, em vez de o deixar aparecer sobre o conteúdo existente. Para as fontes web, use a propriedade font-display e faça corresponder o mais possível as métricas da fonte de recurso, para que a troca desloque o texto o mínimo possível.

A animação também importa. Se precisar de mover um elemento, anime-o com a propriedade CSS transform em vez de alterar propriedades como top, left, width ou height. As transforms são tratadas pelo compositor do navegador e não desencadeiam layout, por isso movem um elemento visualmente sem contar como deslocamento de layout, o que lhe permite manter o movimento no seu design sem prejudicar a pontuação.

Como medir o CLS

O CLS avalia-se melhor com dados de campo, utilizadores reais em dispositivos e ligações reais, que pode ver no Chrome User Experience Report e no relatório de Core Web Vitals do Google Search Console. Para depurar em laboratório, o painel Performance das Chrome DevTools destaca os deslocamentos de layout e os elementos responsáveis, o Lighthouse reporta um valor de CLS, e a biblioteca JavaScript web-vitals mede-o diretamente no navegador. Neste site, o nosso verificador de web vitals permite-lhe introduzir os seus valores medidos e ver de imediato se passam nos limites do Google.

Em resumo

Em resumo: o CLS recompensa páginas cujo layout permanece no lugar. A maior parte do trabalho é defensiva, reservar espaço para imagens, media, fontes e tudo o que é injetado tarde, para que nada tenha de empurrar o conteúdo existente. Faça isto bem e uma página parece calma e estável em vez de instável, que é exatamente o que a métrica pretende incentivar.