Avoid large layout shifts

What’s actually happening

Content jumps while the page loads — you start reading a paragraph and it slides down, or you go to tap a button and an ad pushes it out from under your finger. This diagnostic is the one that points the finger: it lists the specific elements that shifted, ranks them by impact, and attributes a root cause. It complements the Cumulative Layout Shift metric, which gives you the score but not the culprit.

Common causes

• Images, videos, or iframes without width and height attributes, so the browser reserves no space and reflows when the media arrives.
• A late-loading web font swapping in at a different size from the fallback, shoving text around (FOUT).
• Ads, embeds, or injected banners inserted into the flow without a reserved container.
• Content added above existing content — a cookie bar, a promo strip, an async-loaded hero — pushing everything below it down.
• Animating layout properties like top, height, or margin instead of transform, which forces neighbors to reflow.

How to fix it

1. Read the attributed root causeRecent Lighthouse versions print the cause next to each shifting element — "Media element lacking an explicit size", "Web font loaded", or "Injected iframe". That label tells you which fix below to apply instead of guessing.
2. Set dimensions on all mediaAdd width and height attributes to every <img>, <video>, and <iframe> (or use the CSS aspect-ratio property). The browser then reserves the correct box before the file loads, so nothing reflows when it arrives.
3. Stabilize web fontsPreload the critical font and use font-display: optional or swap with a size-matched fallback via the size-adjust, ascent-override, and descent-override @font-face descriptors so the swap doesn't change line height. The Fontaine tool generates matched fallbacks automatically.
4. Reserve space for dynamic contentGive ad slots, embeds, and async widgets a fixed min-height container up front. If the slot may be empty, still reserve it — collapsing later causes its own shift.
5. Animate with transform, not layoutMove and resize with transform: translate() / scale() and opacity. These run on the compositor and never trigger reflow, so neighboring elements stay put.