CLS (Cumulative Layout Shift) é uma métrica do Core Web Vitals que mede a estabilidade visual de uma página através da soma de deslocamentos de layout inesperados que ocorrem durante a vida útil da página.
Um "deslocamento de layout" acontece quando um elemento visível muda de posição de um quadro renderizado para o próximo sem uma causa iniciada pelo usuário. Cada deslocamento é avaliado pelo impacto (quanto da área visível se moveu) e distância (quão longe as coisas se moveram); CLS é a soma de todos esses deslocamentos. Limiares de 2026: ≤ 0.1 bom, ≤ 0.25 precisa de melhorias, > 0.25 ruim.
Correções comuns de CLS para e-commerce: sempre defina os atributos width e height em imagens para que os navegadores reservem espaço; reserve espaço para conteúdo incorporado (iframes, anúncios, vídeos) com dimensões explícitas ou CSS de proporção de aspecto; evite reflows de troca de fonte usando size-adjust em @font-face ou font-display: optional; não injete banners ou pop-ups acima do conteúdo existente; garanta que os carregadores de esqueleto correspondam às dimensões do conteúdo carregado que estão substituindo.
CLS é frequentemente a métrica do Core Web Vital mais fácil de corrigir e a mais impactante para a qualidade percebida — até mesmo pequenos deslocamentos de layout parecem pouco profissionais.