📐CLS Deep Dive: Eliminating Cumulative Layout Shift

Why your layout shifts, how to measure CLS using DevTools and field data, and the specific code patterns that cause — and fix — layout instability.

Hugo Team·August 12, 2026

CLScumulative layout shiftlayout shiftcore web vitalsvisual stabilityperformance

Cumulative Layout Shift (CLS) measures the visual stability of your page — how much page elements unexpectedly move during load. A high CLS score means users are clicking the wrong things because buttons and text jump around. Google began using CLS as a ranking factor in 2021.

Cumulative Layout Shift (CLS) (score)

Good

< 0.1

Warning

0.1–0.25

Poor

> 0.25

A unitless score computed from the fraction of the viewport affected × the distance elements moved. Sum of all unexpected layout shifts during the page's lifetime.

Top Causes of CLS

Images without explicit width/height attributes (browser doesn't reserve space)
Ads, embeds, or iframes without reserved dimensions
Dynamically injected content above existing content (cookie banners, banners)
Web fonts causing FOUT (Flash of Unstyled Text) that shifts surrounding text
Animations that alter layout properties (width, height, top, left, margin, padding)

Fix 1: Always Specify Image Dimensions

html

<!-- Bad: browser doesn't know how tall this will be -->
<img src="photo.jpg" alt="Description">

<!-- Good: browser reserves 600×400 space before image loads -->
<img src="photo.jpg" alt="Description" width="600" height="400">

Fix 2: Reserve Space for Ads and Embeds

css

.ad-container {
  min-height: 250px; /* Reserve the standard ad unit height */
  width: 100%;
}

Fix 3: Use CSS Transform for Animations

Layout properties (width, height, margin, padding, top, left) trigger layout recalculation and contribute to CLS. Use transform and opacity instead — they run on the compositor thread and don't cause layout shifts.

css

/* Bad: triggers layout shift */
.element { margin-top: 0; transition: margin-top 0.3s; }
.element:hover { margin-top: -10px; }

/* Good: compositor-only, no layout shift */
.element { transform: translateY(0); transition: transform 0.3s; }
.element:hover { transform: translateY(-10px); }

💡Measuring CLS

Use Chrome DevTools Performance panel → enable "Layout Shift Regions" to see purple rectangles highlighting where shifts occur. Google Search Console's CWV report shows real-user CLS data by URL.

References

[1]web.dev: Cumulative Layout Shift (CLS) — Metric definition and scoring — web.dev
[2]web.dev: Optimize Cumulative Layout Shift — Techniques to eliminate layout instability — web.dev