Glossary
CLS (Cumulative Layout Shift)
CLS measures how much the visible content of a page shifts unexpectedly during load. It's one of Google's three Core Web Vitals.
Cumulative Layout Shift (CLS) measures the largest burst of unexpected layout shifts that occur during the lifespan of a page. The metric is unitless: it's the product of impact fraction (how much of the viewport shifted) and distance fraction (how far it moved).
Google's threshold: CLS under 0.1 is 'good', 0.1–0.25 is 'needs improvement', over 0.25 is 'poor'. CLS specifically penalizes shifts that aren't caused by user input — clicking a 'load more' button is fine, but a hero image pushing the headline down when it loads is not.
Common CLS failures: images without explicit dimensions (the browser doesn't know how much space to reserve), ads or embeds inserted after page load (Google Ads, YouTube embeds, custom HTML widgets), web fonts loading after fallback text (FOIT/FOUT shifting content), and dynamically-inserted banners ('subscribe to our newsletter' that appears 2s in).
Fixes: always include width + height attributes (or aspect-ratio CSS) on images, videos, and iframes; reserve fixed space for ads and embeds before they load; use font-display: optional or preload critical fonts to avoid font shift; insert dynamic banners outside the main content flow (overlays, not insertions); and audit any third-party script that injects DOM after page load.
CLS is the easiest Core Web Vital to fix and the hardest to keep fixed in a marketing-heavy site. Every new ad unit, every new embed, every new content widget threatens to introduce CLS. Most teams run CLS regression checks in CI to catch shifts before deploy.
Example
A blog post whose hero image lacks width/height attributes causes a 0.34 CLS burst as the image loads and pushes the text down. Adding the dimensions (or aspect-ratio: 16/9 in CSS) drops CLS to 0.02.