O que é Cumulative Layout Shift (CLS) e como corrigi-lo

O que é Cumulative Layout Shift (CLS)?

O Cumulative Layout Shift (CLS) representa a parte de "estabilidade visual" do Core Web Vitals. O Cumulative Layout Shift (CLS) mede os movimentos da página à medida que o conteúdo é renderizado ou novo conteúdo é mostrado na página. Ele calcula uma pontuação baseada em quanto da página está se movendo inesperadamente e a que distância se move. Essas mudanças de conteúdo são muito irritantes, fazendo com que você perca o seu lugar em um artigo que começou a ler ou, pior ainda, fazendo com que você clique no botão errado!

O que é uma boa pontuação de Cumulative Layout Shift (CLS)?

Uma boa pontuação de CLS é qualquer valor entre 0 e 0.1. Se a sua pontuação de CLS estiver entre 0.1 e 0.25, ela precisa de melhorias. Qualquer pontuação de CLS acima de 0.25 é considerada ruim. Para ser aprovado no Core Web Vitals para o Cumulative Layout Shift, pelo menos 75% dos seus visitantes precisam ter uma pontuação de CLS "boa".

Importância do CLS na performance web e na user experience

O Cumulative Layout Shift (CLS) está ligado tanto à performance web quanto à user experience porque impacta diretamente o quão estável e previsível uma página da web parece enquanto carrega. Eis por que isso importa:

• UX, engajamento e percepção da marca: Mudanças de layout inesperadas interrompem o fluxo do usuário, tornando mais difícil encontrar informações, clicar em botões e interagir com a página como pretendido. Essa frustração pode levar a experiências ruins em que os usuários abandonam o site completamente. A user experience de um site reflete na marca por trás dele. Mudanças frequentes de layout podem dar a impressão de um site mal projetado ou mantido, prejudicar o engajamento do usuário e levar à diminuição da interação e, possivelmente, a taxas de rejeição mais altas.
• Acessibilidade: Mudanças de layout podem ser particularmente prejudiciais para usuários com deficiências que dependem de tecnologias assistivas ou leitores de tela. Um layout estável garante que todos possam navegar e interagir com o site de forma eficaz.
• SEO e Ranking de Pesquisa: Os Core Web Vitals são um fator de ranqueamento pequeno, mas significativo, no Google. O Google, junto com outros motores de busca, prioriza sites que oferecem uma boa user experience. O CLS é uma das métricas do Core Web Vitals que o Google considera ao classificar sites. Otimizar para o CLS pode dar ao seu site uma vantagem competitiva nos resultados de pesquisa.

Como o CLS é medido?

O CLS de uma página pode ser medido com a Layout Instability API. A seguir está um uso simples desta API:

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('Layout shift:', entry);
  }
}).observe({type: 'layout-shift', buffered: true});

Calculando o CLS

O CLS é calculado usando uma fórmula simples, mas elegante:

CLS = sum(impact-fraction * distance-fraction)

A fração de impacto mede quanto do conteúdo visível da página foi deslocado. A fração de distância mede a que distância o conteúdo foi deslocado. Se, por exemplo, 50% da página (quanto) foi deslocado em 25% (a que distância) do viewport da página, a pontuação de CLS = 0.50 * 0.25 = 0.125.

Mudanças de layout esperadas vs. inesperadas

Nem todas as mudanças de layout são ruins, apenas aquelas que você não espera. Quando você clica em um link "carregar mais itens", por exemplo, você esperaria que mais itens aparecessem na página e que o conteúdo da página mudasse de lugar.

É por isso que apenas mudanças de layout inesperadas causarão uma contribuição para o CLS. Por exemplo, se um usuário clica em um botão e, em resposta, um novo conteúdo é adicionado à página (por exemplo, um menu suspenso), a mudança de layout será excluída do CLS. Para ser mais preciso: mudanças de layout que ocorrem dentro de 500 milissegundos após a entrada do usuário serão excluídas dos cálculos.

Sessões de mudança de layout

Quando o CLS foi introduzido pela primeira vez, alguns sites foram punidos injustamente com uma pontuação de CLS ruim. Por exemplo, uma página que implementa rolagem infinita teria o impacto do conteúdo recém-adicionado somado à pontuação total de CLS a cada nova rolagem. É por isso que o CLS agora é calculado em sessões. Cada sessão tem uma duração máxima de 5 segundos e um intervalo de 1 segundo entre as mudanças de layout. A sessão com a maior pontuação de CLS se tornará a pontuação final de CLS.

