Cumulative Layout Shift (CLS) measures unexpected layout movements — when elements on the page shift position after they've already rendered. You've experienced it: you start reading a paragraph, an ad loads above it, and suddenly the text jumps down. That's layout shift.

What's a good CLS score?

Good: Under 0.1
Needs improvement: 0.1–0.25
Poor: Over 0.25

Google uses CLS as a Core Web Vital, so it directly impacts your search rankings.

Common causes

1. Images without dimensions

When an image loads without a defined width and height, the browser doesn't know how much space to reserve. The image loads, pushes content down.

<!-- Bad: no dimensions -->
<img src="hero.jpg" />

<!-- Good: dimensions set -->
<img src="hero.jpg" width="800" height="400" />

2. Ads and embeds without reserved space

Third-party ads and iframes load asynchronously. Reserve their space with CSS:

.ad-slot {
  min-height: 250px; /* Reserve space for the ad */
}

3. Web fonts causing text reflow

When a custom font loads, text can resize and shift the layout. Use font-display: swap and make sure fallback fonts have similar metrics:

@font-face {
  font-family: "YourFont";
  src: url("/fonts/yourfont.woff2") format("woff2");
  font-display: swap;
}

4. Dynamic content injection

Content inserted above existing content (banners, cookie notices, notifications) pushes everything down. Place dynamic content in reserved slots or use overlays that don't affect layout.

Quick fixes

Add width and height to all <img> and <video> tags
Use CSS aspect-ratio for responsive containers
Reserve space for ads and embeds with min-height
Use font-display: swap for web fonts
Avoid inserting content above existing content after load

Measure your CLS

PageGrader checks your CLS score as part of its performance audit. Scan your site to see if layout shift is hurting your user experience.