Stop the page jumping around (CLS)

Reserve space for everything that loads late so content never moves.

45 min

why this matters

Layout jumps make people tap the wrong thing — often right as they reach for a buy button. It costs conversions directly and is a ranking signal.

1
Find the shifts
PageSpeed Insights lists the elements contributing to CLS. Chrome DevTools' Performance panel highlights each shifted region in the recording.
2
Give every image and video explicit dimensions
With width and height attributes the browser reserves the right space before the file arrives. Use aspect-ratio in CSS for responsive images.
```
<img src="/product.webp" width="800" height="600" alt="..." />

.media { aspect-ratio: 4 / 3; width: 100%; }
```
3
Reserve space for ads, embeds and banners
Ad slots are the biggest CLS source on ad-supported sites. Wrap each one in a container with a fixed min-height matching the ad size.
```
.ad-slot { min-height: 250px; }
```
4
Preload fonts and match fallback metrics
Preload the font file, use font-display: swap, and set size-adjust or a metric-compatible fallback so text doesn't reflow when the webfont lands.
5
Never insert content above what's already visible
Cookie bars, promo strips and notification banners should overlay the page or sit at the bottom, not push it down.