Core Web Vitals CLS.
Cumulative Layout Shift sums the weighted layout shifts across the page session, weighting each shift by its impact fraction (how much of the viewport moved) and its distance fraction (how far). The good threshold is 0.1. The fix pattern is consistent across causes: reserve layout space at render time so the load-time arrival of the asset does not reflow.
CLS work is one of the cleanest entry points to natural SEO strategy on a technical foundation that is mostly intact. The diagnostic surfaces precise causes, and the fix patterns are well understood.
0.1 good, 0.25 needs-improvement, above 0.25 poor.
Cumulative Layout Shift is a unitless number summed across the page session. Each individual layout shift contributes its impact fraction multiplied by its distance fraction. Impact fraction is the share of the viewport affected by the shift; distance fraction is how far the largest moved element traveled relative to the viewport. The product captures both magnitude and visibility.
The threshold bands at the 75th percentile of field data: 0.1 or under sits in good, between 0.1 and 0.25 in needs-improvement, above 0.25 in poor. Mobile templates frequently land in needs-improvement on the same site whose desktop template clears 0.1, because mobile carries denser advertising templates and more dynamically-injected content above the reading column.
The metric runs across the entire page session in the original definition. The 2021 revision shifted to a session-window approach: only the shifts within a five-second window of recent activity sum into the score, and the largest window across the session becomes the reported value. This change reduced false-positive penalties on long-scrolling pages where total accumulated shift was high but the per-window experience stayed clean.
Un-sized media, late-injected content, web font swap.
Un-sized media is the most common cause and the cleanest fix. Image and video elements without explicit width and height attributes leave the browser unable to reserve box dimensions before the asset loads. When the asset arrives and the intrinsic size is known, the layout reflows around the element. The fix is the historic HTML attribute pair: width="800" height="600" on every image element, paired with CSS rules that preserve the aspect ratio at any rendered size.
Late-injected content above existing content is the second cause. Advertising containers, embedded videos, social widgets, cookie consent banners, and personalization modals that inject themselves into the DOM after initial render push existing content downward. The fix is fixed-height container reservations: the slot reserves its space at render time whether the injected content arrives or not. Empty reserved containers are preferable to reflowing layouts.
Web font swap is the third cause and the most subtle. A fallback system font renders first; when the brand web font finishes loading, the glyph metrics differ and the line lengths shift, triggering a layout shift across every paragraph the new font replaces. The fix pattern uses font-display swap with the size-adjust descriptor to match fallback metrics to the web font, plus preload directives that load the font before initial render where the page can afford the network cost.
The Page Experience signal layer in full, including the ranking-weight notes.
The two adjacent Vitals inside the composite score the Page Experience signal reads.
How the CLS diagnostic integrates into the broader organic SEO program.
What operators ask about Cumulative Layout Shift before the engineering work starts.
- 01.What CLS value counts as good?
- Cumulative Layout Shift at 0.1 or under is good. Between 0.1 and 0.25 sits needs-improvement. Above 0.25 is poor. The 75th-percentile threshold applies, so the URL must hold at or under 0.1 for three quarters of real-user sessions to clear the bucket. Pages that pass on desktop and fail on mobile are common, since mobile templates lean harder on dynamically-injected content.
- 02.What causes most CLS failures?
- Three patterns account for the majority of CLS failures. First, media elements without explicit width and height attributes, which force the browser to reflow once the asset loads and the intrinsic size is known. Second, late-injected content above existing content: advertising containers, embeds, social widgets, cookie consent banners that push the page down after the user has begun reading. Third, web font loading without a swap discipline, where Flash of Invisible Text or Flash of Unstyled Text triggers a layout shift when the font swaps to the rendered glyph metrics.
- 03.How does layout reservation fix CLS?
- Layout reservation means telling the browser how much space an element will occupy before the asset that defines its size has loaded. For images and video, width and height attributes (or the equivalent CSS aspect-ratio) reserve the box. For advertising containers, fixed minimum heights at the container level reserve space whether the ad fills or not. For fonts, the font-display strategy and font-size-adjust property limit the metric swap. The pattern is consistent: reserve at render time so the load-time arrival of the asset does not reflow.
- 04.Does an interaction-triggered shift count?
- Layout shifts within 500 milliseconds of a user interaction are excluded from the CLS measurement. The metric specifically targets unexpected shifts. A user clicking an accordion to expand it does not count against CLS; a banner injection that pushes content down 800 milliseconds after the page loads does. The web-vitals library exposes the per-shift detail so the engineering team can confirm which shifts the metric is attributing to user-triggered events versus involuntary reflow.
If you want CLS handled as a load-bearing technical layer rather than a Lighthouse number, see how we work.
Two-week diagnostic. The CLS work sits inside the broader technical foundation, alongside rendering parity, crawl budget, and the schema architecture that carries the entity signal.