Prevent unexpected layout shifts

Layout shift happens when visible content changes position after it has already been presented. The frustrating part is not movement itself; it is unexpected movement that disrupts reading or causes a visitor to click the wrong target.

Reserve geometry before late content arrives:

<img
  src="product.jpg"
  width="1200"
  height="800"
  alt="A red bicycle"
>

The browser can derive an aspect ratio from these dimensions even when CSS makes the image responsive. Apply the same idea to video, ads, embeds, and asynchronously loaded widgets.

Other common causes include:

• inserting a banner above existing content
• swapping to a font with substantially different metrics
• expanding a component without reserved space
• changing layout-related properties during an animation

Prefer transforms for purely visual motion because they do not change surrounding layout geometry. This does not mean every transform is free: large moving layers can still increase painting, raster, or memory cost.

Record the page in the Performance panel and inspect the Layout Shifts track. Select a shift to see which elements moved and what changed immediately before it. Fix the cause, not merely the element that happened to be displaced.

As an experiment, remove an image’s dimensions, load with cache disabled, and record. Restore the dimensions and repeat. The comparison makes reserved space visible in both the page and trace.