What is layout shift?

Layout shift is content moving after it rendered. The user aims at a button, something loads above it, the button jumps, and the click lands on whatever took its place. Google measures the phenomenon as Cumulative Layout Shift (CLS), one of the Core Web Vitals, but the metric matters less than the behavior: pages that move under people's hands get clicked wrong.

What causes layout shift

Almost all shift comes from elements that reserve no space before they load:

• Images and embeds without dimensions. The browser cannot hold room for a picture it knows nothing about, so content renders high and drops when the image arrives.
• Late-injected banners. Cookie notices, promo bars, and ad slots that mount after first paint push everything below them.
• Web fonts swapping in. A fallback font renders, the real font loads with different metrics, and every line reflows.
• Content that arrives from an API. A list that renders empty and then fills shoves the buttons below it down the page.

Why it costs more than a metric

A shift at the wrong moment converts intent into error. The user meant to click "Add to cart" and hit the banner that displaced it. They meant to dismiss a modal and opened a link. Some of those errors are silent, some trigger rage clicks on the element that moved, and some fire actions the user never wanted, which is worse than no action at all.

The nastiest property of shift bugs is that they are timing-dependent. On a fast connection in the office, everything loads before anyone can aim. On a phone on cellular, the page moves for two full seconds. The team never sees what the audience lives with.

How to fix it

The fixes are mechanical once you know which elements move:

• Give every image, video, and embed explicit dimensions or an aspect-ratio box.
• Reserve space for anything injected late: render the banner's empty slot immediately, fill it when ready.
• Use font-display: optional or metric-compatible fallback fonts so text does not reflow.
• Render skeletons at final size for API-fed content instead of collapsing and expanding.

Then confirm it in behavior rather than trusting the metric alone. If misclicks and rage clicks near the top of the page fall after the fix ships, the shift was the cause. A free scan shows which elements on your pages are collecting the evidence.