Cumulative Layout Shift, or CLS, measures the visual stability of a page by scoring how much its content moves around unexpectedly while it loads. A good CLS score is 0.1 or less. CLS is one of Google's three Core Web Vitals, alongside Largest Contentful Paint and Interaction to Next Paint, which means it feeds directly into rankings. It also feeds directly into revenue: when a button jumps just as someone taps it, they hit the wrong thing, lose their place, or leave. This post covers what causes layout shift and exactly how to fix it.
The short version
- Good is 0.1 or less, poor is above 0.25, measured at the 75th percentile of real visits.
- The big four causes are dimensionless images, injected ads, swapping web fonts, and unsized embeds.
- The single highest-impact fix is width and height attributes on every image and video.
- CLS counts shifts across the whole visit, not just the initial load.
How CLS is calculated
CLS multiplies the impact fraction, how much of the viewport a shift touched, by the distance fraction, how far the content moved as a share of the viewport. If half the screen shifts by a quarter of the viewport height, that shift scores 0.5 times 0.25, or 0.125, already past the good threshold on its own. Individual shifts are grouped and summed, and shifts within 500 milliseconds of a user action are excluded.
What causes poor CLS
- Images without dimensions. The browser reserves no space, then pushes everything down when the file arrives. The most common cause by far.
- Injected ads and banners. Ad slots that load late shove content aside, especially slots whose size varies per ad.
- Web fonts swapping in. When the real font replaces the fallback at a different size, every line of text reflows.
- Embeds and iframes. Videos, maps, and social embeds load with unknown dimensions unless you size their containers first.
- Content injected above content. Cookie notices and signup bars that push the page down are self-inflicted CLS.
- Late-loading CSS. Styles that arrive after first render resize elements that were already on screen.
How to fix Cumulative Layout Shift
-
Put width and height on every image
Modern browsers use the attributes to compute aspect ratio and reserve the space before the file downloads. One attribute pair per image ends most CLS problems.
-
Use CSS aspect-ratio for responsive media
Flexible layouts keep their reserved proportions at any viewport width when containers declare an aspect ratio.
-
Reserve fixed space for ads
Give every ad slot a container at its largest expected size before the ad loads. An empty placeholder beats a shifting page.
-
Preload fonts and use font-display swap
Preloading gets the real font in early; swap shows readable fallback text in the meantime. Together they shrink the reflow window to almost nothing.
-
Never inject content above existing content
Banners and notices should overlay the page or sit in space reserved in the initial HTML, not push everything down.
-
Size embed containers
Wrap iframes in containers with explicit dimensions or an aspect ratio matching the content. This site lazy-loads video and map embeds behind sized facades for exactly this reason.
-
Animate with transform, not layout properties
Transform and opacity animations skip layout recalculation entirely. Animating width, height, or position moves neighbors and scores against you.
-
Inline critical CSS
Styles in the document head apply before first paint, so elements render at their final size the first time.
The fixes in code
<!-- Layout shift: no reserved space -->
<img src="hero.jpg" alt="Product hero">
<!-- Stable: browser reserves the space up front -->
<img src="hero.jpg" alt="Product hero" width="1200" height="600">
/* Responsive containers keep their proportions */
.video-wrap { aspect-ratio: 16 / 9; width: 100%; }
/* Ad slots hold their largest expected size */
.ad-slot { min-height: 250px; width: 300px; contain: layout; }
/* Fonts: preload + swap shrinks the reflow window */
@font-face {
font-family: 'Open Sans';
src: url('/fonts/opensans.woff2') format('woff2');
font-display: swap;
}Measuring CLS
PageSpeed Insights shows lab and field CLS for any URL, Search Console reports it site-wide, and Lighthouse measures it in Chrome DevTools. Field data from the Chrome UX Report is what Google actually ranks on, so treat lab runs as a debugging tool and field data as the scoreboard. For live debugging, the DevTools Performance panel lists every shift with the elements that moved.
CLS next to the other Core Web Vitals
| Metric | Measures | Good threshold | Primary fix |
|---|---|---|---|
| LCP | Loading speed | 2.5 seconds | Speed up the largest element |
| INP | Responsiveness | 200 milliseconds | Stop blocking the main thread |
| CLS | Visual stability | 0.1 | Reserve space for everything |
CLS is usually the cheapest of the three to fix: image dimensions and sized ad slots are afternoon work, while the responsiveness metric can demand real refactoring. Our companion post on Interaction to Next Paint covers that harder half.
Where Egochi fits
Egochi audits and fixes Core Web Vitals as part of our technical SEO services: finding the shift sources, implementing the fixes above, and monitoring field data so regressions get caught early. And because stability is easiest when it is designed in, our web design services build new sites with reserved space, sized embeds, and font strategy from the first template. This site is built that way, which you can check in ten seconds with PageSpeed Insights.
Questions people ask about CLS
What is a good CLS score?
A good CLS score is 0.1 or less. Between 0.1 and 0.25 needs improvement, and above 0.25 is poor. Google measures the 75th percentile of real page loads, so 75% of your visits need to land at 0.1 or under to pass.
Does CLS affect SEO rankings?
Yes. CLS is one of the three Core Web Vitals in Google’s page experience signals, so pages that shift heavily can rank below stable competitors. Search Console reports CLS per URL group and flags the ones that need work.
How do I find what is causing layout shift?
Record a page load in the Chrome DevTools Performance panel and click the Layout Shift entries in the timeline; each one names the elements that moved and how far. Test with a cleared cache and network throttling, because fast cached loads hide the shifts real visitors see.
Do user-initiated actions count toward CLS?
No. Shifts within 500 milliseconds of a click, tap, or key press are excluded, because the user expected the page to respond. Only unexpected movement counts against the score.
Why is my CLS different in lab tools and field data?
Lab tools only watch the initial load. Field data follows real visitors through the whole session, including scrolling into lazy-loaded content and late ads. Google ranks on field data, so trust Search Console over a one-off lab run.
Do animations affect CLS?
Animations that change layout properties like width, height, top, or margin can shift surrounding content and count against CLS. Animations built on transform and opacity do not trigger layout at all, which is why they are the safe default.
