O CLS acontece quando conteúdo visível se move depois de já ter sido pintado, deslocando aquilo que o usuário estava olhando. A causa é quase sempre conteúdo que carrega sem espaço reservado.
O CLS acontece quando conteúdo visível se move depois de já ter sido pintado, deslocando aquilo que o usuário estava olhando. A causa é quase sempre conteúdo que carrega sem espaço reservado.
top, height) em vez de transform.width/height (ou aspect-ratio) para que o espaço seja reservado antes da carga:<img src="/photo.jpg" width="1200" height="800" alt="..."> <!-- reserva a caixa -->
.hero { aspect-ratio: 16 / 9; } /* reserva a proporção para mídia responsiva */
font-display: optional ou swap mais size-adjust/preload para minimizar o reflow quando a web font chega.position: absolute) ou empurre a partir da base.transform/opacity — eles são compostos e não disparam layout.O CLS é o Core Web Vital mais corrigível — geralmente é um punhado de dimensões faltando. Entrevistadores o usam para testar se você entende o pipeline de renderização: reservar espaço de antemão significa que o navegador nunca precisa refazer o layout, e é por isso que transform supera animar top.
Uma biblioteca de perguntas de entrevista de TI com respostas detalhadas — de Júnior a Sênior.
Doar