Cumulative Layout Shift, or CLS, measures how much a page moves under the visitor's eyes. You go to tap "Book now", an advert loads above it, the button slides down and you tap something else. CLS turns that annoyance into a number, and Google counts it as one of the three Core Web Vitals.
How the CLS score is calculated
Each unexpected shift gets a score: the share of the screen affected multiplied by how far things moved relative to the screen size. Shifts that happen close together are grouped into a session window (up to five seconds long, with gaps under one second), and the page's CLS is the worst window during the visit. Movement within half a second of a click or keypress is excluded, because expanding a menu you opened is expected.
Good is 0.1 or less, poor is above 0.25. Because it is a ratio, CLS has no unit: it is not seconds.
Usual causes
- Images and videos without dimensions. The browser does not know how tall they will be, so text below jumps when they arrive.
- Banners injected at the top. Cookie notices, promo bars or pop-ups that push content down rather than overlaying it.
- Web fonts swapping in. A fallback font with different spacing reflows paragraphs when the real font from a service like Google Fonts loads.
- Embeds and ads. Map, review or social widgets that size themselves after loading.
A fix in practice
A physiotherapy clinic's booking page scores 0.32 on mobile. Recording the load in Chrome DevTools shows two culprits: a "Now taking new patients" bar inserted above the header after a script runs, and a staff photo grid with no width or height set. Adding width and height attributes to the photos lets the browser reserve their space, and rendering the notice bar in the initial HTML (or as an overlay) stops the push-down. Both changes are small and the score falls below 0.1.
Does a small site need to care?
Yes, more than for most performance metrics, because layout shift causes mis-taps on contact buttons and checkout forms. That costs enquiries directly, before any ranking effect. The good news is that CLS fixes are usually CSS and HTML changes, not server upgrades.
CLS mistakes to avoid
- Measuring only the first screen. CLS keeps counting as the visitor scrolls, so shifts lower down still count.
- Animating with
topormargin. Usetransformso animations do not register as layout shifts. - Leaving responsive images unsized.
aspect-ratioin CSS works well with responsive design. - Trusting a desktop test. Narrow phone screens make every shift proportionally larger.
Related terms
- Core Web Vitals: the trio CLS is part of.
- Largest Contentful Paint: the loading metric scored alongside it.
- Google Fonts: a frequent source of font-swap shifts.
- Pop-up: overlays that cause shifts when built badly.