Como o Cumulative Layout Shift é realmente calculado

O que é Cumulative Layout Shift (CLS)?

O Chrome mede o Cumulative Layout Shift como a maior rajada de movimento inesperado de layout durante a vida de uma página, em que cada deslocamento individual pontua impact fraction multiplicada por distance fraction e a rajada de maior pontuação vira o CLS da página. A métrica existe porque conteúdo que pula sob o dedo do leitor custa a ele o toque que estava prestes a dar. Dois números decidem cada pontuação: quanto do viewport se moveu e o quanto ele andou.

O nome causa a maior parte da confusão. "Cumulativo" descreve o que acontece dentro de uma rajada, não ao longo da página, então quarenta deslocamentos pequenos espalhados por três minutos podem pontuar melhor que dois deslocamentos separados por meio segundo.

Como a pontuação de um deslocamento de layout é calculada?

A fórmula publicada pela equipe do Chrome no web.dev, verificada em 8 de setembro de 2026, é uma única multiplicação:

layout shift score = impact fraction × distance fraction

A impact fraction é a união da área visível que um elemento instável ocupava no quadro anterior com a área que ele ocupa no quadro atual, dividida pela área total do viewport. A distance fraction é a maior distância horizontal ou vertical que qualquer elemento instável percorreu naquele quadro, dividida pela maior dimensão do viewport, largura ou altura, a que for maior.

Percorra um deslocamento do início ao fim. Pegue um viewport de celular com 400px de largura e 800px de altura, então a maior dimensão é 800px. Um título de artigo em largura total e seu parágrafo de abertura ocupam os 400px do topo, ou seja, metade do viewport. Um banner de consentimento então se injeta acima deles e empurra o bloco 160px para baixo.

Entrada	Valor	De onde vem
Viewport	400 × 800 px	320,000 px de área total
Elemento antes do deslocamento	y 0 a 400	160,000 px visíveis
Elemento depois do deslocamento	y 160 a 560	160,000 px visíveis
União dos dois quadros	y 0 a 560	224,000 px
Impact fraction	0.7	224,000 ÷ 320,000
Distância percorrida	160 px	altura do banner
Distance fraction	0.2	160 ÷ 800

0.7 × 0.2 = 0.14

Um único banner produziu 0.14, que já cai na faixa "precisa de melhoria". As duas frações limitam uma à outra: um elemento minúsculo pontua baixo mesmo percorrendo a tela inteira, e um bloco do tamanho do viewport pontua alto mesmo percorrendo 20px.

Por que o CLS não é a soma de todos os deslocamentos?

O CLS reporta a única janela de sessão de maior pontuação, não um total acumulado. Uma janela de sessão abre no primeiro deslocamento e continua aberta enquanto chegarem deslocamentos com menos de 1 segundo de intervalo, até uma duração máxima de janela de 5 segundos. Quando passa um intervalo de 1 segundo ou mais, ou a janela chega a 5 segundos, ela fecha e o próximo deslocamento inicia uma nova. O navegador pontua cada janela separadamente e reporta a maior.

Continue o exemplo acima. O deslocamento do banner de 0.14 cai em 1.2s. Uma fonte web é trocada em 1.5s e reflui um parágrafo por 0.03. O intervalo é de 300ms, então os dois pertencem a uma janela que vale 0.17. Um embed carregado sob demanda então desloca o rodapé em 0.05 aos 4.0s, ou seja, 2.5 segundos depois do último deslocamento, então ele abre a própria janela.

Janela	Deslocamentos	Pontuação da janela
1 (1.2s a 1.5s)	0.14 banner, 0.03 troca de fonte	0.17
2 (4.0s)	0.05 embed	0.05

O CLS da página é 0.17, o maior dos dois, não 0.22. Perseguir a soma manda a equipe para o deslocamento errado: encontre a janela que pontuou mais alto e corrija o que está dentro dela.

Como uma janela de sessão decide a pontuação

1

O primeiro deslocamento acontece. O empurrão do banner aos 1.2s abre uma janela de sessão e pontua 0.14.

2

O próximo deslocamento chega antes de 1 segundo. A troca de fonte aos 1.5s entra na mesma janela e eleva o total para 0.17.

3

