Layout shift: width/height + aspect-ratio

CLS (Cumulative Layout Shift)

Things you've felt: you start reading an article, an ad image loads above your paragraph, the page jumps and you lose your place. The Web Vitals metric for this is CLS — and Google ranks pages with high CLS lower.

The fix: tell the browser the size of EVERY image BEFORE it loads, so the browser reserves space.

<img src="/hero.jpg" alt="…" width="1200" height="630" />

Modern browsers compute aspect ratio from width/height attributes and reserve space even when CSS makes the image fluid (max-width: 100%; height: auto). NO JUMP.

aspect-ratio for non-image elements

.video-wrapper {
  aspect-ratio: 16 / 9;
  width: 100%;
}

For elements that need to maintain a ratio (video containers, hero blocks): aspect-ratio is the modern, declarative answer. Replaces the old "padding-bottom: 56.25%" hack.

CSS containment

article {
  contain: layout style;
}

Hint to the browser: layout changes inside this element don't affect anything outside. Reduces re-layout work when a child loads in.

Test in DevTools

Chrome DevTools → Performance tab → "Web Vitals" overlay. Visualizes layout shifts as they happen with red boxes.