Se, por exemplo, durante a primeira sessão a pontuação de CLS for 0.095, em seguida, na próxima sessão, o CLS for 0.15, e na última sessão a pontuação de CLS for 0, a pontuação final de CLS será a mais alta das três: 0.15.

O CLS e os Core Web Vitals

O Cumulative Layout Shift (CLS) é uma métrica importante e centrada no usuário para medir a estabilidade visual. O Cumulative Layout Shift (CLS) faz parte dos Core Web Vitals junto com o Largest Contentful Paint (LCP) e o Interaction to Next Paint (INP). Juntas, essas três métricas medem a performance de carregamento, a interatividade e a estabilidade visual.

Causas comuns de CLS

A origem de todas as mudanças de layout é basicamente a mesma. Em algum momento, um elemento que estava posicionado acima de outro elemento ocupou mais ou menos espaço do que antes. Isso geralmente se deve a uma ou mais destas causas:

Imagens, vídeos e iframes sem dimensões

Mídia sem dimensões definidas é a causa número um de CLS na web. De acordo com o Web Almanac de 2025, 62% das páginas mobile têm pelo menos uma imagem sem dimensões explícitas. Para o guia completo abordando imagens, vídeos e iframes sem tamanho, a armadilha do CSS width: auto, direção de arte, incompatibilidades de imagens responsivas, lazy loading e imagens de placeholder, veja Como Imagens e Mídia Causam o Layout Shift.

Trocas de web fonts

Web fonts são baixadas da internet enquanto a página é renderizada com uma fallback font. Quando a web font chega, a diferença de tamanho entre a fallback e a fonte final causa uma mudança de layout. Apenas 11% das páginas fazem preload de web fonts, o que significa que a grande maioria da web está vulnerável ao CLS por troca de fonte (font-swap).

A correção envolve duas técnicas: fazer com que a fallback font corresponda à web font usando substituições de métricas do @font-face (size-adjust, ascent-override), e acelerar a entrega da fonte por meio de self-hosting e preload de fontes críticas. Veja o guia de identificar e corrigir para exemplos de código.

Animações e transições CSS

As animações CSS que usam propriedades que acionam o layout (layout-triggering properties), como top, left, width e height, fazem com que o navegador recalcule o layout em cada quadro, produzindo CLS. De acordo com o Web Almanac, 39% das páginas mobile têm animações não compostas (non-composited) contribuindo para o CLS. A correção é usar transform e opacity em vez disso, que rodam no compositor da GPU e nunca acionam o layout. Para o passo a passo completo, veja mudança de layout causada por transições CSS.

Anúncios, embeds e conteúdo injetado dinamicamente

Anúncios carregam tarde e empurram o conteúdo para baixo. Banners de consentimento de cookies aparecem e deslocam a página. Requisições AJAX injetam novo conteúdo sem reservar espaço. Todos esses são o mesmo problema: algo aparece na página que o navegador não conhecia no momento da renderização. A solução é sempre reservar espaço com min-height e isolar o contêiner com contain: layout style. Para embeds de terceiros como YouTube e Google Maps, o padrão facade elimina o CLS totalmente.

Mudanças de layout acionadas por rolagem (scroll)

Esta é a causa de CLS que o Lighthouse nunca detectará. Cabeçalhos que se ocultam na rolagem, efeitos parallax e barras de navegação que encolhem costumam animar top ou height, e a rolagem não é uma entrada excludente na especificação da Layout Instability. Cada mudança de layout acionada pela rolagem conta para a sua pontuação de CLS. A correção: use transform: translateY() para qualquer animação acionada por rolagem. Veja como animações acionadas por rolagem causam CLS para o passo a passo completo.

Encontrando e corrigindo problemas de CLS

O diagnóstico do CLS segue a mesma metodologia que prioriza os dados de campo (field data) como os outros Core Web Vitals. Comece com o Google Search Console ou uma ferramenta de RUM como o CoreDash para confirmar quais páginas foram afetadas e quais elementos estão se deslocando. Em seguida, use o Chrome DevTools ou a extensão Core Web Vitals Visualizer para reproduzir o problema localmente e identificar a causa raiz.

Para o processo de diagnóstico passo a passo completo, tutoriais de ferramentas, correções de código para cada causa e uma checklist de correção rápida, consulte o nosso guia dedicado: Encontrar e Corrigir Problemas de Cumulative Layout Shift (CLS).

Estudo de caso: Rakuten 24 e o impacto do CLS nos negócios

