CLS, ou Cumulative Layout Shift, é a métrica Core Web Vitals que mede a estabilidade visual de uma página, somando todos os deslocamentos inesperados de elementos enquanto a página carrega.
Definição abrangente
Um CLS elevado é o que acontece quando estás a ler um texto ou prestes a clicar num botão e, de repente, um elemento acima empurra tudo para baixo, muitas vezes levando a um clique errado. A Google calcula esta pontuação combinando o tamanho da área afetada com a distância do deslocamento, e considera boa uma pontuação até 0,1, a precisar de melhorias entre 0,1 e 0,25, e fraca acima de 0,25.
Informação relevante e com maior detalhe
Causas mais comuns de layout instável:
Imagens e vídeos sem dimensões definidas: sem os atributos
widtheheight(ou uma proporção CSS equivalente), o browser não reserva o espaço certo antes de o ficheiro carregar;Anúncios e embeds inseridos dinamicamente: blocos de publicidade ou widgets de redes sociais que só ocupam espaço depois de carregados são uma das causas mais frequentes de CLS elevado;
Fontes personalizadas sem fallback: a troca entre uma fonte de sistema e uma fonte web carregada tardiamente pode alterar o tamanho do texto e empurrar o resto do conteúdo;
Conteúdo inserido acima do que já está visível: banners de cookies ou notificações que aparecem no topo sem reservar espaço prévio são um erro comum e fácil de evitar.
Partilha este conteúdo: