CLS — Cumulative Layout Shift — measures how much a page's layout moves while it's loading. Images loading in and pushing text down. A cookie banner appearing over the button someone was about to click. Ads loading and shifting everything else. Google considers a CLS score under 0.1 good.
CLS is one of the three Core Web Vitals — see What Are Core Web Vitals? for how it fits alongside LCP and INP.
Why CLS is measured differently
Unlike LCP and INP, CLS isn't a time measurement — it's a dimensionless number representing visual displacement, calculating how far content moves from where a user first saw it, weighted by how much of the viewport is affected. That's a deliberate design choice: what matters isn't how long the shift takes, but how disruptive and disorienting it is to someone already reading or about to interact with the page.
What actually drives a bad CLS score
Images and embeds without reserved space. When an image loads without a defined width and height, the browser doesn't know how much room to leave for it — so everything below gets pushed down the moment it finishes loading. This is the single most common and most fixable cause.
Late-injected content. Cookie banners, promotional bars, and dynamically-inserted ads that appear after the initial page render shove existing content out of the way, often at exactly the moment a user is about to click something.
Web fonts causing a visible swap. If a custom font loads after the page has already rendered with a fallback font, and the two fonts have different letter widths, text can reflow and shift surrounding elements as the swap happens.
What to actually do about it
Always specify width and height (or use CSS aspect-ratio) on images and embeds so the browser reserves the correct space before the content loads. Reserve space for known elements like cookie banners and ads instead of letting them insert on top of existing content. Match font metrics between the fallback and the loaded web font, or use font-display strategies that minimise visible reflow.
A page that doesn't move once it starts rendering feels stable and trustworthy — CLS is what separates a site that feels finished from one that feels like it's still assembling itself while you're trying to use it.
Frequently asked questions
What's a good CLS score?
Under 0.1 is good, per Google's thresholds. Unlike LCP and INP, CLS is a dimensionless number measuring visual displacement, not a time measurement.
What's the most common cause of a bad CLS score?
Images or ads loading in without reserved space, pushing the rest of the page down after the user has already started reading — see [What Are Core Web Vitals?](/blog/what-are-core-web-vitals) for how CLS fits alongside LCP and INP.
Can CLS cause real harm, or is it just annoying?
Both — beyond the annoyance, unexpected shifts cause mis-clicks (tapping an ad or the wrong button right as content jumps), which directly hurts conversion and trust, not just the metric itself.
Yash
Founder & Principal Consultant, Ynexgen
Yash leads Ynexgen, helping small and mid-sized businesses turn technology into a stronger foundation for growth — 7+ years across Salesforce CRM, websites, and AI adoption.
