Glossary
Cumulative Layout Shift (CLS)
Cumulative Layout Shift is a measure of how much the content of a page moves unexpectedly while it loads and while it is being used. The lower the score, the steadier the page.
What it measures
A layout shift is content moving from the place it was first drawn. web.dev defines CLS as the largest burst of unexpected layout shifts over the whole life of a page, so movement after the page has loaded counts as well as movement during (web.dev: CLS).
Only unexpected movement counts. A menu that slides open because the visitor tapped it is movement they asked for. Text that drops half a screen because a photo arrived late is not, and that is the kind the score is built from.
Why a jumping page costs you
Picture a customer on a phone reaching for your Call button. A banner loads above it and pushes the page down, so the tap lands on something else. Some visitors find the button again. Others leave, and you never learn they tried to call.
What makes a page jump
web.dev's list of causes includes images or videos with unknown dimensions, fonts that render larger or smaller than the fallback shown before them, and content added to the page after it has started to draw (web.dev: CLS).
A photo with no width and height set gets no room until it arrives, so the text below it is drawn first and then pushed down. A web font that is wider or narrower than its stand-in rewraps every line when it loads. And a banner or widget that appears above what is already on screen moves all of it.
The design choices that prevent it
Most of the cure belongs in the design. Give every image and video its width and height, so the browser holds the right space before the file arrives. Reserve a slot of the right size for anything that loads late, such as a banner or a booking widget. Put new content below what the visitor is reading, or float it over the page, so nothing already on screen has to move. The scan measures the shift itself as E3.
Fonts are the cause people forget. Ask for a fallback close in size to the web font, so the swap barely shows.
The score that counts as good
A good CLS is 0.1 or less, taken at the 75th percentile of page loads (web.dev: CLS). The free scan reports E3 when your site is over that line. A site that is not live yet has no visitors to measure, so before launch, load each page on a phone and watch for anything that moves on its own.
What the free scan checks
Questions
Why does my page jump around on my phone?
Usually because something arrived late and took space that was never held for it: a photo with no set size, a font swapping in, or a banner or widget appearing above the text. Load the page on your phone and fix the first thing you see move.
Do cookie banners cause layout shift?
They can. A banner that appears at the top and pushes the page down moves everything under it. One that floats over the bottom of the screen without taking space from the page moves nothing. If yours pushes content down, have it shown as an overlay, or give it a reserved space from the moment the page first draws.
Where this fits in our work
We handle this as part of Web design and hosting: A fast, conversion-first website built on your own accounts, then hosted, backed up and kept current.
Related reading
Posts that use this term
- Does my website need to work well on phones to show up on Google? Google reads the phone version of your pages to index and rank them. What that version has to carry, and what to check on your own phone.
Related terms
- 301 redirect: A permanent move from an old page address to a new one, and why a site rebuild needs a map of them.
- Interaction to Next Paint (INP): How quickly a page reacts when a visitor taps, clicks or types, the scores that count as good, and what usually slows it down.
- HTTPS: The secure connection a site needs before Chrome stops marking it Not secure, what mixed content is, and what HTTPS does and does not do for search.
- Mobile-first indexing: Google reading the phone version of your site to index and rank it, and what has to match between the phone and desktop versions.
Sources
- web.dev: Cumulative Layout Shift (CLS), updated April 12, 2023. Checked September 26, 2026.