CLS: definição, cálculo e correção
Atualizado em February 22, 2026
Definição rápida
O CLS (Cumulative Layout Shift) é uma métrica Core Web Vitals que mede a instabilidade visual de uma página web durante o seu carregamento, ou seja, a soma dos deslocamentos de layout inesperados. O CLS é considerado bom se for inferior a 0,1, a melhorar entre 0,1 e 0,25, e mau acima de 0,25. O CLS quantifica a experiência frustrante onde os elementos de uma página 'saltam' durante o carregamento, provocando cliques acidentais.
Como funciona
O CLS (Cumulative Layout Shift) mede o quanto os elementos visíveis de uma página se deslocam de forma inesperada durante o seu carregamento. Cada deslocamento de layout calcula-se multiplicando a fração de superfície impactada (proporção da zona visível afetada) pela fração de distância percorrida (distância relativa do deslocamento). A pontuação CLS é a soma de todos esses deslocamentos ocorridos em janelas de sessão de 5 segundos. Os limiares oficiais do Google: bom (verde) se inferior a 0,1, a melhorar (laranja) entre 0,1 e 0,25, mau (vermelho) acima de 0,25. Exemplo concreto: um utilizador lê um artigo e prime 'Adicionar ao carrinho' mas no momento do clique um anúncio insere-se acima do botão — o seu clique aterra no anúncio. É um layout shift típico. As causas comuns incluem imagens e vídeos sem dimensões explícitas (width/height), anúncios, embeds ou iframes carregados dinamicamente, fontes de carateres que provocam um FOUT (Flash of Unstyled Text) e elementos injetados por JavaScript acima do conteúdo existente.
Porque é importante
Uma pontuação CLS elevada gera uma experiência de utilizador frustrante: cliques acidentais, perda da posição de leitura, sensação de instabilidade da página. Esta frustração traduz-se diretamente em taxas de rejeição mais elevadas e taxas de conversão mais baixas. O Google incluiu o CLS nas Core Web Vitals porque é um dos fatores de abandono mais frequentemente citados pelos utilizadores. Um bom CLS contribui também para a perceção de qualidade e profissionalismo do site.
Como melhorar ou utilizar
Para corrigir o CLS: defina sempre atributos `width` e `height` explícitos nas suas imagens e vídeos para que o browser reserve o espaço antes do carregamento. Use `min-height` para zonas de publicidade e embeds. Pré-carregue as suas fontes e use `font-display: swap` para evitar deslocamentos tipográficos. Evite inserir conteúdo acima do conteúdo visível existente via JavaScript. Audite os seus layout shifts com o separador Performance do DevTools do Chrome ou com o PageSpeed Insights.
Com o Sublim
A Sublim permite-lhe correlacionar as suas pontuações CLS por página com os seus dados de conversão e taxa de rejeição em tempo real. Assim, prioriza a correção das páginas com elevado tráfego onde um CLS alto custa realmente clientes, em vez de trabalhar às cegas. Todos estes dados são recolhidos sem cookie em conformidade total com o RGPD europeu.
Perguntas frequentes
Como identificar os elementos responsáveis por um mau CLS?
A ferramenta mais precisa é o separador Performance do DevTools do Chrome: ative a gravação no carregamento da página e procure os eventos 'Layout Shift'. PageSpeed Insights e a extensão Web Vitals Debugger também permitem identificar visualmente os elementos que se mexem. A propriedade CSS `content-visibility` também pode ajudar a isolar os problemas.
As animações CSS afetam o CLS?
Não necessariamente. O Google exclui do cálculo CLS os deslocamentos causados por interações do utilizador (cliques, teclas) que ocorram nos 500 ms seguintes à interação. As animações CSS que usam `transform` em vez de propriedades que modificam o layout (top, left, margin) também não afetam o CLS, pois não provocam recálculo de layout.
Um bom CLS é suficiente para se posicionar bem no Google?
O CLS é uma das três métricas Core Web Vitals (com LCP e INP) que constituem um sinal de experiência de página. Um bom CLS por si só não chega: as três métricas devem estar no verde para que o sinal seja positivo. Além disso, o conteúdo e a autoridade do domínio continuam preponderantes no ranking global.
Termos relacionados
Os Core Web Vitals são um conjunto de três métricas definidas pelo Goo…
O LCP (Largest Contentful Paint) é uma métrica Core Web Vitals que med…
O INP (Interaction to Next Paint) é a métrica Core Web Vitals que mede…
A taxa de rejeição é a percentagem de sessões durante as quais um util…