CLS
CLS (Cumulative Layout Shift) é a métrica que mede mudanças inesperadas no layout de uma página enquanto ela carrega ou enquanto o usuário interage.
CLS significa Cumulative Layout Shift. É a métrica que mede a estabilidade visual de uma página. Na prática, ela mostra o quanto os elementos se movem inesperadamente na tela enquanto o usuário tenta ler, clicar ou interagir.
Sabe quando você vai clicar em um botão e, de repente, um banner carrega acima dele e empurra tudo para baixo? Isso é mudança de layout. Além de irritante, pode causar cliques errados e reduzir confiança na página.
Por que o layout se move
Os casos mais comuns são imagens sem largura e altura definidas, anúncios carregados sem espaço reservado, fontes que trocam depois do carregamento e componentes dinâmicos inseridos acima do conteúdo principal.
Como funciona na prática
- O navegador monitora a posição dos elementos visíveis na tela
- Quando um elemento muda de posição sem ação esperada do usuário, o deslocamento é registrado
- A pontuação considera o tamanho da área afetada e a distância do movimento
- Vários pequenos deslocamentos podem se acumular durante a visita
- A correção passa por reservar espaço para imagens, anúncios, fontes e componentes dinâmicos
Exemplo Prático
Um blog carrega a imagem destacada sem definir dimensões. Primeiro aparece o texto, depois a imagem entra e empurra o conteúdo para baixo. Ao definir width, height ou aspect-ratio, o navegador reserva o espaço correto e o CLS cai.
Por que isso é importante?
CLS importa porque estabilidade visual é parte da confiança do usuário. Páginas que pulam enquanto carregam parecem mal cuidadas, geram cliques errados e prejudicam a experiência mobile.
Perguntas Frequentes (FAQ) sobre CLS
CLS afeta SEO?
Sim, CLS faz parte dos Core Web Vitals. Ele não é mais importante que relevância do conteúdo, mas uma experiência visual instável pode atrapalhar páginas em disputas competitivas.
Como reduzir CLS rapidamente?
Defina dimensões de imagens e iframes, reserve espaço para banners, evite inserir conteúdo acima do que o usuário já está vendo e configure fontes para reduzir trocas visuais bruscas.