CLS captures the sum of all unexpected layout shifts that occur while a page is loading. A layout shift happens when a visible element moves from its initial rendered position — for example, an image loads without reserved dimensions and pushes text down, or an ad appears and displaces the content the user was reading.
Thresholds (Google):
Good: CLS ≤ 0.1
Needs improvement: 0.1–0.25
Poor: CLS > 0.25
Common causes:
- Images and videos without explicit
widthandheightattributes - Ads or iframes injected after the page has rendered
- Web fonts causing text to reflow when loaded (FOIT / FOUT)
- Dynamically injected content above existing content
Fix: Always set explicit dimensions on images and video elements. Reserve space for ads and dynamic content. Use font-display: optional or font-display: swap combined with preloading to minimise font-related shifts.