Cumulative Layout Shift
Definition
CLS is one of the Core Web Vitals. It scores every unexpected movement of visible content across the life of the page, not just at load: each shift is the fraction of the viewport affected multiplied by the distance moved, and the number reported is the worst burst of shifts inside any five-second window. Movement you asked for by clicking something does not count, which is why opening an accordion is free. The threshold for a good score is 0.1 at the 75th percentile of real visits. The causes are dull and endlessly repeated: images without width and height, web fonts swapping in after the text has drawn, and content injected above whatever is already on screen.
Why It Matters
Layout shift is the thing that makes somebody tap the wrong button. A banner that loads late and pushes a paragraph down by 200 pixels does it exactly as the reader reaches the end of a line, and on a phone the mistapped link is often the one they were trying to avoid. Google treats CLS as a ranking signal, so a poor score carries a search cost as well as a human one. Unlike most performance work this one is usually free — reserving the space an element is going to occupy costs nothing and changes nothing once the page has settled.
How It Works
Three fixes account for nearly all of it. Put width and height attributes on every img and video, so the browser turns them into an aspect ratio and reserves the box before the file arrives — which is why the old advice to leave them to CSS is now actively wrong. For web fonts, preload the file or use font-display: optional, since font-display: swap is precisely the setting that produces the visible reflow when the real face replaces the fallback. For anything injected — a cookie banner, an advert, a notification bar — give its container a fixed min-height so the space exists before the content does, or overlay it instead of pushing it into the flow. The Performance panel in developer tools marks each shift and names the element that moved.
Real-World Example
A recipe page at sunday-bakes.99helpers.site scores 0.31. The Performance panel shows two culprits: eight photographs with no dimensions on them, and a heading font swapping in about 600 milliseconds after the text has drawn. Adding width and height to each image and preloading the single font file brings the score to 0.04, with no change at all to how the finished page looks. The whole site is one HTML file and an images folder on 99helpers, so the fix is a single re-upload.
Common Mistakes
- ✕Leaving width and height off images because CSS handles the sizing — CSS cannot reserve space for a file whose dimensions are not known yet
- ✕Injecting a cookie or promotion bar at the top of the body — everything below it moves the moment it appears
- ✕Testing on a fast desktop connection — shifts are caused by things arriving late, and on a laptop everything arrives at once
Related Terms
Render-Blocking Resource
A render-blocking resource is a file the browser has to download and process before it can show anything at all. Stylesheets and ordinary script tags in the head block; almost nothing else does.
Developer Tools
Developer tools are the inspection panels built into every desktop browser, opened with F12 or by right-clicking and choosing Inspect. They show the live page, its scripts, its network requests and its errors.
Core Web Vitals
Core Web Vitals are the three page-experience measurements Google publishes and uses as a ranking signal: Largest Contentful Paint, Interaction to Next Paint and Cumulative Layout Shift. Each has a published threshold, and each is judged on real visits rather than a lab test.
Largest Contentful Paint
Largest Contentful Paint, or LCP, marks the moment the biggest visible element in the viewport has finished rendering. It is the closest single number to the question a visitor actually asks: when did this page look like it had loaded?
Web Font
A web font is a typeface downloaded by the browser as part of the page, so the text renders in your chosen face rather than whatever the reader's device happens to have. It is an extra file on the critical path, and it decides whether text appears immediately or after a pause.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →