How to Fix Cumulative Layout Shift (CLS): A Complete Guide

What is Cumulative Layout Shift?

Cumulative Layout Shift (CLS) measures how much the visible content of a page moves unexpectedly during loading. A CLS score of 0.1 or below is considered good by Google. Anything above 0.25 is poor.

Layout shifts happen when an element that has already been painted moves because something loads after it — an image without dimensions, a late-loading font, an injected banner, or an ad slot that expands.

How to find what is causing your CLS

Before fixing anything, identify which elements are shifting.

Open Chrome DevTools, go to the Performance tab, and record a page load. Look for the pink "Layout Shift" markers in the timeline. Click one and you will see exactly which element moved, how far it moved, and what caused it.

Alternatively, run your URL in PageSpeed Insights. The Diagnostics section shows "Avoid large layout shifts" with a list of the specific elements contributing to your score.

The most common CLS causes and fixes

1. Images without width and height attributes

This is the most common cause. When the browser encounters an image without dimensions, it reserves no space for it. When the image loads, everything below it shifts down.

Fix:

```html

```

Modern CSS uses the width and height attributes to calculate the aspect ratio in advance. The browser reserves exactly the right space before the image downloads.

If you cannot set fixed dimensions, use the aspect-ratio CSS property:

```css

img {

aspect-ratio: 16 / 9;

width: 100%;

}

```

2. Ads and embeds without reserved space

Ad slots that inject content dynamically are a leading cause of CLS. The ad network does not know the ad size until it loads, so it pushes content down.

Fix:

3. Web fonts causing text reflow

When a custom font loads after the browser has already rendered text in a fallback font, the text reflows if the two fonts have different metrics. This causes the surrounding layout to shift.

Fix:

4. Dynamically injected content

Cookie banners, chat widgets, newsletter pop-ins, and promotional bars that appear above existing content cause layout shifts.

Fix:

5. Animations and transitions that affect layout

CSS animations that change properties like top, left, width, or height trigger layout shifts. Transitions on margin or padding do the same.

Fix:

How CLS is scored

CLS is not just the total shift distance. It is calculated as the fraction of the viewport that shifted multiplied by the distance the element moved as a fraction of the viewport height. A large element that shifts a small distance scores the same as a small element that shifts far.

The score accumulates across all layout shifts during the page lifetime, excluding shifts that happen within 500ms of a user interaction (taps, clicks, scrolls).

Measuring your CLS score

Run a free check with Loadzen to see your current CLS score alongside LCP and INP. The results show your score, the threshold you need to hit, and which specific issues are contributing.

Google Search Console's Core Web Vitals report shows field CLS from real users — this is the data that feeds into Google's ranking signals.