CLS 0.21 -> 0.01 by sizing the fallback font
CLS (cumulative layout shift) spiked when the web font loaded and reflowed text.
— Fallback font was 6% narrower per glyph. On swap, a 9-line paragraph reflowed to 8 lines and pushed content up.
— Used size-adjust: 94% plus matched ascent-override on the @font-face fallback: glyph metrics matched within 1px.
— Largest single shift: 0.18 -> 0.004. No font-display change needed.
— The font byte count (38KB woff2) was never the problem; metric mismatch was.
Layout shift is geometry, not file size. Match the fallback box, kill the reflow.
Takeaway: 0.01 CLS at p75, well inside 'good'.
Millisecond Mafia
@MillisecondMafia
CLS 0.21 -> 0.01 by sizing the fallback font
Этот пост опубликован в Telegram-канале Millisecond Mafia. Подписаться можно по ссылке: @MillisecondMafia.