Porque é que a Sua Página Está a Deslocar-se
Quase todos os problemas de CLS vêm de uma de três fontes:
- Imagens e iframes sem dimensões reservadas. Se o navegador não souber o tamanho de uma imagem antes de esta carregar, renderiza a caixa com altura zero e depois desloca tudo o que está abaixo assim que a imagem chega.
- Conteúdo injetado acima do conteúdo existente. Anúncios, barras promocionais e banners de cookies inseridos no DOM após a renderização inicial empurram tudo o que está abaixo deles para baixo.
- Web fonts que reformatam o texto ao trocar. Uma fonte de recurso é renderizada primeiro, depois a fonte real carrega e substitui-a com uma largura/altura diferente, reformatando cada linha que toca.
Como Identificar o Que Está a Deslocar-se
As verificações de desempenho do Scanverra pontuam o CLS diretamente a partir de uma execução real do Lighthouse contra o seu URL em produção, usando a mesma métrica cumulative-layout-shift em que os dados de campo do Google se baseiam. Quando está elevado, o Scanverra assinala-o como um problema distinto - não apenas um número, mas um problema com nome - porque um layout instável também quebra outra coisa: um agente de IA ou uma ferramenta automatizada a tentar clicar num botão que acabou de se mover vai visar o elemento errado.
Para encontrar o elemento específico responsável, o painel Performance do Chrome DevTools regista entradas de "Layout Shift" com o nó exato que se moveu e por quanto - abra-o, grave o carregamento de uma página, e procure os marcadores vermelhos de deslocamento de layout na faixa Experience.
Como Corrigir
1. Reserve espaço com dimensões explícitas
Cada imagem, vídeo e iframe deve declarar a sua largura e altura (ou usar o aspect-ratio CSS moderno) para que o navegador possa alocar a caixa correta antes de o recurso chegar:
1<img
2 src="/product.webp"
3 alt="Wireless keyboard, top view"
4 width={640}
5 height={480}
6 loading="lazy"
7/>Quando o tamanho exato em pixels varia (um embed responsivo, por exemplo), use CSS em alternativa:
1.video-embed {
2 width: 100%;
3 aspect-ratio: 16 / 9;
4}2. Dê ao conteúdo injetado dinamicamente um espaço de altura fixa
Se um banner de cookies, um espaço de anúncio ou uma barra promocional tiver de ser inserido após a renderização inicial, dê ao seu contentor um min-height reservado desde o início em vez de o deixar empurrar o conteúdo para baixo quando chega - mesmo uma caixa de espaço reservado vazia evita o deslocamento.
3. Ajuste as métricas da sua fonte de recurso à fonte real
Use font-display: swap combinado com uma fonte de recurso cuja x-height e largura média de carácter estejam próximas da sua fonte real (ferramentas como o Fontaine ou o ajuste manual de size-adjust num bloco @font-face podem alinhá-las), para que a troca não reformate visivelmente a linha.
4. Nunca insira conteúdo acima da posição atual de scroll do utilizador
Se novo conteúdo tiver de aparecer - um banner de "novas publicações disponíveis", por exemplo - insira-o abaixo da dobra ou exija uma ação do utilizador para o revelar, em vez de o injetar acima do que já está visível.
Como o Scanverra Deteta Problemas de CLS
O Scanverra executa uma passagem real do Lighthouse contra o seu URL em produção e lê o valor real de cumulative-layout-shift a partir dela - a mesma execução usada para o LCP e o TTFB - e assinala um problema dedicado quando está elevado, com uma descrição ligada ao motivo pelo qual a instabilidade de layout importa especificamente para quem (humano ou automatizado) tenta interagir com a sua página.