What Is Cumulative Layout Shift (CLS)?
Cumulative Layout Shift (CLS) is a Core Web Vital that measures visual stability — how much the page layout unexpectedly shifts during loading. If you have ever been reading a page and the text suddenly jumps because an image loaded above it, or you tried to click a button and it moved because an ad appeared, you have experienced layout shift.
CLS quantifies this frustration with a score. It measures the sum of all unexpected layout shifts that occur during the page's lifetime. Lower is better — a CLS of 0 means nothing moved.
What Is a Good CLS Score?
| CLS Score | Rating | User Experience |
|---|---|---|
| 0 - 0.1 | Good | Page is visually stable, content does not jump |
| 0.1 - 0.25 | Needs Improvement | Some visible shifting, can be annoying |
| Over 0.25 | Poor | Significant jumping, users may misclick or lose their place |
What Causes Layout Shifts?
Images without dimensions
When an <img> tag does not have width and height attributes, the browser does not know how much space to reserve. When the image loads, it pushes everything below it down. This is the most common cause of CLS. Check with the image dimensions checker.
Ads, embeds, and iframes
Third-party content that loads asynchronously and inserts itself into the page causes shifts. Ad slots are a major offender — if the ad takes time to load, the content below shifts when it appears.
Dynamically injected content
Content inserted above existing content without user interaction — cookie banners that push the page down, notification bars, promotional banners that load late.
Web fonts causing FOIT/FOUT
When a custom font loads and replaces the fallback font, text may reflow because the fonts have different sizes. This is called Flash of Invisible Text (FOIT) or Flash of Unstyled Text (FOUT).
CSS loading late
If stylesheets load after the page content, the page may render unstyled first and then shift when styles are applied.
How to Fix CLS
1. Always set image dimensions
Add width and height attributes to every <img> and <video> element. Modern browsers use these to calculate the aspect ratio and reserve space before the image loads.
<img src="photo.jpg" width="800" height="600" alt="Description">
Combine with CSS: img { max-width: 100%; height: auto; } for responsive images that still reserve space.
2. Reserve space for ads and embeds
Use CSS min-height on ad containers so the space is reserved even before the ad loads. If you know the ad is 250px tall, set min-height: 250px on the container.
3. Never insert content above existing content
If you need to show a banner or notification, overlay it on top of the page (fixed/sticky positioning) rather than inserting it into the document flow and pushing content down.
4. Use font-display: swap
Add font-display: swap to your @font-face rules so the browser shows the fallback font immediately and swaps to the custom font when it loads. This prevents invisible text but may cause a small reflow — use size-adjust in the fallback font to minimise it.
5. Preload critical resources
Preload fonts, hero images, and critical CSS so they are available before they are needed, reducing the chance of late-loading shifts.
6. Use CSS aspect-ratio
For responsive containers, use the CSS aspect-ratio property to maintain proportions: aspect-ratio: 16 / 9;
Check your CLS score and find images missing dimensions with a free RankNibbler audit. The Performance tab shows your CLS score, and the Accessibility tab flags images without width/height attributes.
Last updated: March 2026