Cumulative Layout Shift (CLS)
Measures how much page elements move around while loading.
CLS aggregates layout shift scores for unexpected movement during the session lifetime measurement window. Ads, web fonts, images without reserved space, and late-inserted iframes shove content users were about to click. Unlike LCP, CLS is not about speed—it is about stability.
Why developers care
High CLS produces mis-clicks, form errors, and accessibility failures. It’s a Core Web Vital, so it affects search visibility where field data is poor. Fixes are often free: explicit width/height (or aspect-ratio) on media, skeleton placeholders for async regions, and reserving space for embeds before they load.
Example
<!-- Reserve space so the browser can paint layout before bytes arrive -->
<img src="/photo.jpg" alt="" width="800" height="600">
<iframe src="https://..." width="560" height="315" title="..."></iframe>