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

O que é o Cumulative Layout Shift (CLS)?

O Cumulative Layout Shift (CLS) representa a parte da "estabilidade visual" dos 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. Calcula uma pontuação com base em quanto da página se move inesperadamente e até onde se move. Estas mudanças de conteúdo são muito irritantes, fazendo com que perca o seu lugar num artigo que começou a ler ou, pior ainda, fazendo com que 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, precisa de melhorias. Qualquer pontuação de CLS acima de 0.25 é considerada fraca. Para passar nos Core Web Vitals no Cumulative Layout Shift, pelo menos 75% dos seus visitantes precisam ter uma pontuação de CLS "boa".

A importância do CLS no desempenho web e na user experience

O Cumulative Layout Shift (CLS) está ligado tanto ao desempenho web quanto à user experience porque tem um impacto direto em quão estável e previsível uma página web parece durante o carregamento. Eis porque é importante:

• UX, envolvimento e perceção da marca: Mudanças de layout inesperadas interrompem o fluxo do utilizador, tornando mais difícil encontrar informações, clicar em botões e interagir com a página como pretendido. Esta frustração pode levar a experiências fracas onde os utilizadores abandonam o website por completo. A user experience de um website reflete-se na marca por trás dele. Mudanças frequentes de layout podem dar a impressão de um website mal desenhado ou mantido, interromper o envolvimento do utilizador e levar à diminuição da interação e, potencialmente, a taxas de rejeição mais altas.
• Acessibilidade: As mudanças de layout podem ser particularmente perturbadoras para utilizadores com deficiências que dependem de tecnologias de assistência ou leitores de ecrã. Um layout estável garante que todos possam navegar e interagir com o website de forma eficaz.
• SEO e Ranking de Pesquisa: Os Core Web Vitals são um fator de ranking pequeno, mas significativo, no Google. O Google, juntamente com outros motores de busca, dá prioridade a websites que oferecem uma boa user experience. O CLS é uma das métricas dos Core Web Vitals que o Google considera ao classificar websites. Otimizar para o CLS pode dar ao seu website uma vantagem competitiva nos resultados de pesquisa.

Como é medido o CLS?

O CLS de uma página pode ser medido com a Layout Instability API. O seguinte é 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 utilizando uma fórmula simples, mas elegante:

CLS = sum(fração-de-impacto * fração-de-distância)

A fração de impacto mede quanto do conteúdo visível da página foi deslocado. A fração de distância mede até onde o conteúdo se deslocou. Se, por exemplo, 50% da página (quanto) foi deslocada em 25% (até onde) da janela de visualização 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 más, apenas aquelas que não espera. Quando clica num link "carregar mais itens", por exemplo, espera que apareçam mais itens na página e que o conteúdo da página mude de lugar.

É por isso que apenas mudanças de layout inesperadas causarão uma contribuição para o CLS. Por exemplo, se um utilizador clicar num botão e em resposta for adicionado novo conteúdo à página (por exemplo, um menu suspenso), a mudança de layout será excluída do CLS. Para sermos precisos: as mudanças de layout que ocorrem até 500 milissegundos após a interação do utilizador 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 má pontuação de CLS. Por exemplo, uma página que implementa o scroll infinito teria recebido o impacto do conteúdo recém-adicionado na pontuação total de CLS a cada novo scroll. É 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 tornar-se-á a pontuação final de CLS.

Se, por exemplo, durante a primeira sessão a pontuação de CLS for 0.095, depois na sessão seguinte 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 focada no utilizador para medir a estabilidade visual. O Cumulative Layout Shift (CLS) faz parte dos Core Web Vitals juntamente com o Largest Contentful Paint (LCP) e o Interaction to Next Paint (INP). Juntas, estas três métricas medem o desempenho de carregamento, a interatividade e a estabilidade visual.

Causas comuns de CLS

A origem de todas as mudanças de layout é basicamente a mesma. Num dado momento, um elemento que foi colocado acima de outro elemento ocupou mais ou menos espaço do que antes. Isto deve-se tipicamente a uma ou mais destas causas:

Imagens, vídeos e iframes sem dimensões

Ficheiros de media sem tamanho definido são 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 ver o guia completo que cobre imagens, vídeos, iframes sem tamanho, a armadilha de CSS do width: auto, direção de arte, incompatibilidades de imagens responsivas, lazy loading e imagens placeholder, veja Como Imagens e Media Causam Layout Shift.

Trocas de web fonts

As web fonts são descarregadas da internet enquanto a página é renderizada com uma fallback font. Quando a web font chega, a diferença de tamanho entre a fallback font 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 vasta maioria da web está vulnerável ao CLS causado pela troca de fontes.

A correção envolve duas técnicas: fazer a fallback font corresponder à web font utilizando substituições métricas de @font-face (size-adjust, ascent-override) e acelerando a entrega da fonte fazendo self-hosting e o preload de fontes críticas. Veja o guia de fix-and-identify para consultar exemplos de código.

Animações e transições CSS

As animações CSS que utilizam propriedades que desencadeiam alterações de layout como top, left, width e height forçam o browser a recalcular o layout em cada frame, produzindo CLS. De acordo com o Web Almanac, 39% das páginas mobile têm animações não compostas a contribuir para o CLS. A solução é utilizar transform e opacity, que correm no compositor da GPU e nunca desencadeiam o recálculo do layout. Para o guia completo, consulte a mudança de layout causada por transições CSS.

