Prevent unexpected layout shifts

A layout shift happens when content that’s already on screen moves to a different position. You’re reading a paragraph, an image loads above it, and the paragraph jumps down. Or you’re about to tap a link, a banner appears, and you tap an ad instead.

Movement itself isn’t the problem. A menu that slides open when you click it is expected. The problem is movement the visitor didn’t ask for.

Reserve the space

Most shifts come from content whose size the browser doesn’t know until it arrives. The fix is to tell it in advance.

For images, always set width and height:

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

The browser uses the two numbers to compute an aspect ratio, and reserves a box of the right shape before a single byte of the image arrives. This works even when CSS makes the image responsive with max-width: 100% and height: auto.

Do the same for video, ads, embeds, and any widget that loads asynchronously. If you don’t know the exact size, reserve a minimum with min-height on the container.

Other common causes

• inserting a banner or notification above existing content instead of overlaying it
• swapping a fallback font for a web font with very different metrics
• a component that expands without reserved space when its data arrives
• animating height, top, or margin, which changes the layout of everything nearby

For that last one, animate with transform instead. A translateY() moves the element on screen without changing the geometry around it. Transforms aren’t free, big moving layers still cost paint and memory, but they don’t push other content around.

Find shifts in a recording

Record a page load in the Performance panel and look at the Layout Shifts track. Each shift is a marker. Click one and DevTools highlights the elements that moved and shows what happened right before the shift.

Fix the cause, not the element that moved. If a paragraph jumped because an image above it loaded late, the paragraph is fine. The image needs dimensions.

Make a shift appear on purpose

Pick an image on a page you work on and remove its width and height attributes. Check “Disable cache” and record a reload. You’ll see a shift marker the moment the image loads, and the content below it moves.

Put the attributes back and record again. The marker is gone. Seeing the difference once in your own project makes it hard to forget.