Cumulative Layout Shift (CLS)

Definition

Cumulative Layout Shift (CLS) is a Core Web Vital that quantifies the visual instability of a page — specifically, how much visible content moves unexpectedly during and after page load, before user input. CLS is a score (not a time measurement), calculated as the sum of individual layout shift scores for all unexpected layout shifts that occur during the page\'s lifetime. Each layout shift score is the fraction of the viewport moved multiplied by the distance ratio of the shifted element. The score accumulates across the page session. **Thresholds (p75 from CrUX):** Good: ≤0.1; Needs Improvement: 0.1–0.25; Poor: >0.25. Common CLS causes: (1) Images without explicit `width` and `height` attributes — the browser can\'t reserve space for the image before it loads, so when it renders, surrounding content shifts down. Fix: always include explicit width/height on img elements (or use CSS aspect-ratio). (2) Web fonts causing FOUT (Flash of Unstyled Text) — text rendered in the fallback font shifts when the web font loads because metrics differ. Fix: `font-display: optional` or `font-display: swap` with `size-adjust` to match fallback metrics. (3) Dynamically injected content — ads, banners, cookie consent notices, chat widgets inserted above existing content after initial render. Fix: pre-allocate space with explicit height for dynamic elements. (4) CSS animations that affect layout properties (height, margin, padding) rather than transform/opacity (which are compositor-only and don\'t cause CLS).

Why it matters for SEO

CLS directly affects user experience: content that shifts while being read causes users to lose their place or accidentally click on the wrong element (e.g., a button that shifts under a tap). Google incorporated CLS into the Page Experience ranking signal in 2021. Of the three Core Web Vitals, CLS is often the most fixable at low cost — adding explicit dimensions to images and removing above-content ad injection are both straightforward fixes that can take CLS from Poor to Good without significant architectural changes.

How DeepSEOAnalysis checks this

DeepSEOAnalysis surfaces CLS from CrUX field data (p75 score, 28-day window) at URL level. The audit also checks technical CLS risk signals: whether img elements in the initial HTML have explicit width and height attributes (absence is the most common CLS cause), whether any above-fold resources (fonts, scripts) are loaded in a way likely to cause layout shifts before first user interaction.