A Rakuten 24, uma grande plataforma japonesa de e-commerce, realizou um estudo detalhado sobre o impacto do Cumulative Layout Shift em suas métricas de negócios. Ao reduzir o CLS em suas páginas de produtos e categorias, a Rakuten 24 alcançou resultados notáveis:

• Aumento de 53,37% na receita por visitante para usuários que experimentaram um CLS baixo em comparação com aqueles com CLS alto.
• Aumento de 33,13% na taxa de conversão para a mesma coorte de CLS melhorado.
• Queda de 15,20% na taxa de rejeição entre os visitantes com experiências de página estáveis.

Esses números demonstram que o CLS não é meramente uma métrica técnica. A instabilidade visual custa diretamente receita aos negócios ao frustrar os usuários durante sua jornada de navegação e compra. Quando os elementos mudam inesperadamente, os usuários perdem a confiança, clicam errado e abandonam as suas sessões. O estudo da Rakuten 24 confirma que investir na otimização do CLS tem um retorno sobre o investimento mensurável, especialmente para sites de e-commerce onde cada interação conta.

O que os dados reais de CLS mostram

Os dados do CoreDash mostram que o CLS é o Core Web Vitals com melhor performance, com 92,8% dos carregamentos de página no corewebvitals.io alcançando uma pontuação "boa" e praticamente nenhuma diferença entre dispositivos mobile e desktop. Tanto o desktop (92,8% bom) quanto o mobile (92,7% bom) alcançam pontuações de CLS quase perfeitas, com um p75 de 0 em ambos os tipos de dispositivos.

Isso contrasta com métricas como o LCP e o INP, onde a performance no mobile é significativamente pior do que no desktop. O CLS é excepcionalmente melhor no mobile do que no desktop em toda a web de forma geral, o que é o inverso de qualquer outro Core Web Vitals.

Globalmente, de acordo com o Web Almanac de 2025, o cenário é menos otimista:

• 72% dos sites alcançam boas pontuações de CLS no geral, enquanto 11% têm um CLS ruim.
• 62% das páginas mobile têm pelo menos uma imagem sem dimensões (uma queda em relação aos 66% em 2024, mas ainda um grande contribuinte para o CLS).
• 39% das páginas mobile têm animações não compostas contribuindo para o CLS.
• Apenas 11% das páginas fazem preload de web fonts, o que significa que a grande maioria dos sites está vulnerável a mudanças de layout por troca de fonte.

O CLS demonstrou uma melhoria global constante ano após ano, mas os dados revelam que imagens sem dimensões e animações não compostas continuam sendo as duas causas mais comuns. Resolver apenas esses dois problemas eliminaria as mudanças de layout para uma grande parte da web.

Guias relacionados

Esta página central (hub) aborda o Cumulative Layout Shift em alto nível. Para uma orientação detalhada e prática sobre como encontrar e corrigir problemas de CLS, explore estes guias dedicados:

• Encontrar e Corrigir Problemas de CLS: O guia de diagnóstico passo a passo completo, com tutoriais de ferramentas, correções de código para todas as causas e uma checklist de correção rápida.
• Como Imagens e Mídia Causam o Layout Shift: O guia definitivo sobre CLS causado por imagens sem tamanho, vídeos, iframes, direção de arte, imagens responsivas, lazy loading e placeholders.
• Corrigir mudança de layout causada por imagens de auto-dimensionamento: Um passo a passo completo para adicionar as dimensões adequadas a imagens e contêineres responsivos.
• Corrigir mudança de layout causada por transições CSS: Identifique e substitua as animações CSS que acionam o layout por alternativas compostas (composited).
• Animações acionadas por rolagem e CLS: A causa de CLS que o Lighthouse não consegue detectar e como corrigi-la.
• Hospedar localmente (self-host) o Google Fonts: Reduza o CLS de carregamento de fontes ao fazer self-hosting com estratégias adequadas de font-display e preload.
• Garanta que o texto permaneça visível durante o carregamento de web font: Configure font-display e as substituições de métricas de fonte para eliminar as mudanças de layout de font-swap.
• Crie um widget de chat com Core Web Vitals perfeitos: Um estudo de caso sobre a implementação de widgets de terceiros sem introduzir regressões de CLS, INP ou LCP.

Para uma visão geral completa de todas as métricas dos Core Web Vitals e estratégias de otimização, visite a visão geral dos Core Web Vitals ou use a Checklist Definitiva de Core Web Vitals para auditar o seu site.