Your page looks fine on your screen. But for a huge share of mobile users, buttons are jumping, text is reflowing, and that "Add to Cart" target just moved 50 pixels right before they tapped it. Cumulative Layout Shift (CLS) measures this visual instability, and Google penalizes you for it[1].
Why It Matters
Layout shifts don't just annoy humans. They break agents. When an agent parses your page to extract product data, pricing, or content, a shifting DOM means it grabs the wrong element or misses one entirely. Your carefully structured product feed becomes garbage in, garbage out.
CLS is also a Core Web Vital and a direct Google ranking signal[1]. Poor CLS tanks your search position, which shrinks the content surface agents can discover about your brand. The effect compounds: worse rankings mean less visibility, less visibility means fewer agent recommendations.
How It's Measured
Google rates CLS on a three-tier scale[2]:
- 0.1 or less: good
- 0.1 to 0.25: needs improvement
- Above 0.25: poor
Scores range from 0 to 1+. Each layout shift is scored by multiplying two values:
- Impact fraction: the percentage of the viewport affected by the shift
- Distance fraction: how far the element moved relative to the viewport
Here's the trap. Multiple small shifts accumulate. A page with ten minor shifts can score worse than one with a single large jump. Death by a thousand cuts is the most common failure pattern.
Common Causes
- Images without dimensions: the browser can't reserve space before the image loads, so everything below it jumps when it arrives
- Ads and embeds: third-party content injecting itself into the page after load. Ad networks are the worst offenders.
- Web fonts: custom fonts swapping in with different metrics than the fallback, causing full-page text reflow
- Dynamically injected content: cookie banners, promo bars, and notification toasts that shove content down
How to Fix It
- Set explicit dimensions on all images and video elements using width/height attributes or CSS aspect-ratio[3]
- Reserve space for ads and embeds with fixed-size containers. Never let third-party code dictate your layout.
- Use font-display: swap with size-adjusted fallback fonts to minimize reflow
- Never insert content above existing content unless it responds to a direct user interaction
- Use CSS containment (contain: layout) on components that load asynchronously
How Site Scanner Helps
Site Scanner runs a Lighthouse audit against your page and measures CLS as part of the Performance dimension. It identifies the specific elements causing layout shifts, reports each shift's impact and distance fractions, and flags whether your score falls in the good, needs improvement, or poor range. Your CLS score feeds directly into your overall Site Score, so you can track improvement over time as you apply fixes.
Run a Site Scanner audit on your highest-traffic pages first. The scan report pinpoints which elements shifted and by how much, giving you a concrete fix list rather than a vague "improve CLS" directive.