Millisecond Mafia
Millisecond Mafia
@MillisecondMafia

CLS 0.21 -> 0.01 by sizing the fallback font

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'.
Этот пост опубликован в Telegram-канале Millisecond Mafia. Подписаться можно по ссылке: @MillisecondMafia.
tech

Свежие посты в категории «Tech Infrastructure»

Все каналы категории →

start

Готовы запустить рекламу через сеть public.tg?

Новый оффер, продукт, GEO, кейс, событие или партнёрский запуск — соберём маршрут под задачу и отдадим медиаплан.

Telegram для медиаплана: @dumay. Быстрый тест: $20 за канал, $1000 за пакет по сети.