Pular para o conteúdo

commit "cls-da-face-titulo"

Onde estava o CLS: a face-título do jornal

O Anfitrião pulava no carregamento. A culpa não era da fonte nem da imagem — era um elemento sem altura reservada no topo da folha.

  • performance
  • core-web-vitals
  • anfitriao

Core Web Vitals acusava CLS acima do limite só na home do Anfitrião. As suspeitas óbvias (fonte de display, imagem de capa) estavam inocentes.

O culpado

A face-título calculava a própria altura depois da hidratação. Entre o primeiro paint e o cálculo, tudo abaixo dela subia alguns pixels — o suficiente para reprovar.

Lição

Reserva de espaço não é otimização, é correção. Todo elemento cuja altura depende de JavaScript precisa de uma altura declarada antes.