Elyson Gums
Atualizado em 13/07/2026
14 min de leitura
O Google muda mais rápido do que você consegue acompanhar? Não se preocupe, isso é comum pra muita gente.
Se inscreva na nossa Newsletter e fique por dentro das novidades de SEO.
Inscreva-se
CLS, Cumulative Layout Shift ou Mudança Cumulativa de Layout, em português, é uma métrica para quantificar a estabilidade visual de uma página. Quanto menos os elementos se movem de forma inesperada, menor é o CLS – e é disso que você precisa para gerar uma boa experiência de navegação.
Em SEO, o CLS é uma métrica das Core Web Vitals do Google, que medem a boa experiência de página. Mais recentemente, também passou a fazer parte da lista de otimizações para agentes de IA, já que a instabilidade nos elementos pode atrapalhar a interação autônoma com as páginas.
Otimizar o CLS requer uma série de ações técnicas, como reservar espaço para carregamento de conteúdos dinâmicos e especificar corretamente o tamanho de elementos. Este é um guia para auxiliar profissionais de SEO e marketing a conduzirem os processos de otimização junto dos desenvolvedores do time.
Uma mudança de layout ocorre quando um elemento visível altera sua posição ou tamanho inesperadamente na tela, como no exemplo a seguir.
O Google agrupa essas mudanças em janelas de sessão, que são períodos de até 5 segundos de atividade contínua, separados por 1 segundo de inatividade. Então, o CLS identifica a janela de sessão com a maior soma de mudanças, e esse valor é a pontuação final.
A métrica de CLS considera o maior pico de alterações e analisa apenas o que acontece na porção visível da tela.
Esses picos podem ocorrer por diversas razões. Falaremos mais delas a seguir, mas as principais são elementos carregando de forma independente. Por exemplo, imagens e vídeos sem dimensões definidas ou fontes renderizadas em tamanho diferente do fallback (a fonte “de reserva”, carregada caso haja um problema com a principal). Quando elas terminam de carregar, acabam deslocando elementos para baixo, o que é um gatilho para o CLS.
Mudanças causadas em até 500 ms de uma interação do visitante não contam para o CLS.
Nem toda mudança de layout é penalizada, apenas as que o visitante não espera, e que resultam na sensação de que a página está com algum problema.
Exemplos:
Inserir elementos interativos, animações ou conteúdos dinâmicos não é ruim. O problema está em não planejar a página tecnicamente para essas mudanças.
Reduzir as mudanças inesperadas de layout traz vantagens em diferentes áreas:
Se levarmos tudo isso em conta, o CLS está indiretamente relacionado a aumentos de tráfego e taxas de conversão.
Um layout que muda muito é uma das experiências mais frustrantes de navegação. Fica difícil ler a tela, os botões mudam de lugar, os links somem… Tudo isso faz com que a pessoa fique muito mais propensa a deixar o site sem interagir. E, quando ela faz isso, dificilmente volta.
UX se relaciona com SEO pois a boa experiência é um dos critérios usados pelo Google para definir quem aparece na primeira página.
E, mais do que isso: de pouco adianta investir em conquistar o clique, se você entregar uma experiência de página ruim. Nesses casos, cerca de 88% dos visitantes deixam o site e não retorna.
O CLS é uma das três métricas das Core Web Vitals do Google, que são os indicadores de performance monitorados pelo buscador.
Sites com desempenho ruim podem ser preteridos nos resultados orgânicos. Isto significa que, se houver dois sites otimizados para uma palavra-chave, ambos com bons conteúdos, tem vantagem o mais rápido, que entrega melhor experiência, e com quem as pessoas interagem mais positivamente.
Portanto, investir no CLS pode ser um diferencial estratégico para o seu site.
Agentes de IA fazem leituras da tela para entender onde estão os elementos com os quais precisam interagir para realizar uma tarefa. Logo, se os elementos mudam de lugar, o robô precisa reavaliar o estado da tela para encontrar o que precisa.
O Google incluiu a otimização de CLS em sua documentação para criação de sites compatíveis com agentes de IA. A métrica também está presente na auditoria para agentes do Lighthouse.
O CLS é a soma de duas análises que descrevem o tamanho e a relevância de uma mudança inesperada de layout. A fórmula é:
Fração de impacto × fração de distância = CLS
A fração de impacto mede o quanto a tela é afetada por uma mudança inesperada de layout. Ela considera a posição do elemento antes e depois dessa mudança.
Por exemplo, imagine um elemento que estava no topo da tela e foi empurrado 25% para baixo. Nesse caso, a fração de impacto será de 0.50, pois a mudança ocorreu em metade da página.
A fração de distância é o quanto o elemento se moveu. No caso de elementos que se movem na vertical e horizontal, a maior distância é considerada.
Seguindo o exemplo acima, 25% de deslocamento vira uma fração de distância de 0.25.
Ao somar as duas variáveis, temos:
0.05 × 0.25 = 0.125 de CLS
Esse cálculo é feito para cada mudança de layout. O maior pico define o CLS da página.
Seu objetivo é alcançar um resultado de 0.1 ou menos, tanto em desktop quanto em mobile.
A classificação do Google é a seguinte:
Há duas formas principais de medir: com dados reais (campo) ou simulando sessões (laboratório).
A forma mais simples de medir é com o Pagespeed Insights. Basta digitar a URL que você quer analisar e ver as métricas de Core Web Vitals, incluindo o CLS.
Se houver dados de visitantes do seu site, eles serão usados na pontuação. Se não houver amostragem o suficiente, serão dados de sessões simuladas.
Outras ferramentas que permitem ver o CLS incluem:
Sempre que possível, prefira testes com dados reais, como os que aparecem no Lighthouse. Auditorias com dados em laboratório analisam o site em condições controladas, que nem sempre refletem as conexões e dispositivos que os seus visitantes usam no dia a dia.
Depois da medição, é a hora de otimizar o CLS, se necessário. Esse é um desafio para a maioria dos profissionais de SEO, já que o tema é bastante técnico, com soluções igualmente específicas.
O primeiro passo é entender o que causa uma pontuação baixa.
As principais causas de CLS ruim envolvem a adição de conteúdo que altera o layout da página após o início da renderização. Mais especificamente:
Veja abaixo os detalhes de cada um.
Quando uma imagem não tem atributos de altura e largura (width e height), o navegador não consegue reservar espaço para o carregamento enquanto o arquivo está sendo baixado.
Assim, ele renderiza o que está em volta e empurra tudo para baixo assim que a imagem carrega.
Os anúncios no meio da página estão entre os principais vilões do CLS. As requisições para seu carregamento não ocorrem simultaneamente ao restante do conteúdo, já que são um elemento terceiro, que não é nativo do site. Eles carregam depois e empurram tudo para baixo.
Há três momentos principais em que os anúncios interferem no CLS:
É ainda pior se o anúncio aparece no topo da tela. Isto significa que estão ativamente visíveis e contando para uma pontuação baixa de CLS.
Os anúncios são os tipos mais comuns, mas qualquer conteúdo terceiro que compartilha dessas características causa o mesmo efeito. Snippets de redes sociais, vídeos do YouTube, Google Maps, entre outros também causam CLS, principalmente quando não tem dimensões declaradas, e quando o layout da página não é planejado tendo-os em mente.
Diferentemente dos elementos de terceiros, como os anúncios, o conteúdo injetado dinamicamente é nativo do site, mas carrega depois da renderização inicial.
É o caso de conteúdo escondido atrás de botões “leia mais”, atualizações ao vivo, widgets de chat, módulos de artigos recomendados, entre outros.
As Web Fonts são fontes carregadas diretamente no navegador. Elas oferecem maior personalização, pois permitem ir além das tipografias instaladas no computador ou celular do visitante.
Ela pode influenciar o CLS quando a página exibe uma fonte de reserva (fallback) e depois a substitui pela web font. Se o tamanho for diferente, pode causar mudança de layout.
Animações e transições são causas conhecidas de aumento de CLS, mas apenas quando são mal implementadas.
Mudar propriedades como top, left, right, bottom, width e height causam alterações de layout. Quando elas se alteram, o navegador precisa recalcular a posição dos demais elementos.
As otimizações são conduzidas por profissionais de desenvolvimento web, com direcionamento da equipe de SEO para melhorar aspectos do HTML, CSS e JS do site.
De modo geral, as ações seguem três princípios:
Veja abaixo as principais formas de resolver os problemas de CLS.
Ao adicionar imagens, especifique altura e largura no elemento <img> do HTML.
Por exemplo:
<img src=”grafico-seo width=”640” height=”360”>
Combine essa configuração com a propriedade CSS height:auto, para dimensionamento responsivo.
Essa regra também se aplica a imagens carregadas via lazy loading.
Se a página tem anúncios, conteúdo incorporado, widgets, banners, etc. que carregam depois da renderização inicial, use as propriedades CSS min-height ou aspect-ratio para deixar espaço reservado para eles.
Além disso, se possível, inclua esse conteúdo o mais baixo possível na página. Se ele estiver no topo, tem potencial de deslocar muitos elementos ao ser carregado.
Para anúncios, vale a mesma regra de usar min-height e min-width para determinar o espaço.
No caso do site ter blocos de anúncio cujo tamanho varia, há três estratégias principais:
Independentemente da escolha, gerencie com CSS, não JavaScript, pois o próprio carregamento do script pode ocasionar CLS.
Use a propriedade CSS transform para animar conteúdo sem ativar mudanças de layout:
Se o seu site usa fontes personalizadas, adicione as seguintes propriedades:
Além disso, escolha uma fonte de fallback em proporção e tamanho similar à web font.
Com o recurso bfcache, quando o visitante clicar nos botões de voltar/avançar do navegador, a página carregará da mesma forma que estava antes, sem a necessidade de renderizar tudo do início. Ou seja, não ocorrerá CLS.
Este vídeo, da equipe técnica do Google, explica como funciona.
CLS é uma métrica volátil. Mudanças técnicas e de design do site podem fazer um resultado que era bom piorar, como uma nova campanha de anúncios, atualizações no código que incorpora widgets, ou um novo template com imagens sem proporções pré-definidas.
Portanto, monitore de 3 em 3 meses ou de 6 em 6, dependendo da capacidade técnica da sua equipe.
Não se preocupe em ter sempre um resultado perfeito! A ideia aqui é identificar problemas críticos, não gastar tempo para ter as Core Web Vitals perfeitas o tempo inteiro. O próprio Google já explicou que isso não importa.
Todo tipo de site deve ter atenção à métrica, já que ela interfere indiretamente no ranqueamento de páginas. No entanto, há diferentes perfis de risco, dependendo dos recursos utilizados.
Alguns modelos que merecem atenção especial são:
Da mesma forma, há tipos de site que podem dedicar pouca atenção ao CLS. É o caso da SEO Happy Hour, inclusive.
Nosso site é praticamente inteiro estático, não usa web fonts e nem anúncios. Além disso, a funcionalidade também é relativamente simples, apresentar nossos serviços e hospedar o nosso blog.
Caprichamos na parte técnica quando lançamos o site e é isto, zero preocupações com essa métrica.
Se você tem um site mais complexo do que o nosso e está preocupado com a performance dele nos buscadores, entre em contato conosco!
A SEO Happy Hour tem profissionais com décadas de experiência em SEO técnico, capazes de orientar a sua equipe de desenvolvimento sobre as melhores práticas para sites alinhados às principais diretrizes do Google.
Elyson Gums é redator na SEO Happy Hour. Trabalha com redação e produção de conteúdo para projetos de SEO e inbound marketing desde 2014, em segmentos B2C e B2B. É bacharel em Jornalismo (Univali/SC) e mestre em Comunicação Social (UFPR).
Comentários