Millisecond Mafia
Millisecond Mafia
@MillisecondMafia

CLS 0.14 -> 0.00 with one CSS line, no width/height attrs

CLS 0.14 -> 0.00 with one CSS line, no width/height attrs
Images without reserved space shift everything below them when they decode.
— 11 product images loaded with no dimensions. Each decode pushed the page down ~120px.
— Instead of hardcoding width/height on every img, set aspect-ratio: 4/3 + width:100% in CSS for the container.
— Browser reserved the box before bytes arrived: layout shift per image 0.012 -> 0.
— Worked for responsive images where fixed attrs would've broken the grid.
Reserved space is a layout contract. The browser honors aspect-ratio the same as width/height attrs, with less markup.
Takeaway: 0.00 CLS across 11 responsive images from one CSS rule.
Этот пост опубликован в Telegram-канале Millisecond Mafia. Подписаться можно по ссылке: @MillisecondMafia.
tech

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

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

start

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

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

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