Anúncios, embeds e conteúdo injetado dinamicamente

Os anúncios carregam tarde e empurram o conteúdo para baixo. Banners de consentimento de cookies aparecem e deslocam a página. Pedidos AJAX injetam novo conteúdo sem reservar espaço. Todos estes representam o mesmo problema: algo aparece na página que o browser desconhecia no momento da renderização. A solução é sempre reservar espaço com o min-height e isolar o container com o estilo contain: layout. Para embeds de terceiros, como YouTube e Google Maps, o padrão facade elimina totalmente o CLS.

Mudanças de layout desencadeadas pelo scroll

Esta é a causa do CLS que o Lighthouse nunca detetará. Cabeçalhos que se ocultam no scroll, efeitos de parallax e barras de navegação que encolhem muitas vezes animam as propriedades top ou height, e o scroll não é uma interação excludente na especificação da Layout Instability. Cada mudança de layout desencadeada pelo scroll conta para a sua pontuação de CLS. A correção: utilize transform: translateY() para qualquer animação desencadeada por scroll. Veja como animações acionadas por scroll causam CLS para consultar o guia passo-a-passo completo.

Encontrar e corrigir problemas de CLS

Diagnosticar o CLS segue a mesma metodologia orientada a dados de campo dos outros Core Web Vitals. Comece com a Google Search Console ou com uma ferramenta de RUM como a CoreDash para confirmar quais as páginas afetadas e que elementos se estão a mover. Em seguida, utilize as 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 completo passo a passo, guias de ferramentas, correções de código para cada causa e uma checklist de soluções rápidas, consulte o nosso guia dedicado: Encontrar e Corrigir Problemas de Cumulative Layout Shift (CLS).

Caso de estudo: Rakuten 24 e o impacto do CLS no negócio

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

• Aumento de 53.37% na receita por visitante para os utilizadores que registaram um CLS baixo em comparação com aqueles com CLS alto.
• Aumento de 33.13% na taxa de conversão para a mesma amostra com o CLS melhorado.
• Diminuição de 15.20% na taxa de rejeição entre visitantes com experiências de página estáveis.

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

O que mostram os dados reais de CLS

Os dados do CoreDash revelam que o CLS é o Core Web Vital com melhor desempenho, com 92.8% dos carregamentos de página em corewebvitals.io a atingirem uma pontuação "boa" e praticamente nenhuma diferença entre dispositivos móveis e desktop. Ambos, desktop (92.8% bons) e mobile (92.7% bons) alcançam pontuações de CLS quase perfeitas, com um percentil 75 (p75) de 0 em ambos os tipos de dispositivos.

Isto contrasta com métricas como o LCP e o INP, em que o desempenho móvel é significativamente pior do que o de desktop. O CLS é, excecionalmente, melhor no mobile do que no desktop em toda a web, sendo exatamente o oposto de qualquer outro Core Web Vital.

Globalmente, de acordo com o Web Almanac de 2025, a imagem é menos otimista:

• 72% dos websites alcançam, na generalidade, boas pontuações de CLS, enquanto 11% têm um CLS fraco.
• 62% das páginas mobile possuem pelo menos uma imagem não dimensionada (uma queda em relação aos 66% em 2024, mas continua a ser um enorme contribuidor para o CLS).
• 39% das páginas mobile têm animações não compostas a contribuir para o CLS.
• Apenas 11% das páginas fazem o preload de web fonts, indicando que a grande maioria dos sites está vulnerável a mudanças de layout resultantes da troca de fontes.

O CLS demonstrou uma melhoria contínua a nível global, de ano para ano, mas os dados revelam que as imagens não dimensionadas e as animações não compostas continuam a ser as duas causas mais frequentes. Lidar apenas com estes dois aspetos eliminaria as mudanças de layout numa enorme parcela da web.

Guias relacionados

Esta página central cobre o Cumulative Layout Shift a um alto nível. Para aceder a orientações detalhadas e práticas sobre como encontrar e corrigir problemas de CLS, explore estes guias dedicados:

• Encontrar e Corrigir Problemas de CLS: O guia de diagnóstico completo passo a passo com demonstração de ferramentas, correções de código para todas as causas e uma checklist de soluções rápidas.
• Como Imagens e Media Causam Layout Shift: O guia definitivo para o CLS resultante de imagens, vídeos e iframes não dimensionados, direção de arte, imagens responsivas, lazy loading e placeholders.
• Corrigir a mudança de layout causada por imagens auto-dimensionadas: Um guia passo a passo completo sobre como adicionar dimensões adequadas a imagens e containers responsivos.
• Corrigir a mudança de layout causada por transições CSS: Identifique e substitua as animações CSS que acionam o layout por alternativas compostas.
• Animações acionadas pelo scroll e o CLS: A causa do CLS que o Lighthouse não consegue capturar e como corrigi-la.
• Fazer o self-host de Google Fonts: Reduza o CLS de carregamento de fontes ao fazer self-hosting das mesmas com o font-display apropriado e estratégias de preload.
• Garantir que o texto permaneça visível durante o carregamento de web fonts: Configure as substituições métricas do font-display e das fontes para eliminar as mudanças de layout da troca de fontes.
• Construir um widget de chat com os Core Web Vitals perfeitos: Um caso de estudo sobre a implementação de widgets de terceiros sem introduzir regressões de CLS, INP ou LCP.

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