How to fix layout shift

Why the page jumps

A layout shift happens whenever something already on screen moves to a different position without the visitor causing it. The browser scores each shift by how much of the viewport moved and how far, and CLS is the worst burst of shifts in any five-second window.

The cost is not aesthetic. It is the moment you go to tap “Continue”, an image finishes loading above it, and you tap “Delete account” instead.

The five causes, in order of how often they turn up

1. Images and video with no dimensions

Without width and height, the browser reserves nothing and everything below snaps down when the file arrives. Set the intrinsic pixel dimensions as attributes and let CSS handle the display size — modern browsers derive an aspect ratio from the attributes and reserve the right box.

<img src="/photo.jpg" width="1600" height="900" alt="…">

img { width: 100%; height: auto; }  /* CSS still controls display size */

2. Ads, embeds and iframes

Ad slots are the single biggest source of CLS on content sites, because the ad’s height is not known until it arrives — and sometimes it does not arrive at all. Reserve the largest size the slot can serve with min-height, and never collapse an unfilled slot to zero. A visible empty space is worth more than a page that jumps.

3. Web fonts swapping

A fallback font with different metrics reflows every line of text when the real font arrives. size-adjust, ascent-override and descent-override on a @font-face fallback let you match the metrics closely enough that the swap moves nothing.

4. Content injected above existing content

Cookie banners, promo bars, “you have items in your basket” strips. If it is inserted at the top of the DOM after paint, everything shifts. Either render it in the initial HTML, or overlay it with position: fixed so it takes no space in the flow.

5. Animating layout properties

Animating height, top, margin or width forces a re-layout on every frame, and each one is a shift. Use transform instead — it runs on the compositor and never touches layout.

Finding the actual culprit

1. Open Chrome DevTools, Performance panel, tick Screenshots, record a reload with the network throttled to Slow 4G. The Experience track marks each shift; click one and it names the element that moved.
2. Or paste this in the console and reload — it logs every shift with the nodes involved:

new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (!entry.hadRecentInput) console.log(entry.value, entry.sources);
  }
}).observe({ type: "layout-shift", buffered: true });

Do this on a phone-sized viewport with an empty cache. CLS on desktop is often zero while mobile is a mess, because the narrow layout stacks things that sat side by side.

One thing to be careful about

Shifts within 500ms of a real interaction are excluded from the score, because expanding an accordion is expected. That is a scoring rule, not permission — an unexpected jump still costs you the sale even when it does not cost you the metric. And if your CLS is good but your LCP is bad, fix LCP first: it is the one that decides whether people stay long enough to be annoyed.