CLS (Cumulative Layout Shift)

O que é o CLS (Cumulative Layout Shift)?

O CLS mede o quanto os elementos visíveis mudam de posição inesperadamente enquanto uma página é carregada ou utilizada. O cálculo não tem unidade de medida e é feito multiplicando a impact fraction (fração de impacto, ou seja, quanto da tela é afetado) pela distance fraction (fração de distância, ou seja, quanto os elementos se movem). O CLS é uma das três Core Web Vitals ao lado do LCP e do INP, e uma boa pontuação é 0.1 ou inferior no percentil 75 — qualquer valor acima de 0.25 é considerado ruim.

Por que o CLS (Cumulative Layout Shift) é importante?

Os saltos de layout são diretamente prejudiciais em uma loja virtual: o comprador está prestes a clicar em “Comprar”, mas um banner ou uma imagem de carregamento lento desloca o botão e o clique acaba pousando em outra coisa. Isso gera frustração, cliques incorretos e desconfiança logo antes da conversão. O CLS também faz parte dos sinais de experiência de página do Google, de modo que valores persistentemente altos podem prejudicar o posicionamento nos resultados de busca. Uma página estável parece mais rápida e profissional — mesmo quando a velocidade bruta é idêntica.

Casos de uso comuns

• Imagens e vídeos sem dimensões. Sem width/height ou aspect-ratio, o navegador não consegue reservar espaço com antecedência, fazendo com que o conteúdo pule quando a mídia carrega — combine isso com um texto alternativo adequado.
• Banners de cookies e popups. O conteúdo injetado no topo ou no meio da página empurra tudo o que está abaixo dele.
• Widgets de aplicativos. Blocos de avaliações, “vistos recentemente” e ofertas de upsell que carregam após o restante da página alteram o layout.
• Fontes web. A transição de uma fonte de fallback para a fonte final pode fazer com que o texto mude de tamanho e de posição.
• Anúncios e iframes sem espaço reservado na área acima da dobra.

A perspectiva do Shopify

No Shopify, a maioria dos saltos de layout se origina de aplicativos e modificações do tema, e não da plataforma principal em si. Sempre reserve espaço para blocos dinâmicos, defina dimensões fixas nas imagens de produtos e carregue banners de cookies e popups de forma que eles não desloquem o conteúdo. Meça o efeito com o PageSpeed Insights ou Lighthouse tanto em dispositivos móveis quanto em computadores, e acompanhe o relatório de velocidade em Loja virtual no painel de administração do Shopify, que é construído com base nos dados do Google Lighthouse.