Cumulative Layout Shift sources identified and fixed

Cumulative Layout Shift (CLS) above 0.1 means content visibly jumps while the user is reading or interacting — a failing Core Web Vitals score (ISO-25010 time-behaviour). The most common causes are images loading without declared dimensions (the browser reserves no space until the image arrives), late-injected ads that push content down, and font swaps that change line heights. A CLS above 0.25 causes accidental taps on the wrong element and is correlated with significantly higher bounce rates. Google uses CLS as a search ranking signal.

Declare explicit dimensions on every image and reserve space for dynamic content before it loads. Fix the three most common CLS sources:

1. Set width and height on images so the browser reserves space:

// src/components/hero.tsx
<Image src="/hero.jpg" alt="Hero" width={1200} height={600} />
// or with plain img:
<img src="/hero.jpg" alt="Hero" style={{ aspectRatio: '2/1', width: '100%' }} />

2. Reserve space for ad or embed containers:

<div style="min-height: 250px; min-width: 300px;"><!-- Ad slot --></div>

3. Set font-display: swap on all @font-face rules (see ab-002009) so font loading does not reflow text. Verify CLS in Chrome DevTools Performance tab — the Layout Shift rows in the experience lane identify every shift event with its contributing elements.