Cumulative Layout Shift (CLS) measures visual stability: how much the content on a page moves around unexpectedly as it loads. It is the metric behind the familiar annoyance of tapping a button just as an ad pushes it out from under your finger. CLS is one of the three Core Web Vitals.
How the score is built
Unlike the timing metrics, CLS is unitless. Each unexpected shift scores as impact fraction × distance fraction: how much of the viewport moved, and how far. CLS is the sum of the worst cluster of those shifts during the page’s life. Shifts within 500 ms of a user interaction do not count, because those are considered expected.
A green score is not evidence the markup is right
This is the one metric where the number most people check routinely misses the defect. We parsed 162 audited sites: 86 of them, 53%, ship at least one image with no width and height, and we had to measure and write dimensions for 1,010 individual images. Of those 86 sites, 82 still score “good” on lab CLS, at or under the 0.10 threshold. Twenty-six of them score exactly zero.
The reason is structural. A Lighthouse run loads the page once, at a fixed viewport, and then stops. It never scrolls. Most unsized images sit below the fold, so the shift they cause happens during a scroll the tool never performs. Google documents the gap directly: lab CLS “only considers layout shifts that occur above the fold and during load”, while the field metric counts shifts “throughout the lifespan of the page”.
What the bands mean when the metric is unitless
The Good / Needs-work / Poor bands sit in the summary panel. Because CLS is unitless, the same score means the same thing everywhere. Google grades a page at the 75th percentile of real visits, so a page passes only when three in four visits stay that stable, and real visits include the scrolling that the lab run skips.
What shifts a layout
- Images, iframes, ads or embeds with no
widthandheight. With no dimensions and noaspect-ratio, the browser reserves zero space, then reflows everything below once the asset arrives. This is the single most common defect in our audit base. - Content injected above existing content. Cookie bars, promo banners and late ads dropped at the top of the page shove everything under them down after paint.
- Web fonts that swap in a differently-sized face. Without
size-adjust, the fallback and the web font occupy different space, so text reflows the moment the font loads. - DOM inserted by JavaScript after paint. Widgets appended once scripts run push down whatever was already on screen.
- Ad or embed slots with no reserved box. A third-party iframe loading into an unsized container expands and displaces its neighbours.
Where the cheap fix stops being cheap
CLS has the mildest trade-offs of the vitals, but they exist:
- A hard-coded
aspect-ratiocan fight art-directed responsive images that deliberately change shape across breakpoints, boxing a portrait crop into a landscape slot. This is why we read each image’s real ratio from its file header rather than guessing1/1. - Metric-matching a fallback font with
size-adjustavoids the swap-in reflow, but holding text to the final font’s shape can delay it slightly against an instant swap: a small FCP cost paid to protect stability.
Reserving the space, in code
Give every image its intrinsic dimensions:
- <img src="/photo.jpg">
+ <img src="/photo.jpg" width="1200" height="800">For responsive images that scale with their container, set the ratio in CSS so the reserved box scales too:
img { width: 100%; height: auto; aspect-ratio: 1200 / 800; }What we write into the markup
WebSpeed computes each image’s real aspect-ratio from its file header and writes it into
the markup, so the browser reserves the right space before the image loads. That covers the
case the score does not: the shift that would have happened three screens down, on a visit
the lab never simulated.