Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS) measures the largest burst of unexpected layout shifts during a page's lifetime. Each shift contributes a layout-shift score equal to the impact fraction times the distance fraction, and the Layout Instability API reports those entries. To avoid penalising long-lived pages, CLS is the maximum sum within a session window of shifts rather than a running total, which is why a stable page that occasionally moves can still score low.
What this means
CLS quantifies how much visible content moves without a user action. Each unexpected shift gets a layout-shift score; CLS is the largest sum of those scores within a single session window of shifts, not the total across the whole visit, so a long page is not punished for many small unrelated moves.
How the score is built
A single shift's score is the impact fraction (how much of the viewport the unstable element moved through) multiplied by the distance fraction (how far it moved relative to the viewport). The Layout Instability API exposes these as layout-shift entries, excluding shifts that follow recent user input.
- Shift score = impact fraction × distance fraction
- CLS = largest windowed sum of shift scores
- User-initiated shifts within ~500ms are excluded
Why it misleads
CLS only counts unexpected movement, so it can look fine in a fast lab run yet spike in the field when ads or A/B tests inject content. Reserving space with width and height attributes or CSS aspect-ratio prevents the shifts the metric is designed to catch.
How it appears in analytics and logs
A high CLS means visible content moved unexpectedly — usually images or ads without reserved space, late-injected banners, or web fonts that reflow text after load.
Diagnostic use case
Use CLS to catch content that jumps as images, ads, or fonts load, since unexpected movement causes misclicks and a sense of instability even when timing metrics look good.
What WebmasterID can help detect
WebmasterID can capture layout-shift timing as a first-party event so CLS is read against human-classified sessions and not inflated by automated renders.
Common mistakes
- Loading images without dimensions, causing reflow shifts.
- Reading CLS as a simple total rather than a windowed maximum.
- Testing only in the lab where ad and font shifts do not occur.
Privacy and accuracy notes
CLS is a visual-stability score from the browser, not an identifier. This is educational material, not legal advice.
Related pages
- Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP) reports the render time of the largest image or text block visible in the viewport, measured from when the page starts loading. It is one of Google's Core Web Vitals, exposed through the Largest Contentful Paint API, and the candidate element can change as larger content paints — the final value is taken at the last candidate before user interaction. web.dev breaks LCP into TTFB, resource load delay, load duration, and render delay to localise the bottleneck.
- Interaction to Next Paint (INP)
Interaction to Next Paint (INP) measures a page's responsiveness by observing the latency of every click, tap, and key press during a visit and reporting a representative high value — close to the worst. Latency spans from the input to the next frame the browser paints. INP became a Core Web Vital in March 2024, replacing First Input Delay, because it captures the full processing-plus-render cost across all interactions, not just the delay of the first one.
- First Contentful Paint (FCP)
First Contentful Paint (FCP) measures the time from navigation start to when the browser first renders any DOM content — text, an image, a non-white canvas, or SVG. The Paint Timing API exposes it as the first-contentful-paint entry, and web.dev treats it as the moment a visitor first sees that something is happening. It precedes Largest Contentful Paint, which marks the largest element, so the two answer different questions about perceived load.
- Website observability
Visual-stability signals beside traffic.
Sources and verification notes
Last reviewed 2026-06-24. Facts are checked against primary/official sources where available; uncertain specifics are marked “Data not yet verified” rather than guessed.