CLS Optimisation - The Complete Technical Guide

Cumulative Layout Shift (CLS) measures visual stability — how much page content unexpectedly moves during loading or use. A high CLS score causes accidental taps on wrong elements and significant user frustration. Unlike LCP and INP, CLS is a dimensionless score calculated from the geometry of unexpected layout shifts, not a time measurement.

A score of 0 means no unexpected shifts occurred. Google classifies scores of 0.1 or below as Good, 0.1–0.25 as Needs Improvement, and above 0.25 as Poor. The ranking signal uses the 75th percentile of real user sessions.

Each layout shift is scored as: layout shift score = impact fraction x distance fraction. The impact fraction is the fraction of the viewport area affected (before + after position union). The distance fraction is how far the element moved relative to the viewport's largest dimension.

Google uses the maximum "session window" — the highest-scoring 5-second burst of layout shifts — as the reported CLS value. Layout shifts within 500ms of a user interaction (click, tap, keypress) are excluded because they are expected, intentional shifts.

The most common and highest-impact CLS fix: add explicit width and height attributes to every img and video element. Without declared dimensions, the browser allocates zero space initially. When the image loads, it pushes surrounding content down — creating a layout shift.

<!-- Before: causes shift -->
<img src="hero.jpg" alt="Hero">

<!-- After: reserves space -->
<img src="hero.jpg" alt="Hero" width="1200" height="600">

/* CSS: keeps images fluid */
img { max-width: 100%; height: auto; }

.article-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

Ads loaded asynchronously are one of the largest CLS contributors on commercial sites. Ad slots inject content after initial layout — without reserved space, the ad pushes surrounding content down when it loads.

.ad-slot {
  min-height: 250px; /* IAB medium rectangle */
  background: var(--g50); /* Optional placeholder */
}

<!-- Fixed-size iframe -->
<iframe src="..." width="560" height="315" 
        title="Video" loading="lazy"></iframe>

<!-- Responsive iframe -->
<div style="aspect-ratio: 16/9; width: 100%;">
  <iframe src="..." 
          style="width:100%;height:100%;border:0;"></iframe>
</div>

Web fonts cause CLS when the fallback font (used while the web font loads) has different metrics from the intended font. When the web font loads and replaces the fallback, the text reflows — causing a layout shift called FOUT (Flash of Unstyled Text).

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Regular.woff2') format('woff2');
  font-display: optional; /* No swap = no CLS */
}

@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 94%;
  ascent-override: 92%;
  descent-override: 24%;
}
body { font-family: 'Inter', 'Inter Fallback', sans-serif; }

Cookie consent banners, newsletter bars, notification popups, and promotional banners injected above content after load are major CLS sources on publisher and e-commerce sites.

.cookie-banner {
  position: fixed;
  bottom: 0;  /* Expands into empty space */
  left: 0;
  right: 0;
  z-index: 100;
  /* Zero CLS — does not shift existing content */
}

<!-- Reserve space in initial HTML for known banner -->
<div class="banner-slot" style="min-height:56px;" 
     aria-hidden="true"></div>

Animating layout properties (top, left, width, height, margin, padding) forces layout recalculation and causes shifts. Use only compositor-only properties (transform, opacity) for animations.

/* Bad: triggers layout */
@keyframes slideIn {
  from { left: -100px; }
  to { left: 0; }
}

/* Good: compositor-only, no CLS */
@keyframes slideIn {
  from { transform: translateX(-100px); }
  to { transform: translateX(0); }
}

Authentic Sources