What shifting costs
Cumulative layout shift scores how much visible content moves unexpectedly during the page lifetime. A shift happens when an element that was already painted jumps to a new position, often making a reader lose their place or tap the wrong button. A good score stays below one tenth.
- The score combines how much of the viewport moved and how far it traveled.
- Only unexpected shifts count, not those right after a user action.
- A single late image can wreck an otherwise stable page.
Common causes and cures
Most shifts come from content that arrives without reserved space. The cure is almost always to tell the browser the final size before the content loads.
- Images without dimensions push content down when they finally load, so always set width and height or an aspect ratio.
- Ads and embeds expand into unsized slots, so reserve a fixed box.
- Web fonts swap and reflow text, so match the fallback metrics.
- Injected banners shove the page, so reserve their space or overlay them.
A reliable workflow
- Audit which elements move using browser tooling.
- Add explicit dimensions to every media element.
- Avoid inserting content above existing content unless the user asked.
Key idea
Cumulative layout shift drops to near zero when you reserve final space for every image, ad, font, and injected element before it loads.