How to Fix Cumulative Layout Shift (CLS > 0.1)

CLS is the cheapest Core Web Vital to fix

If your Page Speed Grader report shows cls: 0.18 or higher, you've got a fixable problem. Cumulative Layout Shift is almost always caused by four specific things, and each one has a deterministic fix that doesn't require a full rebuild or a JavaScript refactor.

This post is the order in which to fix them. Start at the top; most sites are clean by the time they get to step 3.

What CLS measures

CLS is the sum of every layout shift that happens during page load, weighted by the size of the shift and the proportion of the viewport affected. The three thresholds:

• Pass: CLS ≤ 0.1
• Needs improvement: 0.1 to 0.25
• Fail: CLS > 0.25

A page at 0.25 has visible content jumping multiple times during load. A page at 0.1 has a noticeable but minor shift. A page at 0.05 feels stable.

CLS only counts shifts that happen without user input. Clicking a "Show more" button that expands content is not a layout shift in the CLS sense — that's user-initiated. The shifts that count are the involuntary ones: text reflowing when a font swaps, images pushing content down when they finally load, ads injecting themselves below the fold.

Fix 1: Images without explicit dimensions

The single largest source of CLS on real sites: <img> tags without width and height attributes. The browser doesn't know how much space to reserve, so it lays out the page assuming zero space, then jolts everything down when the image arrives.

<!-- Bad: browser reserves no space until the image loads -->
<img src="/hero.jpg" alt="...">
 
<!-- Good: browser reserves the right aspect ratio immediately -->
<img src="/hero.jpg"