Recipe

CLS Optimization

Eliminate layout shift and lock visual stability for every page load.

Why CLS Matters

Cumulative Layout Shift measures visual stability. A score above 0.1 triggers Core Web Vitals penalties in search rankings. Every late-loading font, ad, or image without explicit dimensions pushes users away before they read a word.

Reserve Space

<img
  src="/hero.webp"
  width={1200}
  height={630}
  alt="Hero"
  className="h-auto w-full"
/>

Always set width and height on images. The browser computes the aspect ratio and reserves the box before the asset arrives.

Font Display Strategy

// next.config.js
fonts: {
  display: 'swap',
  preload: true,
}

font-display: swap renders fallback text immediately. Preload critical font files so the swap happens in a single frame.

Ad & Embed Slots

Wrap third-party embeds in a container with a fixed aspect ratio. Even if the network stalls, the layout never jumps.

<div className="aspect-video w-full">
  <iframe src="..." className="h-full w-full" />
</div>

Verify

Run Lighthouse in incognito mode. Check the CLS score per-route in PageSpeed Insights. Target zero — every hundredth of a point is a user who bounced.

Back to Docs Next: LCP →