# How to fix Cumulative Layout Shift (CLS)

> CLS measures how much the page jumps around while it loads. Google wants it under 0.1. Images without dimensions, late-loading fonts and injected banners cause almost all of it.

Speed & Core Web Vitals · HTML version: https://getreport.app/learn/cumulative-layout-shift

## Cumulative Layout Shift

Passing looks like: Cumulative Layout Shift passes.

**Why it matters.** CLS measures how much the page jumps around while loading — the button that moves just as someone taps it. It is one of Google's three Core Web Vitals.

**How to fix it.**

1. Give every <img>, <video>, ad slot and embed explicit width and height (or aspect-ratio) so space is reserved before it loads.
2. Preload the main web font and use font-display optional, or swap with a size-adjusted fallback font, so text does not reflow.
3. Never insert banners or content above existing content after load.

## Images without width and height

Passing looks like: Every image declares width and height.

**Why it matters.** Without width and height the browser cannot reserve space, so the text jumps when each image arrives. That is the most common cause of a poor Cumulative Layout Shift score.

**How to fix it.**

1. Add width and height attributes with the image's real proportions; CSS can still scale it.
2. In WordPress, recent versions add them automatically for images inserted through the editor; hard-coded theme images need them by hand.

## Real-user Cumulative Layout Shift

Passing looks like: Real-user Cumulative Layout Shift passes.

**Why it matters.** CLS on real visitors' devices over the last 28 days. Google's threshold for "good" is 0.1; layout jumps hit hardest on slow phones with late-loading ads and fonts.

**How to fix it.**

1. Reserve space for images, embeds and ads; see the CLS finding above.

Check your own page: https://getreport.app/