You Know That Moment When You Are About to Tap "Add to Cart"...
And the page jumps. You accidentally tap an ad for discount mattresses.
Now you are on a mattress website wondering where your life went wrong.
That is Cumulative Layout Shift. And it is tanking your rankings and your conversions.
What CLS Measures
CLS scores how much visible content unexpectedly shifts during page load. Google wants this under 0.1. If yours is over 0.25, you have got a serious problem.
The keyword here is unexpected. If a user clicks a button and content moves in response, that is fine. If content moves on its own because an image loaded or an ad injected itself, that is a CLS violation.
The Top CLS Offenders
Images without dimensions. If you do not set width and height attributes on your images, the browser does not know how much space to reserve. Image loads, page jumps. Our image optimization guide covers this and more.
Ads and embeds. Third-party ad scripts that inject content and push everything else down. Classic.
Web fonts loading late. Your system font renders first, then your custom font loads and the text reflows. Every paragraph shifts.
Dynamic content above existing content. That cookie consent banner that pushes the entire page down 80 pixels? Yeah. That counts.
How to Fix It
Set explicit dimensions on every image and video element. Reserve space for ads with fixed-height containers. Use `font-display: swap` with proper fallback fonts that match your web font's metrics.
And stop injecting content above the fold after page load. Put banners at the top from the start, or overlay them. CLS matters even more on mobile — read about mobile-first indexing to understand why.
This Is Exactly What Checklists Are For
CLS is sneaky. It creeps in every time a developer adds something new and forgets to reserve space. You need a systematic check.
That is why we built seocheckup.app. 113 tasks. 4 checklists. Free. No credit card. Set up in 30 seconds.
Because nobody should lose a sale to a jumping page.