Cumulative Layout Shift (CLS) too high

What’s actually happening

You start reading or reach for a button, and the layout shoves down because an image, ad, or banner loaded in above it. CLS scores that motion: 0.1 or below is good, above 0.25 is poor. The classic tell is tapping a link and hitting the wrong one because an ad slot expanded a split second earlier. It's measured across the whole page lifecycle, so a shift triggered by scrolling counts too.

Common causes

• Images, videos, or iframes with no width/height (or no CSS aspect-ratio), so the browser reserves zero space until the file loads
• Web fonts swapping (FOIT/FOUT) — the fallback and the real font have different metrics and the text reflows
• Ads, embeds, or cookie banners injected above existing content with no placeholder reserved
• Content inserted dynamically (lazy-loaded sections, A/B test variants) that pushes the rest of the page down
• Late-loading CSS that restyles elements after first paint

How to fix it

1. Identify each shift in DevToolsOpen the Performance panel, record a load, and look at the Layout Shift markers (or use the Lighthouse CLS audit). Each entry shows the element and its shift score so you fix the biggest offender first.
2. Put width and height back on every image and iframeAdd explicit width and height attributes (or aspect-ratio in CSS). The browser then reserves the right box before the file arrives, so nothing reflows when it lands. This is the single highest-impact fix.
3. Reserve space for ads, embeds, and bannersGive every ad slot and embed a fixed min-height container matching its rendered size, and render cookie/notification bars as overlays (position: fixed) instead of pushing content down.
4. Tame font swappingUse font-display: optional for body text, preload the primary web font, and pick a fallback with similar metrics (size-adjust / the f-mod descriptors) so the swap doesn't reflow the page.
5. Stop injecting content above the foldIf you must insert content after load (promos, personalization), place it below existing content or in pre-sized slots — never shove the visible layout downward.