Cumulative Layout Shift (CLS) measures how much visible content unexpectedly moves around the page during loading. It is one of the three Core Web Vitals and quantifies visual stability.
CLS is calculated as the sum of all unexpected layout shift scores during the page lifecycle, where each shift is the impact fraction multiplied by the distance fraction. It is unitless. Good is under 0.1, poor is over 0.25.
Common causes: images and ads loaded without explicit width and height, web fonts swapping in (FOIT/FOUT) and reflowing text, dynamically injected banners pushing content down, and third-party widgets that load asynchronously above the fold.
Layout shift is one of the most user-hated experiences on the web — it causes mis-clicks and lost form input. Fixing CLS typically means reserving space for media (width/height attributes, aspect-ratio CSS) and using `font-display: optional` for web fonts.
See it in the product: Performance monitoring.