Fixing Cumulative Layout Shift: reserve space for everything

How is CLS calculated?

For each shift, the browser multiplies the impact fraction (how much of the viewport moved) by the distance fraction (how far it moved). CLS is the largest burst of shifts within a session window, not the sum of everything — so one bad shift on load matters more than many tiny ones.

Shifts within 500ms of a user interaction are excluded, which is why expanding an accordion does not count against you but a banner appearing on its own does.

Cause 1: media without dimensions

/* Reserve space from intrinsic dimensions and scale responsively */
img, video {
  max-width: 100%;
  height: auto;      /* with width/height attributes set on the element */
}

/* For containers whose ratio is known but content loads later */
.embed {
  aspect-ratio: 16 / 9;
  width: 100%;
}

• Set width and height attributes on every img element — browsers derive the aspect ratio from them.
• Use aspect-ratio for iframes, embeds and video players.
• Give skeletons the same dimensions as the real content they replace.
• Reserve space for anything conditional: badges, ratings, promotional strips.

Cause 2 and 3: injected content and fonts

Anything appearing above existing content pushes it down, and a font swapping to different metrics reflows every line of text.

1. 1Reserve a fixed-height slot for cookie banners, announcement bars and ad units — even if empty.
2. 2Prefer overlays and bottom-anchored positioning for notices so nothing is displaced.
3. 3For fonts, use font-display: swap with size-adjust and the ascent/descent override descriptors so the fallback occupies the same space.
4. 4Preload the fonts used above the fold so the swap happens early or not at all.
5. 5Self-host fonts to avoid a third-party connection delaying the swap.

@font-face {
  font-family: "Fallback";
  src: local("Arial");
  size-adjust: 105%;
  ascent-override: 92%;
  descent-override: 24%;
}
body { font-family: "Inter", "Fallback", sans-serif; }

Cause 4 and 5: animation and late-loading data

• Animate transform and opacity only — they are composited and do not trigger layout.
• Never animate width, height, top, left, margin or padding on anything above the fold.
• When data arrives and changes the size of a container, reserve the maximum expected height in advance.
• Use CSS containment on independent widgets so their internal changes cannot affect the page around them.

How do you find shifts in practice?

1. 1DevTools Performance panel: record a load and look at the Layout Shift entries, which highlight the moved region.
2. 2Enable 'Layout Shift Regions' in the Rendering panel to see shifts highlighted live as you browse.
3. 3Collect CLS attribution in production — the web-vitals library reports the largest shifting element.
4. 4Test with a slow network; many shifts only appear when resources arrive late.
5. 5Test with content of varying length — long product names and missing images both cause shifts that a happy-path test misses.