---
title: "What is Cumulative Layout Shift (CLS)? · Unlighthouse"
meta:
  "og:description": "CLS measures visual stability. Learn what it is, thresholds, and how to prevent layout shifts."
  "og:title": "What is Cumulative Layout Shift (CLS)? · Unlighthouse"
  description: "CLS measures visual stability. Learn what it is, thresholds, and how to prevent layout shifts."
---

**Glossary**

# **What is Cumulative Layout Shift (CLS)?**

[Copy for LLMs](https://unlighthouse.dev/glossary/cls.md)

Loading demo...

Cumulative Layout Shift (CLS) measures visual stability - how much content unexpectedly moves during loading. It's one of Google's three [**Core Web Vitals**](https://unlighthouse.dev/glossary/) and affects both UX and search rankings.

## [Thresholds](#thresholds)

| **Score** | **Rating** |
| --- | --- |
| ≤ 0.1 | Good |
| 0.1 - 0.25 | Needs Improvement |
| > 0.25 | Poor |

[**Google recommends**](https://web.dev/articles/cls) a score of 0.1 or less for at least 75% of page visits.

## [How CLS Is Calculated](#how-cls-is-calculated)

CLS quantifies unexpected shifts by multiplying impact fraction (viewport affected) by distance fraction (how far elements moved). User-initiated shifts within 500ms of interaction don't count.

## [Why It Matters](#why-it-matters)

Layout shifts cause accidental clicks and lost reading position. [**79% of mobile sites pass CLS**](https://almanac.httparchive.org/en/2024/performance) - it's the best-performing Core Web Vital. [**Redbus reduced CLS to 0 and saw 80-100% higher conversions**](https://web.dev/case-studies/vitals-business-impact).

## [Common Issues](#common-issues)

- Images without width/height dimensions
- Ads and embeds without reserved space
- Web fonts causing text reflow
- Dynamically injected content

## [Measure CLS](#measure-cls)

- [**Core Web Vitals Checker**](https://unlighthouse.dev/tools/cwv-checker) - test any page
- Chrome DevTools Performance panel
- Lighthouse audit
- [**PageSpeed Insights**](https://pagespeed.web.dev/) (field data)
- Web Vitals Chrome extension

→ [**Complete CLS Guide**](https://unlighthouse.dev/learn-lighthouse/cls)

[Edit this page](https://github.com/harlan-zw/unlighthouse/edit/main/docs/glossary/cls.md)

[Markdown For LLMs](https://unlighthouse.dev/glossary/cls.md)

**Did this page help you? **

Anything that could be done better? :)

Help us improve this page. You can [edit this page](https://github.com/harlan-zw/unlighthouse/edit/main/docs/glossary/cls.md) on GitHub or provide anonymous feedback below.

[**FCP** FCP measures when the first content renders. Learn what it is, thresholds, and how to improve it.](https://unlighthouse.dev/glossary/fcp)

**On this page **

- [Thresholds](#thresholds)
- [How CLS Is Calculated](#how-cls-is-calculated)
- [Why It Matters](#why-it-matters)
- [Common Issues](#common-issues)
- [Measure CLS](#measure-cls)