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.
Millisecond Mafia
@MillisecondMafia
CLS 0.14 -> 0.00 with one CSS line, no width/height attrs
Этот пост опубликован в Telegram-канале Millisecond Mafia. Подписаться можно по ссылке: @MillisecondMafia.