CLS (Cumulative Layout Shift)

What is CLS?

CLS stands for Cumulative Layout Shift. It measures how much visible content moves unexpectedly during page load. High CLS creates frustrating experiences – like clicking a button just as it moves and hitting the wrong thing.

Why CLS Matters

Layout shifts are jarring. They:

• Cause accidental clicks
• Make content hard to read
• Create a sense of instability
• Frustrate users

Google uses CLS as a ranking factor.

CLS Targets

• Good: ≤ 0.1
• Needs Improvement: 0.1-0.25
• Poor: > 0.25

CLS is a score, not a time measurement.

Common CLS Causes

Images Without Dimensions

Browser doesn't know how much space to reserve until the image loads.

Ads and Embeds

Dynamically injected content pushes other content around.

Web Fonts

Text reflows when custom fonts load (Flash of Unstyled Text).

Dynamically Injected Content

Banners, notifications, or content inserted after initial load.

Lazy-Loaded Content

Content loading above the current viewport.

Fixing CLS Issues

Reserve Space for Images

Always include width and height attributes on images.

<img src="photo.jpg" width="800" height="600" alt="...">

Or use CSS aspect-ratio.

Reserve Space for Ads

Use placeholder containers with fixed dimensions.

Preload Fonts

Load fonts early to reduce flash.

Avoid Inserting Content Above Existing Content

Add new content below or use overlays.

Use Transform Animations

CSS transforms don't cause layout shifts (unlike changing position/size).

Testing CLS

• PageSpeed Insights
• Lighthouse
• Chrome DevTools Performance panel
• Web Vitals Chrome extension

CLS issues are often the easiest Core Web Vital to fix – most solutions are straightforward HTML/CSS changes.