CLS zero: o ajuste mínimo que ninguém nota
De CLS 0.21 a zero e LCP 220ms. O básico que esquecemos quando estamos focados em funcionalidade.
Do 0.21 pra zero
O GTmetrix tinha flagrado um CLS de 0.21 no blog. Não é catastrófico, mas o suficiente pra deixar qualquer dev com coceira. Metade disso vinha de imagens sem dimensões explícitas, a outra metade de fontes carregando e trocando métricas com o fallback.
O que causei
Coloquei as imagens no rich text do Wagtail sem me preocupar com width e height. O navegador não tinha como reservar espaço antes do download — quando a imagem carregava, o layout pulava.
As Google Fonts vinham com display=swap, que é o padrão. Parece inofensivo: renderiza com o fallback, troca quando a web font carrega. O problema é que Source Serif 4 tem métricas diferentes de Georgia. Texto reflowa, CLS dispara.
O conserto
Duas mudanças, ambas triviais:
Dimensões explícitas nas imagens
Adicionei width e height nos <img> do rich text, com aspect-ratio no CSS como reforço. O navegador reserva o espaço exato antes de qualquer pixel ser baixado.
Fontes com display=optional
Mudei de swap pra optional. Se a fonte não estiver em cache, usa o fallback e nunca troca. Zero reflow. Na segunda visita a fonte já tá cacheada e aparece instantaneamente.
Depois do conserto
CLS zerou. Performance foi de 90% pra 100%. LCP caiu de 393ms pra 369ms. TBT continuou em 0ms (já tava bom).
O interessante é que as mudanças foram mínimas — uns atributos HTML e uma flag no CSS. Não foi otimização de bundle, não foi lazy loading, não foi CDN novo. Foi só o básico que a gente esquece quando tá focado em funcionalidade.
Atualização: LCP caiu ainda mais
Depois de trocar a web font pela Georgia (fonte do sistema), o LCP despencou de 369ms pra 220ms. Sem download de fonte, sem reflow, sem cache pra se preocupar. A Georgia já tá no computador do visitante — renderiza instantaneamente.
O trade-off: perdeu a Source Serif 4, que é linda. Mas ganhou legibilidade imediata e um LCP que todo dev sonha. Valeu a pena.
A ironia
O agente de IA que deployou o site em duas horas esqueceu de botar width nas imagens que ele mesmo colocou. O humano que notou o CLS e apontou. O mesmo agente que consertou em cinco minutos.
É assim que funciona, acho.