Reserve space for late content

Give images and embeds their size before they load, so nothing moves.

Guillermo Rauch@rauchg
As soon as it loads, this comes later and shifts the content down. That adds to CLS and also hurts the time to LCP (two core web vitals) You should reserve space for them with a skeleton and try to get faster LCP
Dec 27, 2020View on X ↗
Guillermo Rauch@rauchg
<img> without width and height causes layout shift src=“” without optimization causes very slow page loads, excessive download times and bandwidth, etc HTML “the good parts” is both hard to wield / learn and requires tooling to reach quality
Dec 15, 2024View on X ↗
Guillermo Rauch@rauchg
Layout shift is such a huge pet peeve of my mine. I love that it can be massively distributed and automated now.
May 8, 2020View on X ↗

Demo 2 rebuilds his <img> post, plus a video embed with no box.

Aim for Place order

Press Reload, then go straight for Place order.

No reserved spaceBad
<div id="express">Moved 0px · misclicks 0
Reserved slotGood
min-height: 44pxMoved 0px · misclicks 0
/* The express-pay script arrives late. Its box doesn't. */
.express-slot { min-height: 44px; }
.express-slot:empty { border-radius: 8px; background: #f2f2f2; }

// React: same idea, the fallback has the final size
<Suspense fallback={<Skeleton className="h-11" />}>
  <ExpressCheckout />
</Suspense>

Size images, box embeds

Start reading, then press Reload and watch the paragraph.

No width or heightBad
<img src alt>CLS 0.00
Sized up frontGood
width height · aspect-ratioCLS 0.00
<!-- The ratio comes from the attributes; CSS keeps it fluid -->
<img src="/edge.jpg" width="1200" height="675" alt="Edge network map">
img { max-width: 100%; height: auto; }

<!-- Embeds have no intrinsic size: give the wrapper one -->
<div class="video"><iframe src="…" title="Ship week recap"></iframe></div>
.video { aspect-ratio: 16 / 9; }
.video iframe { width: 100%; height: 100%; }

Why it matters, pros and cons

Why it matters

The browser can't lay out what it hasn't measured. Tell it the size and nothing has to move.

Pros

  • Taps land where the reader aimed; no surprise Cancel.
  • CLS stays at zero for images and embeds.
  • A skeleton in the box shows what's coming and where.

Cons

  • Ads and user text have no known height; reserve a best guess.
  • A box that stays empty looks broken; collapse it on error.
  • Oversized reservations push real content below the fold.