CLS

Overview

Cumulative Layout Shift (CLS) is a visual stability metric that adds up how much visible elements move unexpectedly while a page is loading. It is one of the three Core Web Vitals defined by Google, and it quantifies unintended layout shifts such as the all-too-common experience of an ad or image suddenly pushing the page down just as you reach to tap a button.

The official web.dev documentation defines CLS as the largest burst of all unexpected layout shift scores that occur over the entire lifespan of a page. An individual layout shift score is calculated by multiplying the impact fraction by the distance fraction, and the final CLS value is the highest-scoring window within a session window (up to 5 seconds) that groups together shifts occurring within one second of each other.

Threshold Values

CLS is evaluated at the 75th percentile of page loads across both mobile and desktop.

Rating	CLS Score	Meaning
Good	0.1 or lower	Visually stable
Needs improvement	Above 0.1 to 0.25	Some layout shifting occurs
Poor	Above 0.25	Frequent layout shifts degrade the experience

Common Causes

• Images without declared dimensions: When an image lacks width and height attributes, the browser reserves space for it only as it loads, pushing surrounding content out of the way.
• Ads, embeds, and iframes without declared dimensions: Externally loaded elements that arrive late unexpectedly displace nearby content.
• Dynamically injected content: Banners, notifications, or recommendation blocks added with JavaScript after the initial render shift existing content.
• Web font swaps: Size differences between a fallback font and the web font cause FOIT or FOUT, triggering text to re-layout and reflow.
• Actions awaiting a network response: Updating the DOM after a response arrives can change the layout.

Optimization

• Declare image dimensions: Set width and height attributes on the <img> tag, or use CSS aspect-ratio to reserve space before the image loads. For responsive images, pair this with height: auto; width: 100%;.
• Reserve space for ads and embeds: Use min-height or aspect-ratio to hold the slot for elements that load late.
• Adjust placement of dynamic content: Position injected content below the fold or load it after user interaction, and rely on fixed-size containers and skeleton UI.
• Optimize web fonts: Use font-display: optional, declare fallback fonts, and apply size-adjust to minimize size differences during font swaps.
• Ensure bfcache eligibility: Restore page state on back and forward navigation to guarantee reflow-free transitions.

Basis

The threshold values, calculation method, and the lists of causes and optimizations above are based on Google's official web.dev documents "Cumulative Layout Shift (CLS)" and "Optimize CLS." Both documents specify a good threshold of 0.1 or lower and a poor threshold above 0.25, derive the layout shift score as impact fraction multiplied by distance fraction, and describe the concept of a session window with a one-second gap and a five-second maximum.

Implementation Checklist

• Confirm that every image and video has a declared width and height or aspect-ratio.
• Check that ad, embed, and iframe slots reserve space with min-height.
• Verify that dynamically injected content does not push existing content out of place.
• Ensure web fonts have font-display, fallback fonts, and size-adjust configured.
• Monitor that the 75th-percentile CLS from real-world field data stays at 0.1 or lower.

References and Sources

• Cumulative Layout Shift (CLS) — web.dev
• Optimize Cumulative Layout Shift — web.dev