Passa um intervalo de 1 segundo ou mais. A janela se fecha, como acontece 2.5 segundos depois da troca de fonte.

4

O próximo deslocamento abre uma janela nova. O deslocamento do embed aos 4.0s abre sua própria janela e pontua 0.05.

5

O Chrome reporta a janela com a maior pontuação. 0.17 se torna o CLS da página, não a soma de 0.22 das duas janelas.

O que conta como deslocamento de layout inesperado?

Um deslocamento conta como inesperado a menos que siga uma interação do usuário dentro de 500 milissegundos. O Chrome marca com hadRecentInput qualquer deslocamento que ocorreu logo depois de um toque, clique ou tecla pressionada, e esses deslocamentos ficam de fora da pontuação, porque um leitor que abriu um acordeão espera que o conteúdo abaixo se mova.

Essa regra de 500ms é uma alavanca de design, não um detalhe de implementação. Um botão "Carregar mais" não custa nada, e o mesmo conteúdo injetado por um temporizador custa o que a fórmula disser.

O que causa o Cumulative Layout Shift?

Quatro fontes produzem quase todo deslocamento que vale a pena corrigir, e cada uma tem uma correção que elimina o deslocamento em vez de encolhê-lo.

Causa	O que o navegador faz	Correção
Imagens e vídeo sem dimensões	Reserva altura zero e reflui quando o arquivo chega	Definir os atributos width e height, ou reservar a caixa com aspect-ratio no CSS
Anúncios, iframes e embeds de terceiros	Só dimensiona o espaço depois que o terceiro responde	Reservar o espaço com min-height ou aspect-ratio, dimensionado pelas medidas que aquele espaço já serviu antes
Banners, avisos e skeletons injetados	Insere um nó no fluxo do documento e empurra tudo que está abaixo	Reservar o espaço com antecedência, renderizar fora do fluxo como sobreposição, ou inserir atrás de uma ação do usuário
Fontes web	Troca uma fonte de fallback pela fonte web e muda as métricas do texto no meio da renderização	Usar font-display: optional, alinhar o fallback com size-adjust e os descritores de override de fonte, e pré-carregar a fonte crítica

O padrão por trás das quatro: reserve a caixa antes de o conteúdo existir. Um navegador que já sabe a altura de um espaço não tem nada para refluir quando o espaço é preenchido.

Por que o CLS de laboratório difere do CLS de campo?

O CLS de laboratório cobre apenas o carregamento da página, e o CLS de campo cobre todo o ciclo de vida dela. O Lighthouse carrega uma URL em um perfil de dispositivo fixo, registra os deslocamentos dentro da sua janela de medição e para. Pessoas reais rolam para além dessa janela, disparam imagens carregadas sob demanda, fecham um banner, abrem um menu, e todo deslocamento depois do corte do Lighthouse ainda conta no campo.

Viewport e rede acrescentam uma segunda diferença. A distance fraction divide pela maior dimensão do viewport, então o mesmo banner de 160px pontua diferente num celular e num desktop, e uma conexão rápida de laboratório entrega o conteúdo de um espaço antes de o deslocamento sequer acontecer, escondendo um defeito que dispara toda vez numa rede lenta. Corrija regressões no laboratório e depois julgue o resultado com dados de campo de visitas reais, onde os limites das três vitals ficam em uma tabela só.

Como encontrar o deslocamento que causou um CLS ruim?

Junte a pontuação de campo a uma gravação da sessão que a produziu, para que a rajada vire algo que você assiste em vez de algo que você deduz. Um p75 de 0.28 diz que a página falha; não diz que um banner de consentimento injeta 160px acima da dobra para visitantes cujo IP resolve na UE.

A Flowsery entrega um script com menos de 10 KB, sem cookies e hospedado na UE, e não aplica amostragem, então a pontuação vem de cada sessão em vez de um subconjunto. Ela grava as sessões junto com os tempos, agrupa as parecidas em um único issue ordenado por quantos usuários foram atingidos, e envia esse issue para Slack, Linear ou Jira com o replay e os passos para reproduzir anexados.

O CLS é uma das três Core Web Vitals, e cada uma falha pelos próprios motivos. Largest Contentful Paint cobre o tempo de renderização, Interaction to Next Paint cobre a capacidade de resposta, e a visão geral das Core Web Vitals explica por que uma página precisa passar nas três ao mesmo tempo.

