How CLS is calculated
A layout-shift event scores the impact of an element moving unexpectedly. Two factors go into it:
- Impact fraction — how much of the viewport the moving element affected.
- Distance fraction — how far, relative to the viewport, the element moved.
A single event scores impact fraction × distance fraction. CLS sums the largest shift scores over the page's lifetime, with a windowing rule so long-lived pages aren't penalised unfairly.
A common way CLS happens:
- The page renders some text.
- An image without an explicit width and height loads and pushes the text down.
- The text's box moves, the shift was unexpected (no user input), and the score adds up.
Common sources of CLS
Most CLS on a typical ecommerce or marketing page comes from:
- Chat widgets injected without reserved space
- Lazy-loaded images without explicit width and height
- Web fonts swapping in after first paint
- Cookie-consent overlays that push content down
- Auto-injected ads or third-party iframes
- Accordion expansions without a minimum height
- Skeleton placeholders that don't match the real content's size
Why aim for zero, not just under 0.1?
Google's "good" threshold is 0.1 at the 75th percentile, but Yokaify's discipline is to hold every Lighthouse-tested page at 0.0. The reason: the March 2026 site-wide CWV update made aggregate layout shift a domain-level ranking signal. A single page at 0.09 technically passes, but across hundreds of such pages the total frustrates visitors and drags ranking down. Banning shifts outright is simpler than arguing case by case about which ones are acceptable.
Animations vs layout shifts
Animations built on transform and opacity don't cause layout shift: the painted pixels move but the layout boxes don't. Animations that change top, left, width, height, margin, or padding do shift the layout, because they move the boxes themselves.
How it differs from related metrics
- LCP (Largest Contentful Paint): when the largest element finished rendering. The loading metric.
- INP (Interaction to Next Paint): how quickly the page responds to interaction. The interactivity metric.
- TBT (Total Blocking Time): how long the main thread was blocked. A lab metric, not field-measurable.
CLS is the visual-stability metric; together with LCP and INP it makes up the Core Web Vitals score.
Related terms
- Core Web Vitals — the broader metric category CLS belongs to
- Banner blindness — a UX issue adjacent to layout shift
See also
- The zero-CLS implementation playbook — the implementation playbook
- Site-wide CWV scoring (March 2026) — why CLS became a domain signal
- Frontend performance reference for stores — the full CWV playbook
Last updated May 31, 2026. Thresholds and methodology from web.dev and the Chrome User Experience Report; Yokaify's discipline is tighter than Google's "good" threshold.