# CLS *Cumulative Layout Shift* CLS scores how much a page jumps around while it loads, on a unitless scale where 0.1 or less is good. Every element that moves without the visitor causing it adds to the score, weighted by how far it moved and how much of the screen it took. **Canonical:** https://spoko.space/glossary/cls/ **Language:** en **Category:** Performance **Also known as:** cumulative layout shift, layout shift, visual stability **Published:** 2026-09-22 **Glossary:** https://spoko.space/glossary/ --- ## What it is {#what-it-is} You start reading. An image finishes loading above the paragraph, the text moves down, and the sentence you were on is somewhere else. Do that four times and the page feels broken even though nothing failed. CLS adds up every one of those movements. It counts only shifts the visitor did not cause — opening an accordion moves the page and does not count; a banner injecting itself after two seconds does. ## Why it matters if you are paying for a website {#why-it-matters-if-you-are-paying-for-a-website} The cost is not the score, it is the mis-tap. A button moves 40 pixels in the moment between deciding to press it and pressing it, and the visitor lands on whatever took its place. On a checkout page that is a lost order; on a contact form it is a phone call that never happened. ## What actually causes it {#what-actually-causes-it} Four things, in the order I find them. **Images without dimensions.** A browser that does not know an image's shape reserves no room for it, and then has to make room when it arrives. Set `width` and `height`, or let the framework do it from the file. **Webfonts.** The page paints in the fallback font and reflows when the real one arrives, and the longer the words, the further everything below them moves. **Injected content.** Cookie banners, promo bars, "subscribe" strips. Anything added to the top of the document after the paint pushes the entire page down. **Ads and embeds** that size themselves after loading. There is a decision on this site worth putting next to that list. The cookie banner is a floating card over the page rather than a strip that pushes the content down — so it shifts nothing and contributes nothing to CLS. It is also the reason the site knowingly fails one accessibility criterion, because a floating card can cover an element that has keyboard focus. Two metrics, one banner, opposite directions: that is what a real trade-off looks like, and both halves of it are written down rather than quietly picked. ## What CLS is not {#what-cls-is-not} It is not about scrolling, and it is not fixed by making the page faster. A slow page with reserved space for everything scores zero; a fast page that loads a banner late does not. ## Related terms {#related-terms} - [Core Web Vitals](https://spoko.space/glossary/core-web-vitals/): Core Web Vitals are the three metrics Google collects from real Chrome visits: LCP for loading, INP for responsiveness and CLS for visual stability. A URL passes when 75% of its visits are inside the good threshold. — Markdown: https://spoko.space/glossary/core-web-vitals.md - [WCAG](https://spoko.space/glossary/wcag/): WCAG is the W3C standard for making web content usable by people with disabilities. It defines three conformance levels — A, AA and AAA — and AA is the one European law, public tenders and corporate contracts actually ask for. — Markdown: https://spoko.space/glossary/wcag.md - [CDN](https://spoko.space/glossary/cdn/): A CDN is a network of servers around the world that keep copies of your site and answer visitors from whichever one is nearest. It removes the distance between the visitor and the origin server — and only that. — Markdown: https://spoko.space/glossary/cdn.md - [INP](https://spoko.space/glossary/inp/): INP measures how long a page takes to paint a response after a tap, click or key press. Good is 200 milliseconds or less. It replaced FID in March 2024 and, unlike FID, it watches every interaction rather than only the first. — Markdown: https://spoko.space/glossary/inp.md ## Where I write about this {#related-posts} - [Uper SEO Auditor](https://spoko.space/uper-seo-auditor/) — Markdown: https://spoko.space/uper-seo-auditor.md Chrome extension for SEO specialists and developers. Provides real-time debugging of Web Vitals, Schema.org, GTM, and JS errors directly in Chrome Side Panel. - [SEO agency website](https://spoko.space/seo-agency-website/) — Markdown: https://spoko.space/seo-agency-website.md Showcase for a freelance SEO expert dedicated to improving online visibility and driving organic traffic for businesses. - [Modern Website Design 2026 — Trends, Navigation and Inspiration](https://spoko.space/blog/modern-website-design-trends/) — Markdown: https://spoko.space/blog/modern-website-design-trends.md Bento grid, dark mode, kinetic typography, CSS scroll animations and the evolution of the hamburger menu — a practical guide to 2026 web design trends with examples and an inspiration list. ## See also {#see-also} - [WordPress → Astro migration](https://spoko.space/wordpress-to-astro/) - [Accessibility audit (WCAG 2.2 AA)](https://spoko.space/accessibility/) ## Sources {#sources} - [Cumulative Layout Shift (CLS)](https://web.dev/articles/cls) — How the score is calculated, including the distance and impact fractions. - [Optimize Cumulative Layout Shift](https://web.dev/articles/optimize-cls) — The usual causes, each with the markup that prevents it.