Perguntas frequentes

O que é uma boa pontuação de CLS?

0.1 ou menos no percentil 75 é bom, de 0.1 a 0.25 precisa de melhoria, e acima de 0.25 é ruim, segundo os limites da equipe do Chrome no web.dev em setembro de 2026. O percentil é calculado separadamente para celular e desktop, então uma página pode passar no desktop e falhar nos celulares. O que conta como um bom CLS detalha como o p75 é montado.

O CLS tem unidade?

Não. As duas entradas da fórmula são frações do viewport, então multiplicá-las produz um número sem unidade. É por isso que 0.1 significa a mesma coisa num celular de 400px e num monitor de 2560px: a métrica se normaliza contra a tela em que aconteceu.

Deslocamentos abaixo da dobra contam para o CLS?

Só o movimento de conteúdo visível no viewport no momento do deslocamento contribui para a impact fraction. Um elemento que reflui 4000px abaixo na página enquanto o leitor está no topo não acrescenta nada. Ele começa a contar no momento em que o leitor rola até ele e ele se move de novo.

Por que meu CLS piorou depois que adicionei um skeleton loader?

Um skeleton que não bate com a altura do conteúdo final desloca a página duas vezes em vez de uma: primeiro quando o skeleton aparece, depois de novo quando o conteúdo real o substitui com dimensões diferentes. Dimensione o skeleton para a caixa que o conteúdo vai ocupar, ou o espaço reservado vira o defeito.

Uma animação pode causar um deslocamento de layout?

Animar propriedades que disparam layout, como top, left, width ou height, move o conteúdo ao redor e pontua como deslocamento. Animar transform não faz isso, porque o compositor move a camada pintada sem rodar o layout de novo. Passe as animações para transform e opacity e os deslocamentos somem.

O CLS continua acumulando depois que a página termina de carregar?

Sim. O navegador observa deslocamentos durante todo o ciclo de vida da página, então um banner que se injeta aos 30 segundos, ou uma imagem que carrega sob demanda na rolagem, abre uma nova janela de sessão e pode virar a pontuação reportada da página. Esse é o principal motivo pelo qual uma execução limpa do Lighthouse convive com uma pontuação de campo reprovada.

Quanto tempo uma janela de sessão do CLS fica aberta?

Uma janela de sessão abre no primeiro deslocamento e continua somando os que chegam com menos de 1 segundo de intervalo, até um limite de 5 segundos. Um intervalo de 1 segundo ou uma duração total de 5 segundos a fecha, e o próximo deslocamento abre uma nova janela. O Chrome pontua cada janela da página e reporta apenas a mais alta como CLS.

Clicar em um botão antes de um deslocamento impede que ele conte para o CLS?

Um deslocamento fica excluído do CLS se acontecer dentro de 500 milissegundos depois de um toque, clique ou tecla pressionada, uma marcação que o Chrome registra como hadRecentInput. Um botão "Carregar mais" que expande conteúdo logo após um clique não custa nada, enquanto o mesmo conteúdo injetado por um timer pontua conforme a fórmula. A regra existe porque um leitor que acabou de abrir um acordeão espera que o conteúdo abaixo se mova.

Por que o mesmo deslocamento de layout pontua diferente no celular e no desktop?

A fração de distância divide o quanto um elemento se moveu pela maior dimensão do viewport, então um deslocamento fixo em pixels é uma fração maior numa tela de celular do que numa tela de desktop mais larga. O empurrão de banner de 160px do exemplo anterior pontua 0.2 num viewport de 800px de altura e pontuaria menos numa tela de desktop mais alta. O CLS de campo agrava isso porque o percentil é calculado separadamente para celular e desktop, então o mesmo defeito pode passar em um e falhar no outro.

Qual é a correção mais rápida para deslocamento causado por imagem?

Defina os atributos width e height em imagens e vídeos, ou reserve a caixa com a propriedade CSS aspect-ratio, para que o navegador reserve o espaço antes que o arquivo chegue. Imagens sem dimensões reservam altura zero por padrão e refazem o layout da página assim que o arquivo carrega. Reservar a caixa remove o deslocamento em vez de apenas reduzi-lo.