How to Fix CLS (Cumulative Layout Shift) — Stop Layout Jank

Cumulative Layout Shift (CLS) measures visual stability — how much the page layout shifts unexpectedly while the user is viewing it. A good CLS score is below 0.1. Poor CLS (>0.25) means elements are jumping around, causing accidental clicks and a frustrating experience.

CLS is the most common Core Web Vital failure. Over 50% of sites fail the CLS threshold.

Always include width and height attributes on images:

<img src="/photo.webp" alt="..." width="800" height="450" loading="lazy" />

Or use CSS aspect-ratio:

.hero-image {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

This lets the browser reserve space before the image loads, eliminating shift entirely.

Prevent invisible text (FOIT) and minimize text reflow with font-display:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter.woff2') format('woff2');
  font-display: swap;
  font-weight: 400;
}

Even better, preload your primary font:

<link rel="preload" href="/fonts/Inter.woff2" as="font" type="font/woff2" crossorigin />

For ads, banners, or lazy-loaded sections, use CSS min-height to reserve the space:

.ad-slot {
  min-height: 250px; /* leaderboard ad */
  background: var(--bg-secondary);
}

.cookie-banner {
  position: fixed; /* doesn't push content */
  bottom: 0;
}

Never insert content above existing content in the DOM.