What Is Cumulative Layout Shift and Why Users (and Google) Hate It

What CLS actually measures

Cumulative Layout Shift measures how much visible content unexpectedly moves around while a page is loading. If you've ever started reading a paragraph, or moved to tap a button, only to have something else load in above it and shift everything down at the last moment — that's exactly, precisely what CLS is designed to measure and quantify.

Why this specific metric genuinely, directly matters

It's a real, official Core Web Vital, directly factored into Google's page experience signals — not merely a general, vague notion of "good UX," but a specific, measured, and scored metric with concrete thresholds attached.

It captures a genuinely real, common source of visitor frustration. Unlike load speed, which is at least a familiar, well-understood frustration most people intuitively recognize, layout shift causes a more specific, often more acutely irritating kind of problem — misclicks, lost reading position, a genuine sense that a page feels broken or badly put together even when, technically, everything on it did eventually load correctly.

It's a genuinely real, measurable proxy for a site's actual attention to real technical detail. A page with significant, uncontrolled layout shift often reflects images and ads that were never given explicitly reserved space, dynamically injected content with no accounted-for layout impact, or fonts that load in and visibly change text size after the fact — all genuinely fixable technical issues, not a fundamentally unavoidable cost of having rich, dynamic content.

What actually causes most real layout shift

Images and videos with no explicitly specified width and height. Without these specified in advance, a browser has no way to know how much space to actually reserve for the media before it finishes loading — so it renders everything else first, then abruptly shifts everything else down once the media itself finally arrives and its real dimensions become known.

Ads and embeds injected dynamically with no reserved space. A third-party ad slot that loads in after the surrounding content has already rendered pushes everything below it down unexpectedly, precisely when a visitor may have already started reading or interacting with content in that area.

Web fonts causing a visible size or shape change once they finish loading. Text initially rendered in a fallback system font, then swapped for a different custom web font once it finishes loading, can shift line breaks and overall spacing noticeably if the two fonts have meaningfully different visible metrics.

Content dynamically injected above existing, already-visible content — a cookie consent banner or a notification bar that appears at the very top of the page after the rest has already rendered pushes everything else down unexpectedly, right as a visitor may already be reading or interacting with what was already there.

What actually counts as a good score

A CLS score of 0.1 or lower is considered good. Above 0.25 is considered poor. The score itself is a calculated measure combining both how much of the visible viewport actually moved and how far it moved — not simply a raw count of how many individual shifts happened to occur on the page.

How to actually prevent it, concretely

Always specify width and height attributes on images and video elements directly, so a browser can correctly reserve the right amount of space in the layout before the actual media file has finished loading.

Reserve explicit space for ads and embeds in advance, using a fixed-size container, rather than letting the surrounding layout shift dynamically once the ad content itself actually loads in.

Use font-display strategies that minimize a visible, jarring layout shift when a custom web font finishes loading and swaps in for the initial fallback font.

Avoid inserting new content above existing, already-visible content, unless it's in direct, immediate response to a visitor's own explicit action — inserting something automatically, unprompted, above content someone may already be actively reading is what causes the most genuinely jarring, disorienting shifts.

How to actually check a specific page's real score

PageSpeed Insights reports both real-world field data from actual visitors and a lab-based diagnostic breakdown identifying the specific elements actually responsible for layout shift on a given page — genuinely useful for pinpointing the precise, specific fix needed rather than just knowing generally that a shift is happening somewhere on the page.

The realistic takeaway

CLS is one of the more genuinely fixable Core Web Vitals in practice — the actual causes are usually specific, identifiable, and technical (missing dimensions, unreserved ad space, font-loading behavior), rather than requiring a fundamental, sweeping architectural change to the site. A page that scores poorly here is very often just a handful of specific, concrete fixes away from scoring meaningfully better.