CLS (Cumulative Layout Shift)

Cumulative Layout Shift (CLS) is a Core Web Vital metric that measures the visual stability of a web page. It quantifies how much visible content shifts unexpectedly during session windows (typically the user’s browsing session), helping developers identify and fix jarring user experiences.

What It Measures

CLS captures the sum of all individual layout shift scores for unexpected layout shifts that occur during session windows (typically the user’s browsing session, not necessarily the entire page lifecycle). A layout shift occurs when a visible element changes its position from one frame to the next.

Scoring

• Good: CLS < 0.1
• Needs Improvement: 0.1 ≤ CLS ≤ 0.25
• Poor: CLS > 0.25

Common Causes

• Images without dimensions
• Ads, embeds, and iframes without reserved space
• Dynamically injected content
• Web fonts causing FOIT/FOUT
• Actions waiting for network response before updating DOM

Impact on User Experience

High CLS scores lead to:

• Accidental clicks on wrong elements
• Lost reading position
• Frustration and confusion
• Perceived poor quality of the website

How to Improve CLS

1. Reserve Space: Always include size attributes on images and video elements
   • Alternatively, use CSS aspect-ratio to reserve space when intrinsic sizes aren’t available
2. Static Containers: Pre-allocate space for ads and dynamic content
3. Font Loading: Use font-display: optional or preload critical fonts
4. Animations: Prefer transform animations over properties that trigger layout
5. Avoid DOM Insertions: Don’t insert content above existing content except in response to user interaction

Measurement Tools

• Chrome DevTools Performance panel
• Lighthouse
• PageSpeed Insights
• Chrome User Experience Report
• Web Vitals JavaScript library

Related Patterns

When implementing UI patterns, consider their impact on CLS:

• Pagination - Ensure smooth transitions between pages
• Infinite Scroll - Prevent layout shifts when loading new content
• Load More - Reserve space for loading indicators

Learn More

Understanding and optimizing CLS is crucial for creating stable, user-friendly interfaces that don’t frustrate users with unexpected movement.