What causes CLS (Cumulative Layout Shift) and how do you fix it?

CLS measures unexpected visual shifts. A score above 0.1 hurts both UX and SEO ranking.

Common causes and fixes:

1. Images without dimensions

<!-- ❌ Browser reserves no space — content shifts when image loads -->
<img src="hero.jpg" />

<!-- ✅ Browser reserves exact space upfront -->
<img src="hero.jpg" width="1200" height="600" />

2. Dynamically injected content above existing content

• Banners, cookie notices, ads injected above page content push everything down. Fix: reserve space with a fixed-height placeholder, or inject below the fold.

3. Web fonts causing FOUT/FOIT

• Text re-renders when the web font loads, causing a shift if the metrics differ. Fix: font-display: optional or size-adjust CSS to match fallback font metrics.

4. Embeds without aspect-ratio containers

<!-- ✅ Reserve 16:9 space for video -->
<div style={{ aspectRatio: '16/9' }}>
  <iframe src="..." />
</div>

5. Animations that trigger layout

• Animating width, height, top, left triggers layout and can contribute to CLS. Fix: use transform: translate() instead.