PERFORMANCE

Home › Glossary › Performance· 81 ·

CLS (Cumulative Layout Shift)

/ˌkjuːmjʊlətɪv ˈleɪaʊt ʃɪft/abbr.

Filed underPerformanceSEOUX

In brief · quick answer

CLS measures the largest burst of unexpected layout shifts during the entire lifecycle of a page. Target: under 0.1.

§ 1 Definition

CLS quantifies visual instability using the Layout Instability API. The score combines impact fraction (how much of the viewport shifted) and distance fraction (how far elements moved). CLS is the most misunderstood Core Web Vital because it is session-based rather than load-based: shifts can happen 30 seconds into a visit.

§ 2 How CLS Is Calculated

Each shift gets a score: impact fraction x distance fraction. Shifts are grouped into session windows (bursts within 1 second of each other, 5-second cap). CLS is the sum in the largest session window.

§ 3 Common Misunderstandings

CLS is NOT just a page-load metric. It measures shifts across the entire page lifecycle. Shifts excluded: those triggered by user gestures (scrolling, clicking, typing). One bad session window determines the score, not an average.

§ 4 Top Causes

Images without dimensions. Web fonts causing FOIT/FOUT. Third-party ads and embeds that dynamically resize. Dynamically injected content. Animations on layout properties.

§ 5 How to Fix

Always set width and height on images and videos. Use aspect-ratio in CSS. Reserve space for ads. Use font-display: optional with size-adjust. Use CSS transform for animations.

§ 6 Note

CLS is lifecycle-wide, not just load-time. The session window model replaced sum-of-all-shifts in Chrome 88.

§ 7 In code

<img src="/photo.jpg" width="800" height="600" loading="lazy">
<div style="min-height:250px"><div id="ad-slot"></div></div>

§ 8 Common questions

Q. Does a font swap cause CLS?: A. Yes. Use font-display: optional with size-adjust to mitigate.
Q. Can CLS happen after full load?: A. Yes. Late ads, lazy images, and dynamic injection cause post-load shifts.

§ 9 Thresholds

Rating	CLS Threshold
Good	≤ 0.1
Needs Improvement	0.1 - 0.25
Poor	> 0.25

Key takeaways

Largest burst of unexpected layout shifts per session.
Target: ≤ 0.1 at p75.
Always set dimensions on media.
Reserve space for dynamic content.
Lifecycle-wide, not just load-time.

How Atomic Glue helps

Atomic Glue audits CLS across all page states and enforces layout-safe practices. Web Development services.

Get in touch

# CLS (Cumulative Layout Shift)

CLS measures the largest burst of unexpected layout shifts during the entire lifecycle of a page. Target: under 0.1.

Category: Performance (also: SEO, UX)

Author: Atomic Glue Performance Team

## Definition

## How CLS Is Calculated

## Common Misunderstandings

## Top Causes

Images without dimensions. Web fonts causing FOIT/FOUT. Third-party ads and embeds that dynamically resize. Dynamically injected content. Animations on layout properties.

## How to Fix

Always set width and height on images and videos. Use aspect-ratio in CSS. Reserve space for ads. Use font-display: optional with size-adjust. Use CSS transform for animations.

## Note

CLS is lifecycle-wide, not just load-time. The session window model replaced sum-of-all-shifts in Chrome 88.

## In code

<img src="/photo.jpg" width="800" height="600" loading="lazy">
<div style="min-height:250px"><div id="ad-slot"></div></div>

## Common questions

Q: Does a font swap cause CLS?

A: Yes. Use font-display: optional with size-adjust to mitigate.

Q: Can CLS happen after full load?

A: Yes. Late ads, lazy images, and dynamic injection cause post-load shifts.

## Thresholds

Rating: Good, CLS Threshold: ≤ 0.1

Rating: Needs Improvement, CLS Threshold: 0.1 - 0.25

Rating: Poor, CLS Threshold: > 0.25

## Key takeaways

Largest burst of unexpected layout shifts per session.
Target: ≤ 0.1 at p75.
Always set dimensions on media.
Reserve space for dynamic content.
Lifecycle-wide, not just load-time.

## Related entries

Last updated July 2026. Permalink: atomicglue.co/glossary/cls-cumulative-layout-shift