Cumulative Layout Shift (CLS)

O que esta verificação faz

Lê o CLS do PageSpeed Insights. O CLS é uma pontuação sem unidade — a soma acumulada de cada mudança inesperada de layout durante o carregamento da página, ponderada pela quantidade de viewport que se moveu e por quanto.

Valor de CLS	Veredicto
≤ 0,1	Bom
0,1–0,25	Precisa de melhorar
> 0,25	Mau

Porque é importante

Uma página que salta é uma página frustrante. Clicas num botão, a página move-se, clicas na coisa errada. Estás a ler um parágrafo, carrega um anúncio, o parágrafo desce. As mudanças de layout estão entre as métricas mais correlacionadas com a taxa de ressalto.

O CLS é o terceiro Core Web Vital ao lado do LCP e do INP. É também o mais fácil de corrigir depois de encontrares os elementos culpados — a maior parte do CLS vem de um punhado de padrões específicos.

Como corrigir

1. Reserva espaço para imagens e embeds. Define sempre os atributos width e height (ou aspect-ratio em CSS):

<img src="/hero.webp" width="1200" height="600" alt="..." />

O browser reserva a caixa antes de a imagem carregar. Sem isto, a imagem aparece e o texto abaixo salta para baixo.

2. Reserva espaço para anúncios. Se usares AdSense ou similar, define uma altura mínima no contentor do anúncio que corresponda ao tamanho de anúncio mais comum:

.ad-slot {
  min-height: 250px;
}

3. Evita webfonts que carregam tarde. Usa font-display: swap (o texto renderiza primeiro num fallback e troca quando a webfont chega — pequeno CLS) ou font-display: optional (sem troca; melhor CLS, pior branding). Woff2 auto-alojado com preload minimiza a janela de troca.

4. Não insiras conteúdo por cima de conteúdo existente. Banners de cookies, prompts de “subscreve” e toasts de “tens uma nova notificação” que empurram a página para baixo = CLS garantido. Posiciona-os como overlays (position: fixed).

5. Usa transforms CSS para animar, não top/left. transform: translateY() não despoleta mudanças de layout. Animar top despoleta.

Perguntas frequentes

Como é o CLS pontuado?

A pontuação é a pior janela de 5 segundos de mudanças de layout durante a sessão, não a soma de toda a vida. O Google atualizou isto em 2021 para evitar penalizar páginas longas desproporcionalmente.

E as mudanças iniciadas pelo utilizador?

Cliques, toques e submissões de formulário que provocam alterações de layout ficam excluídos do CLS durante 500 ms após a interação. Por isso expandir um acordeão não conta — só contam as alterações “surpresa”.

Porque é que o meu CLS dispara em mobile mas não no desktop?

As viewports mobile são mais estreitas, por isso uma deslocação de N pixels é uma fração maior do ecrã. Mesma causa, penalização maior. Testa sempre no perfil mobile do PageSpeed.