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.
Step by step, with screenshots: Cumulative Layout Shift (CLS): what it is and how to fix it →
Check your own site
Runs these 3 checks and the other 190, free, in about 45 seconds.
Or run only this check with the free Website speed comparison, the free Bulk PageSpeed Insights or the free Core Web Vitals checker.
What it is
Cumulative Layout Shift (CLS) measures how much visible content moves unexpectedly while a page is open. Each time an element jumps, the browser scores the shift by how much of the screen moved and how far; CLS is the largest burst of shifts during the visit.
Google rates CLS as good at 0.1 or less, needs improvement up to 0.25 and poor above 0.25, at the 75th percentile of real visits. It is one of the three Core Web Vitals. Shifts within 500 ms of a click or tap do not count, because the visitor expected them. getReport shows the lab CLS from Lighthouse, the real-user CLS from the Chrome UX Report when available, and lists images without width and height, the most common cause.
What a passing site looks like
- Cumulative Layout Shift: passesfail · −25 ptseffort S
- Every image declares width and heightwarning · −1 ptseffort S
- Real-user Cumulative Layout Shift: passesinfo onlyeffort S
1. Cumulative Layout Shift
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.
- Give every <img>, <video>, ad slot and embed explicit width and height (or aspect-ratio) so space is reserved before it loads.
- Preload the main web font and use font-display optional, or swap with a size-adjusted fallback font, so text does not reflow.
- Never insert banners or content above existing content after load.
2. Images without 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.
- Add width and height attributes with the image's real proportions; CSS can still scale it.
- In WordPress, recent versions add them automatically for images inserted through the editor; hard-coded theme images need them by hand.
3. Real-user Cumulative Layout Shift
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.
- Reserve space for images, embeds and ads; see the CLS finding above.
Questions people ask
How do I fix Cumulative Layout Shift?
Reserve space for everything before it loads. Give every image and video width and height attributes or a CSS aspect-ratio, set a fixed height for ad slots, embeds and cookie banners, and do not insert content above what the visitor is already reading. For fonts, use font-display: optional or a size-adjusted fallback font so text does not reflow when the web font arrives.
Does CLS affect SEO?
Yes, a little. CLS is one of the Core Web Vitals that Google uses in its page experience signals, but relevance and content quality matter far more. Treat it as a tie-breaker for rankings and as a real conversion issue: a button that moves just as someone taps it leads to wrong clicks and abandoned forms.
How do I measure CLS?
Use two sources. Field data from the Chrome UX Report, shown in getReport, PageSpeed Insights and Search Console, tells you what real visitors experienced over 28 days. A lab tool such as Lighthouse or the Performance panel in Chrome DevTools shows which elements shifted during one load. Lab CLS covers only the load, so shifts caused by scrolling or late ads may appear only in field data.
What is a good CLS score?
0.1 or less is good, between 0.1 and 0.25 needs improvement and above 0.25 is poor. CLS has no unit: it multiplies the share of the screen that moved by the distance it moved. A score close to 0 is realistic for most content sites once images have dimensions and ads have reserved slots.
What causes layout shift?
Images and videos without dimensions, ads and embeds that resize when they load, banners and notices injected at the top of the page, and web fonts that are a different size from the fallback font. Animations that change top, left, width or height instead of transform can also shift content. The report lists images without width and height, so you can fix the most common cause first.