CLS is configured to stay under 0.1

Cumulative Layout Shift above 0.1 — Google's 'needs improvement' threshold under ISO-25010 time-behaviour — causes visible content jumps that erode user trust and trigger accidental clicks. A hero image without explicit dimensions reserves no space in the layout; when it loads, everything below it shifts down. A cookie consent bar using position: relative shoves the page body down every time it appears. Beyond user frustration, high CLS is a Core Web Vitals failure that degrades page experience scores in Google Search and can reduce organic rankings for the affected URL. Marketing pages built with AI tools are especially prone to this — image dimensions are frequently omitted and cookie banners are injected as afterthoughts.

Fix each CLS source independently — every <img> tag needs explicit dimensions, every font needs font-display: swap, and every notification bar needs fixed positioning so it overlays rather than shifts content.

// 1. Dimensions on every image
<img src="/feature.webp" width={600} height={400} alt="Feature" />

// 2. Font loading in globals.css
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap; /* show fallback immediately, swap when loaded */
}

// 3. Cookie banner — fixed so it never shifts body content
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
}

For Next.js, use next/font instead of @font-face — it handles font-display: swap and self-hosting automatically.