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: Core Web Vitals for e-commerce: product and category pages →
Check your own site
Runs these 3 checks and the other 184, free, in about 45 seconds.
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.