What Is CLS?
What is CLS? Cumulative Layout Shift quantifies how much visible content moves unexpectedly while a page is being viewed. In plain English: did something jump under your finger or eye after you started reading or about to click?
Unexpected shifts often come from images or embeds without reserved space, late-injected banners, web fonts that reflow text, or ads and widgets that push content after paint. Those jumps cause mis-taps and make the page feel unfinished.
Not every movement is automatically bad. Layout changes that clearly follow a user action — expanding an accordion you opened, opening a mobile menu you tapped — are expected responses. CLS focuses on unstable, surprising movement rather than every animation or intentional expand/collapse pattern.
Layout shift example
Before
After image loads
Why It Matters
Layout shift is a trust and usability issue. People click the wrong thing, lose their place while reading, or blame their own device when the page is at fault. On commerce and lead-gen pages, a shifting CTA near a late-loading promo is a classic conversion killer.
Naming CLS helps teams prioritize reserved dimensions, font strategies, and careful injection of late UI — practical fixes that make the site feel solid without arguing about aesthetics alone.
Where You Encounter It
A product page loads the price and "Buy" button, then a promotional banner inserts above them a second later and shoves the button downward. The visitor taps where "Buy" was and hits something else — or hesitates. Reserving space for the banner (or loading it without displacing critical controls) reduces that unexpected shift.
Common Misunderstandings
- Any animation means bad CLS. Smooth, intentional motion is not the same as unexpected reflow from late content.
- CLS only comes from ads. Images without size attributes, font swaps, and injected notices cause shifts on many business sites with no ads at all.