Cumulative Layout Shift (CLS) is a Core Web Vitals metric for visual stability. web.dev defines it as the largest burst of layout shift scores for every unexpected layout shift during the lifecycle of a page. It has no unit: the score is a number, and lower is better.
At a glance
- Measures
- largest burst of layout shift scores for unexpected shifts during the whole page lifecycle
- Data source
- Field (CrUX, PageSpeed Insights, Search Console) and lab (Lighthouse, Chrome DevTools)
- “Good” threshold
- 0.1 or less
- Assessment
- 75th percentile of page loads, mobile and desktop separately
- Core Web Vital
- Yes, one of the three Core Web Vitals
Last checked:
How is the score calculated?
Each layout shift gets a score that multiplies two values:
layout shift score = impact fraction × distance fraction
The impact fraction is the share of the viewport affected by the moving elements. The distance fraction is the greatest distance an element moved, relative to the viewport’s larger dimension. CLS takes the highest total from any “session window,” a burst of shifts with less than 1 second between shifts and at most 5 seconds in total.
What are the thresholds?
Assessed at the 75th percentile of page loads, mobile and desktop separately. Source: web.dev: Cumulative Layout Shift (CLS). Last checked: .
The measure is the 75th percentile of page loads, mobile and desktop separately.
| Metric | Measures | Core Web Vital? | Field or lab | “Good” per web.dev |
|---|---|---|---|---|
| LCP (Largest Contentful Paint) | Render time of the largest image, text block or video visible in the viewport, from the start of navigation | yes (loading) | field and lab | 2.5 s or less |
| INP (Interaction to Next Paint) | Latency of interactions across the whole visit until the next paint; one value that all (or nearly all) interactions fall below | yes (interactivity), since 2024-03-12 | field; in the lab only with simulated interactions, Lighthouse does not measure INP | 200 ms or less |
| CLS (Cumulative Layout Shift) (this term) | Largest burst of unexpected layout shifts during the entire lifecycle of the page | yes (visual stability) | field and lab | 0.1 or less |
| TTFB (Time to First Byte) | Time from the start of navigation until the first byte of the response arrives | no (helps diagnose LCP) | field and lab | 0.8 s or less |
| FCP (First Contentful Paint) | Time from the start of navigation until any part of the page's content is rendered | no (helps diagnose LCP) | field and lab | 1.8 s or less |
| TBT (Total Blocking Time) | Total time after FCP during which the main thread was blocked long enough to prevent input responsiveness | no (lab proxy for INP) | lab; web.dev does not recommend field measurement | less than 200 ms on average mobile hardware |
| Speed Index | How quickly content is visually displayed during page load (from a video of the load) | no | lab (Lighthouse) | Threshold according to Lighthouse: mobile up to 3.4 s “fast” (web.dev gives no value) |
| FID (First Input Delay), historical | Time from the first interaction until the browser can begin processing event handlers | until 2024-03-12, replaced by INP | field only | 100 ms or less |
According to web.dev, the 75th percentile of page loads is assessed, mobile and desktop separately. A page passes the Core Web Vitals when LCP, INP and CLS are “good” at the 75th percentile. Chrome tools ended FID support on September 9, 2024. Sources: web.dev: Web Vitals; web.dev: Largest Contentful Paint (LCP); web.dev: Interaction to Next Paint (INP); web.dev: Cumulative Layout Shift (CLS); web.dev: Time to First Byte (TTFB); web.dev: First Contentful Paint (FCP); web.dev: Total Blocking Time (TBT); web.dev: First Input Delay (FID); web.dev Blog: Interaction to Next Paint is officially a Core Web Vital (2024-03-12); Chrome for Developers: Lighthouse – Speed Index. Last checked: .
Which shifts count?
Shifts the user does not expect. A shift within 500 milliseconds after a click, tap or key press is treated as expected and does not count.
What causes layout shifts?
- Images without
widthandheightor anaspect-ratio. - Ads, embeds and iframes without reserved space.
- Web fonts that replace a fallback font and reflow the text.
- Content injected above existing content.
- Animations on properties such as
toporleftwheretransformwould avoid layout changes.
Example
A product page loads text first. A banner image without dimensions arrives half a second later and pushes the headline and button down by 120 pixels. Setting width and height on the image reserves the space, so nothing moves.
<img src="banner.jpg" width="1200" height="400" alt="Banner">
Common mistakes
- Lazy-loaded content without reserved space. Content that appears after the initial load, for example while scrolling, pushes the rest of the page when no space is set aside.
- Measuring only in the lab. web.dev notes that lab tools measure shifts during page load and can underreport real values. Field data shows what users experience.
Sources
Last updated: