Fix library

What causes Cumulative Layout Shift and how to fix it

Cumulative Layout Shift measures how much the visible content of your page jumps around while it loads. It is the vital behind the moment you go to tap a button and an image pops in above it, moving the button under your finger. Google's web.dev documentation sets the target: “To provide a good user experience, sites should strive to have a CLS score of 0.1 or less.” Almost every failing CLS comes from the same root: something loaded without space reserved for it, so everything below it lurched down.

The symptom: the page moves while someone is reading it

A visitor starts reading, and the text slides down as an image finishes loading. They reach for a link, and an ad or a banner pushes it out of the way at the last instant. Nothing is broken, but the page feels unstable and cheap, and on mobile it causes real mis-taps. That instability is exactly what CLS scores, and it is one of the three Core Web Vitals Google measures on real users.

The score is judged on field data at the 75th percentile. Under 0.1 is good; above 0.25 is poor. Because it accumulates over the whole page life, even a couple of late shifts can push you into the red.

The cause: four things that load without reserving their space

• Images with no dimensions. An <img> without width and height takes up zero space until it loads, then suddenly claims its full size and shoves everything down.
• Ads, embeds, and iframes. A YouTube embed, a map, or an ad slot that has no reserved box appears late and pushes the layout.
• Web fonts. A font that swaps in after load can be a different size than the fallback, nudging every line of text as it reflows.
• Content injected above existing content. A cookie banner, a promo bar, or a "you might also like" block inserted at the top drops everything below it.

The fix: reserve the space before the thing arrives

The rule is one sentence: tell the browser how big something will be before it loads, so nothing has to move when it does.

• Set width and height on every image, or use the CSS aspect-ratio property, so the box is held from the start.
• Give ad slots and embeds a fixed minimum height in CSS, so the space exists whether or not the content arrives.
• Use font-display: swap and match the fallback font's metrics as closely as you can to reduce the reflow when the web font loads.
• Insert banners and dynamic blocks in reserved space or below the fold, never above content the reader is already looking at.

<!-- Dimensions reserve the box before the image loads -->
<img src="/photo.webp" width="1200" height="800" alt="..." />

/* Or hold the ratio in CSS */
.hero { aspect-ratio: 3 / 2; width: 100%; }

/* Reserve space for a late-loading embed */
.embed { min-height: 315px; }

Google's optimize CLS guide covers the same causes with the debugging traces to find which element shifted. Note that declaring image dimensions helps here and also helps the image behind your LCP, so it is worth doing once, properly.

Be honest: CLS is the cheapest vital to fix

Two honest points. First, of the three vitals this is usually the fastest to move, because the fixes are mostly attributes and CSS rather than a re-architecture. If your CLS is bad, it is often a handful of images missing dimensions. Second, do not chase a perfect zero at the expense of the page. A tiny shift a user never notices is not worth breaking a layout over. Get under the 0.1 line and spend the rest of your effort where it earns more: the content an engine can actually quote.

Verify: find the shifting element, then re-measure

Run your URL through PageSpeed Insights; its diagnostics name the elements that shifted. If the report is unfamiliar, we walk it in how to read PageSpeed Insights. Then check the hub: run a Core Web Vitals audit on your site to see CLS beside LCP and INP. Field data updates on a rolling 28-day window, so the improvement surfaces over weeks while the lab section confirms the shift is gone now.

Then read the page the way a crawler does. Paste your link into our GEO audit or the full AuditLamp audit and we flag images missing dimensions and fonts without a swap strategy, the two most common CLS sources, in seconds. The rest of the fix library covers the failures speed alone cannot solve.