O texto a seguir fala sobre definição de CLS e layout shift, limites Bom / Precisa melhorar / Ruim, impacto em SEO e experiência, causas (imagens, fontes, anúncios, iframes, conteúdo dinâmico), como corrigir, como medir, checklist, erros comuns e perguntas frequentes.
O que é CLS (Cumulative Layout Shift)
CLS é a soma dos deslocamentos de layout que ocorrem durante a vida da página. Sempre que um elemento visível muda de posição entre um frame e o seguinte (porque ganhou tamanho, foi inserido depois ou a fonte trocou), o navegador calcula a fração da viewport afetada e acumula no score. Quanto mais movimento inesperado, maior o CLS.
O termo layout shift designa exatamente esse “pulo”: o usuário está lendo ou prestes a clicar e o conteúdo se desloca. O CLS é a métrica que quantifica esse efeito ao longo da sessão. Faz parte dos Core Web Vitals, junto com LCP (carregamento) e INP (interatividade). O Google considera:
- Bom: CLS até 0,1
- Precisa melhorar: entre 0,1 e 0,25
- Ruim: acima de 0,25
O valor é adimensional. Um único deslocamento grande (por exemplo, um banner que empurra todo o conteúdo para baixo) pode gerar um CLS alto; vários deslocamentos pequenos também somam. O objetivo é manter a página estável desde o primeiro paint.
Por que reduzir layout shift importa para SEO e experiência
Layout instável prejudica uso e ranqueamento:
- Ranqueamento: o Google usa Core Web Vitals como sinal de experiência. Páginas com CLS ruim podem perder posição em relação a concorrentes mais estáveis.
- Usabilidade: elementos que se movem levam a cliques acidentais, leitura interrompida e frustração. Usuários tendem a sair de páginas que “pulam”.
- Conversão: botões e formulários que mudam de lugar aumentam erros e abandonos. Layout estável reforça confiança e conclusão de ações.
- Mobile-first: em telas pequenas, cada deslocamento ocupa uma fatia maior da viewport; o impacto no CLS e na experiência é maior. A indexação prioriza mobile.
Reduzir layout shift é uma das três frentes dos Core Web Vitals. A ferramenta Page Speed do Senior SEO exibe CLS, LCP e INP por URL.
Como o CLS é calculado
Cada “layout shift” é um movimento de um elemento estável entre dois frames. O navegador mede a área que esse elemento ocupava no frame anterior e a área que passou a ocupar (ou que outros elementos “perderam” ou “ganharam”) em relação à viewport. A contribuição daquele shift é: impact fraction (quanto da tela foi afetado) × distance fraction (quanto o elemento se moveu em relação ao tamanho da viewport). O CLS da página é a soma dessas contribuições ao longo do tempo — apenas para elementos que já estavam visíveis no frame anterior (não conta conteúdo que aparece pela primeira vez em área vazia, desde que não desloque o que já estava lá).
Na prática: imagens sem altura que entram no layout e empurram o texto, fontes que trocam e aumentam a linha, anúncios inseridos no meio da página e iframes que ocupam espaço só depois de carregar são as fontes mais comuns de contribuição ao CLS.
Causas comuns de CLS alto (layout shift)
Qualquer elemento que mude de tamanho ou posição após o carregamento inicial pode aumentar o CLS. As causas mais frequentes:
Imagens e vídeos sem dimensões
Se width e height (ou aspect-ratio) não forem definidos, o navegador não reserva espaço antes da imagem carregar. Quando a imagem aparece, o layout é recalculado e o conteúdo abaixo “pula”. O mesmo vale para vídeos e iframes de mídia.
Fontes que causam FOIT ou FOUT
FOIT (Flash of Invisible Text) e FOUT (Flash of Unstyled Text) acontecem quando a fonte customizada carrega depois do texto já exibido com fallback. A troca de fonte altera tamanho de linhas e parágrafos e gera deslocamento. Fontes com font-display: swap sem fallback métrico parecido costumam piorar o CLS.
Anúncios, embeds e iframes inseridos dinamicamente
Banners e widgets que são injetados no meio do conteúdo sem espaço reservado ocupam lugar só depois de carregar e empurram o restante da página. Quanto mais acima na dobra (above-the-fold), maior o impacto no CLS.
Conteúdo que carrega depois do primeiro paint
Texto, imagens ou blocos inseridos por JavaScript acima da dobra depois que a página já foi pintada fazem o layout “pular”. Exemplos: conteúdo trazido por API, comentários, recomendações e elementos que dependem de cookie ou de decisão de A/B test.
Elementos que mudam de tamanho com interação ou tempo
Componentes que expandem/retraem (accordions, modais, cookies) ou que recebem conteúdo dinâmico podem gerar shift se o espaço não for reservado ou se a animação não for feita de forma a não contar para CLS (por exemplo, com content-visibility ou inserção em área já reservada).
Como reduzir layout shift (melhorar o CLS)
Reservar espaço para tudo que vai aparecer e evitar trocas visuais bruscas reduz o CLS.
Definir width e height (ou aspect-ratio) em imagens e vídeos
No HTML, use os atributos width e height em <img> e em <video> (e, se possível, dimensões ou aspect-ratio em iframes). O navegador reserva o espaço antes do recurso carregar e o layout não pula. Em CSS, pode-se usar aspect-ratio para manter proporção em layouts responsivos. O artigo sobre compressão de imagens para SEO reforça a importância de dimensões para performance e CLS; o compressor de imagens do Senior SEO ajuda a otimizar o tamanho dos arquivos.
Reservar espaço para anúncios e iframes
Deixe no layout um bloco com altura (ou aspect-ratio) mínima onde o anúncio ou iframe será inserido. Assim o espaço já existe no primeiro paint e a inserção não desloca o conteúdo. Se o tamanho do anúncio variar, use o maior tamanho esperado ou um placeholder que não mude drasticamente.
Evitar inserir conteúdo acima da dobra depois do carregamento
Sempre que possível, inclua o conteúdo principal no HTML inicial em vez de injetá-lo depois com JavaScript. Se precisar carregar dinamicamente (API, A/B test), reserve o espaço com um skeleton ou altura mínima para não gerar shift.
Controle de fontes: font-display e fallback
Use font-display: optional quando fizer sentido (a fonte só aparece se carregar rápido) ou swap com um fallback cujas métricas sejam próximas da fonte customizada (por exemplo, com size-adjust) para reduzir o salto no troca. Isso diminui FOUT e o impacto no CLS.
Animações que não geram layout shift
Animações que alteram apenas transform ou opacity não geram layout shift, pois não mudam o layout. Evite animar height, margin ou top/left em elementos que já estão no fluxo se isso deslocar outros conteúdos de forma inesperada.
Como medir o CLS
Ferramentas que exibem CLS:
- Page Speed (Senior SEO): usa a API do PageSpeed Insights e mostra CLS, LCP e INP por URL, com sugestões. Gratuito.
- PageSpeed Insights (pagespeed.web.dev): analisa a URL em mobile e desktop e retorna Core Web Vitals, incluindo CLS. Gratuito.
- Google Search Console: relatório “Experiência na página” / “Core Web Vitals” com dados de usuários reais (CrUX). Mostra quantas URLs estão “Bem avaliadas” ou com problemas em CLS.
- Chrome DevTools → Performance: grave uma sessão e observe “Experience” / “Layout Shifts”; útil para ver em que momento do carregamento os shifts ocorrem.
Dados de campo (Search Console) refletem a experiência real; laboratório (PageSpeed, DevTools) ajuda a reproduzir e corrigir antes de publicar.
Checklist para reduzir layout shift
- Definir width e height (ou aspect-ratio) em todas as imagens e vídeos.
- Reservar espaço para anúncios, embeds e iframes antes da inserção.
- Evitar injetar conteúdo acima da dobra após o primeiro paint; se necessário, usar placeholder com altura definida.
- Usar font-display: optional ou swap com fallback de métricas parecidas para reduzir salto de fonte.
- Medir CLS com Page Speed ou PageSpeed Insights e priorizar páginas com mais tráfego ou CLS ruim.
- Conferir no Search Console se as melhorias refletem em mais URLs “Bem avaliadas” em Core Web Vitals.
Combine com a análise de SEO para uma visão técnica completa do site.
Erros comuns com CLS
- Deixar imagens e vídeos sem dimensões: é uma das causas mais frequentes de CLS. Sempre informe width/height ou aspect-ratio.
- Focar só em LCP e INP: as três métricas (LCP, INP, CLS) contam. Layout instável prejudica experiência e ranqueamento.
- Inserir anúncios ou widgets sem reservar espaço: mesmo que o script carregue depois, o layout deve ter o espaço reservado desde o HTML para não deslocar o conteúdo.
- Trocar fonte sem fallback métrico: fontes com tamanhos de linha muito diferentes do fallback geram shift quando a customizada carrega. Use fallback ajustado ou optional.
Perguntas frequentes sobre CLS
O que é um bom valor de CLS?
O Google considera CLS bom até 0,1; entre 0,1 e 0,25 precisa melhorar; acima de 0,25 é ruim. O objetivo é manter a maioria das páginas até 0,1.
CLS afeta o SEO?
Sim. CLS é um dos Core Web Vitals usados como sinal de experiência na página. Páginas com CLS alto podem ser avaliadas pior e perder posição. O relatório de Experiência no Search Console usa CLS para marcar URLs como “Bem avaliadas” ou com problemas.
Qual a diferença entre CLS e LCP/INP?
LCP mede o carregamento (quando o maior elemento visível aparece). INP mede a responsividade (tempo entre interação e próxima paint). CLS mede a estabilidade visual (quanto os elementos se deslocam). Juntos, cobrem velocidade, interatividade e estabilidade. Veja o artigo sobre LCP e o artigo sobre INP para detalhes de cada métrica.
Layout shift conta para conteúdo que aparece em área vazia?
O CLS considera apenas deslocamentos que afetam conteúdo já visível no frame anterior. Elementos que aparecem em área que estava vazia (por exemplo, no final da página) e não empurram nada que já estava na tela não entram no cálculo. O problema é quando o novo conteúdo “empurra” o que estava acima ou ao lado.
Conclusão
CLS (Cumulative Layout Shift) mede a estabilidade visual da página: a soma dos deslocamentos inesperados de elementos entre frames. Reduzir layout shift significa reservar espaço para imagens, vídeos, anúncios e iframes (width/height ou aspect-ratio), controlar o carregamento de fontes (font-display e fallback), evitar inserir conteúdo acima da dobra depois do primeiro paint e usar animações que não alterem layout. Valores até 0,1 são bons; acima de 0,25, ruins. CLS é um dos três Core Web Vitals e influencia experiência e ranqueamento. Meça com Page Speed, PageSpeed Insights e Search Console e priorize páginas com CLS alto ou muito tráfego. Manter LCP, INP e CLS no verde consolida a base de experiência do site.
Quer ver CLS, LCP e INP do seu site? Use a ferramenta Page Speed do Senior SEO e a análise de SEO para uma visão técnica completa.