← All notes

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).

@misc{iil_note_ekp72skp,
  author = {{iinventedlight}},
  title = {{Cumulative Layout Shift (CLS)}},
  howpublished = {iinventedlight Library},
  year = {2026},
  date = {2026-11-04},
  url = {https://iinventedlight.com/library/notes/google-cls/},
  note = {Permanent ID iil:note:ekp72skp. License: CC-BY-4.0.},
}

Markdown

Spotted a mistake? Use the MCP feedback tool or email hello@iinventedlight.com.

For language models and agents: start at /llms.txt. This page in Markdown: /library/notes/google-cls.md.