How to Fix Cumulative Layout Shift (CLS) on Your Website
Stop your pages from jumping while they load, with fixes for images, ads, banners and fonts.
You start reading, and suddenly the text jumps down because an image or banner loaded above it. You go to tap a button and hit an ad instead. That is layout shift, and Cumulative Layout Shift (CLS) measures how much of it happens. A good CLS score is 0.1 or less.
Common causes
- Images and videos without dimensions โ the browser does not know how much space to reserve.
- Ads, embeds and iframes that load late and push content.
- Banners inserted at the top โ cookie notices, promotions, app install bars.
- Web fonts that swap in with different sizes.
- Content injected by scripts above existing content.
Fix 1: Give images and videos dimensions
Add width and height attributes (or a CSS aspect-ratio) to every image and video. Modern browsers use them to reserve the right space, even in responsive layouts.
Fix 2: Reserve space for ads and embeds
Give ad slots and embeds a fixed minimum height based on the most common size. If an ad does not fill, the space stays empty rather than collapsing and shifting content. Avoid placing ads at the very top of the content area where shifts hurt most.
Fix 3: Handle banners carefully
- Show cookie and promotion banners as overlays at the bottom of the screen, not inserted at the top.
- If a banner must sit at the top, reserve its space in the initial layout.
Fix 4: Tame web fonts
- Preload the main font files.
- Choose fallback fonts with similar sizing, or use font metric adjustments.
- Limit the number of font families and weights.
Fix 5: Avoid inserting content above what users see
"Load more", live updates and recommendations should appear below the user's position or after a user action. Shifts that happen within half a second of a user's tap do not count against CLS.
How to find shifts
PageSpeed Insights lists the elements that shifted most. In browser developer tools, the Performance panel highlights layout shifts. Run your key templates โ homepage, article, product โ through the free site audit report for an overall check. Read Core Web Vitals explained and how to improve LCP.
A worked example
A US recipe blog had a CLS of 0.35 on mobile. Ads loaded between paragraphs without reserved space, and recipe photos had no dimensions. The owner added width and height to all images, gave each ad slot a minimum height and moved the newsletter pop-up to the bottom of the screen. CLS fell to 0.04, and readers stopped tapping ads by accident.
Quick CLS checklist
- Every image and video has dimensions.
- Ad slots and embeds have a minimum height.
- Cookie and promotion banners overlay the page instead of pushing it.
- Fonts are preloaded with matching fallbacks.
Check these on each template once, and most shifts disappear site-wide.
Related guides
More free tools: browse all our free SEO tools, no sign-up needed.
Frequently asked questions
What is a good CLS score?
0.1 or less for at least 75% of page visits.
Do ads always cause layout shift?
Only if no space is reserved for them. Fixed-size slots prevent most shifts.
Does layout shift after scrolling count?
Yes, CLS measures shifts throughout the visit, not just during loading.
Does CLS affect rankings?
It is part of page experience signals, but content relevance matters far more. Fix it mainly for your visitors.