---
source: https://iinventedlight.com/library/notes/google-cls.md
title: "Cumulative Layout Shift (CLS)"
license: CC-BY-4.0
license_url: https://creativecommons.org/licenses/by/4.0/
source_license: "CC BY 4.0 (web.dev live page footer: 'the content of this page is licensed under the Creative Commons Attribution 4.0 License'; cite the page, not the archived repo); prose restated in our own words; footer re-checked live 2026-11-05"
license_family: web.dev
rule_check: "needs rule check (family not in auto-publish rule; check.mjs auto-approves only usgov and arxiv-ccby)"
attribution: "Summary by iinventedlight (AI-assisted). Sources: Google (web.dev), Cumulative Layout Shift (CLS)  |  Articles  |  web.dev, CC BY 4.0 (web.dev live page footer: 'the content of this page is licensed under the Creative Commons Attribution 4.0 License'; cite the page, not the archived repo); Google (web.dev), Optimize Cumulative Layout Shift  |  Articles  |  web.dev, CC BY 4.0 (web.dev live page footer: 'the content of this page is licensed under the Creative Commons Attribution 4.0 License'; cite the page, not the archived repo)."
author: "iinventedlight (synthesis of cited sources); text drafted with AI assistance"
date: 2026-11-04
status: published
checked_on: 2026-11-05
as_of: 2026-11-05
confidence: medium
untested: "No code was run for this note; only the fetched documentation pages were read."
category: coding-references
topic_area: "code-ai-eng: web performance"
tags: ['web-performance', 'core-web-vitals', 'cls']
sources:
  - id: S1
    title: "Cumulative Layout Shift (CLS)  |  Articles  |  web.dev"
    publisher: Google (web.dev)
    url: https://web.dev/articles/cls
    accessed: 2026-11-05
    license: "CC BY 4.0 (web.dev live page footer: 'the content of this page is licensed under the Creative Commons Attribution 4.0 License'; cite the page, not the archived repo)"
  - id: S2
    title: "Optimize Cumulative Layout Shift  |  Articles  |  web.dev"
    publisher: Google (web.dev)
    url: https://web.dev/articles/optimize-cls
    accessed: 2026-11-05
    license: "CC BY 4.0 (web.dev live page footer: 'the content of this page is licensed under the Creative Commons Attribution 4.0 License'; cite the page, not the archived repo)"
---
# Cumulative Layout Shift (CLS)

**Answer:** Cumulative Layout Shift (CLS) is a stable Core Web Vital that tracks visual stability: how often content jumps around unexpectedly while someone uses the page. (S1) Aim for a CLS of 0.1 or less on at least 75% of page visits. (S2)

## What causes shifts

- Content usually moves because something loads late (asynchronously) or new DOM elements get inserted above what is already shown. (S1)
- Common culprits: images or video without set dimensions, web fonts that render bigger or smaller than their fallback, and third-party ads or widgets that resize themselves. (S1)
- Developers often miss shifts in testing because their own browser has the images cached; real visitors wait longer for them. (S1)

## How it is scored

- CLS reports the largest burst (session window) of layout-shift scores seen at any point while the page is open, not a running total. (S1)
- The other Core Web Vitals are times; the CLS score has no unit and reflects how much content moved and how far. (S2)
- Field data in the Chrome UX Report (CrUX) covers the whole time the page is open, while lab tools usually see only the initial load, so the two can disagree. (S2)

## Claims
- id: C1
  claim: CLS measures visual stability.
  source: S1
  evidence: "an important, user-centric metric for measuring visual stability"
- id: C2
  claim: A good CLS is 0.1 or less.
  source: S2
  evidence: "Good CLS values are 0.1 or less."
- id: C3
  claim: CLS scores are unitless.
  source: S2
  evidence: "the CLS score is a unitless value"
- id: C4
  claim: CrUX measures CLS over the full page life.
  source: S2
  evidence: "CLS is measured throughout the full life of the page"

## Sources
- [S1] Cumulative Layout Shift (CLS)  |  Articles  |  web.dev. Google (web.dev). https://web.dev/articles/cls . License: CC BY 4.0 (web.dev live page footer: 'the content of this page is licensed under the Creative Commons Attribution 4.0 License'; cite the page, not the archived repo). Accessed 2026-11-05.
- [S2] Optimize Cumulative Layout Shift  |  Articles  |  web.dev. Google (web.dev). https://web.dev/articles/optimize-cls . License: CC BY 4.0 (web.dev live page footer: 'the content of this page is licensed under the Creative Commons Attribution 4.0 License'; cite the page, not the archived repo). Accessed 2026-11-05.

License: this note is CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/). Summary by iinventedlight (AI-assisted).