CLS measures unexpected layout shifts—when visible elements move around as the page loads. It's the easiest Core Web Vital to pass: 79% of mobile sites achieve good CLS compared to 59% for LCP.

But "easiest" doesn't mean unimportant. Layout shifts destroy trust. When users click a button and hit an ad instead, or lose their reading position because a banner appeared, they leave.

Redbus reduced CLS from 1.65 to 0 and saw 80-100% higher mobile conversion rates. Visual stability directly impacts revenue.

What is CLS?

Cumulative Layout Shift tracks how much visible content moves unexpectedly. The score is calculated by multiplying two fractions for each shift:

Impact Fraction × Distance Fraction = Layout Shift Score

• Impact fraction: Percentage of viewport affected by the shift
• Distance fraction: Distance elements moved relative to viewport

A small image shifting 50px causes less CLS than a large banner shifting 200px.

CLS Thresholds:

Score Weight: CLS accounts for 25% of your Lighthouse Performance score—tied with LCP for the largest weight.

How CLS is measured: Since April 2021, CLS uses a "session window" approach. It captures the maximum burst of layout shifts with a 1-second gap and 5-second cap. This makes CLS more fair for long-lived pages and SPAs.

User-initiated shifts are excluded: Layout shifts within 500ms of discrete user input (clicks, taps, keypresses) don't count. Scroll and pinch gestures don't trigger this exclusion—those are continuous inputs.

→ Full CLS definition

Why CLS Matters

User Experience

Layout shifts cause users to:

• Click the wrong button or link (the infamous "misclick")
• Lose their place while reading
• Accidentally trigger unwanted actions like purchases
• Perceive the site as broken or low-quality

The frustration is visceral. Users don't think "this page has poor CLS"—they think "this site is garbage."

SEO Impact

CLS is one of Google's Core Web Vitals ranking factors. Sites with good CLS can rank higher than competitors with poor CLS, especially for "Top Stories" carousel eligibility.

Google uses field data from the 75th percentile—meaning 75% of your users need good CLS for it to count as "good" for ranking purposes.

Business Impact

The pattern is clear: visual stability correlates with engagement and conversion.

Common CLS Issues

Lighthouse identifies these root causes for layout shifts:

The audit tracks up to 15 layout shifts and shows the element that shifted most for each event, along with the root cause (unsized media, web font loaded, or injected iframe).

→ All CLS issues and fixes

Try It: Layout Shift Playground

Trigger common layout shifts and see how they affect the CLS score:

How to Measure CLS

Lab Testing (Development)

Lab tests give you controlled, reproducible results—but they capture only shifts during page load, not during longer sessions.

Chrome DevTools:

1. Open DevTools → Performance tab
2. Click record → reload page → stop recording
3. Look for pink "Layout Shift" entries in the timeline
4. Click to see which elements shifted and by how much

Lighthouse: Run an audit and check the CLS metric. The "Avoid large layout shifts" diagnostic shows the top shifting elements with their root causes.

Console snippet:

new PerformanceObserver((l) => {
  l.getEntries().forEach((e) => {
    console.log('CLS:', e.value, e.sources)
  })
}).observe({ type: 'layout-shift', buffered: true })

This logs each shift with its source element—useful for catching shifts in real-time during development.

Field Data (Real Users)

Field data captures shifts throughout the user session, not just initial load.

PageSpeed Insights: Shows CrUX data for your URL—the same data Google uses for ranking.

Google Search Console: Core Web Vitals report groups URLs by CLS status.

Web Vitals Chrome Extension: Shows CLS in real-time and highlights shifting elements with red overlays.

Web Vitals JavaScript Library:

import { onCLS } from 'web-vitals'

onCLS((metric) => {
  console.log('CLS:', metric.value)
  console.log('Entries:', metric.entries)
})

Lab vs Field CLS

Important: Lab CLS can be artificially lower than field CLS because:

• Lab tests end at "page load" while field data captures shifts throughout the session
• Ads and third-party content may load differently in lab conditions
• User interactions in the field can trigger shifts that lab tests miss

Always verify with real user data. If field CLS is worse than lab, you have shifts happening after initial load—likely from ads, lazy-loaded content, or user interactions.

CLS Progress Over Time

CLS has improved significantly across the web:

Source: HTTP Archive Web Almanac 2024

Mobile sites actually outperform desktop on CLS—likely due to simpler layouts and fewer ads. Desktop pages tend to have more complex layouts with sidebars, multi-column content, and ad placements that shift.

Framework Guides

Framework-specific CLS fixes:

Test Your Entire Site

Most tools only test one page at a time. Your homepage might pass CLS while your blog template has unsized images causing shifts on every post.

Unlighthouse scans your entire site and shows CLS scores for every page. The CLI is free and runs locally. Cloud adds scheduled monitoring to catch regressions before users do.

Related

• Core Web Vitals Overview
• All CLS Issues & Fixes
• Fix LCP
• Fix INP
• CLS Definition