How to Reduce Cumulative Layout Shift (CLS)
Cumulative Layout Shift measures how much your page unexpectedly moves around while it loads. It is the vital users feel most viscerally — the button that jumps just as they tap it, the paragraph that leaps down when an image finally appears. The good news: nearly every cause of layout shift is preventable.
The short version
A good CLS score is 0.1 or less. The fixes are simple: always give images and videos explicit dimensions, reserve space for ads and embeds before they load, load fonts without a visible reflow, and never insert content above what the user is already reading. See how CLS fits the wider picture in Core Web Vitals explained.
Why layout shift happens
When the browser first lays out a page, it does not yet know the size of resources that haven’t loaded. If an image arrives with no reserved space, everything below it shoves down to make room. CLS adds up every one of these unexpected movements. The goal is to make sure the browser knows how much space each element needs before it loads.
The concrete fixes
1. Always set image and video dimensions
Give every <img> and <video> explicit width and height attributes. Modern browsers use them to reserve the correct space and prevent the shift, even while the file is still downloading.
<img src="/img/photo.avif" width="800" height="450" alt="...">With those attributes in place, CSS like height: auto keeps the image responsive while preserving the reserved aspect ratio. Our image optimization guide covers dimensions in more detail.
2. Reserve space for ads, embeds and iframes
Ad slots, social embeds and iframes are the biggest CLS offenders because they load late and at unpredictable sizes. Wrap each in a container with a fixed minimum height that matches the most common size, so the surrounding content never jumps when the embed arrives.
.ad-slot { min-height: 280px; }3. Load fonts without a reflow
When a custom web font loads, text can re-flow if the fallback font has different metrics. Use font-display: swap so text is visible immediately, and preload key fonts to shorten the swap. Choosing a fallback with similar sizing minimizes any shift when the real font takes over.
@font-face { font-family: "Inter"; font-display: swap; src: url(/fonts/inter.woff2); }4. Never insert content above existing content
Injecting a banner, cookie notice or “you may also like” block at the top of the page after load pushes everything down — a guaranteed shift. If you must add dynamic content, reserve its space up front, or insert it below the fold where it won’t displace what the user is reading.
Common causes and fixes
| Cause | Fix |
|---|---|
| Images without dimensions | Add width and height attributes |
| Late-loading ads & embeds | Reserve space with min-height |
| Web-font reflow | font-display: swap + preload |
| Injected banners & notices | Reserve space or insert below the fold |
| Dynamically resized elements | Use transform, not layout properties |
transform property instead of changing top, width or margin. Transforms move pixels without triggering a layout recalculation, so they never contribute to CLS. Run a scan to spot shifting elements.Frequently asked questions
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 is a unitless score, not a measure of time.
Do animations count as layout shift?
Only if they move surrounding content. Shifts caused by a user interaction within 500 ms are excluded, and animations using CSS transforms don’t count because they don’t change the layout.
Why does my CLS look fine locally but fail in the field?
Real users hit slower networks where images and ads load later, exaggerating shifts. Always confirm with field data rather than a single fast local test.
Related guides
What Is TTFB (Time to First Byte)?
What Time to First Byte measures, what counts as good, and the most common causes of a slow TTFB.
Read →Performance & Core Web VitalsCore Web Vitals Explained for Non-Developers
LCP, INP and CLS in plain language — what Google measures, the thresholds, and how they affect rankings.
Read →Performance & Core Web VitalsHow to Improve Largest Contentful Paint (LCP)
Practical, prioritized steps to bring LCP under 2.5 seconds, from image handling to render-blocking resources.
Read →Check your site against this guide
Run a free ScanOpsPro scan and see how your site handles the fundamentals.
Run a free scan