Layout Space Reservation

Layout shift happens when content arrives after paint and pushes existing content out of the way. The user is reading, or about to tap, and everything moves.

The fix is structural rather than reactive: reserve the space in advance, so the late arrival occupies a hole that was already there.

Why it does not reproduce locally

Locally everything loads instantly from cache on a fast connection, so the displacing content arrives before there was anything to displace. The defect exists only under real network conditions, which is why lab testing shows nothing and field data with element attribution is the only reliable diagnostic.

Implementation patterns

• Explicit dimensions or aspect ratios on media, so the browser reserves the box before the bytes arrive.
• Fixed-size containers for advertisements and embeds, which are the most common cause on commercial sites and the one least under the team's direct control.
• Font metric matching between fallback and web font, so the swap does not reflow every line. Or accept the fallback for longer rather than swapping late.
• Skeletons sized to the content that replaces them, not generically sized — a skeleton of the wrong height causes the shift it was meant to prevent.
• Nothing inserted above the viewport after load — banners and notification bars pushing content down are a self-inflicted version of the same problem.
• Animate transform and opacity, never layout properties. The former do not shift; the latter do.

Industry example

Commerce sites investigating a sudden shift regression almost always trace it to a release that added a third-party tag or a client-side personalisation step. The personalisation case is instructive: a placeholder is painted, the personalised content arrives, and it is a different size — so the fix is not to remove the personalisation but to make the placeholder match its replacement's dimensions.

The diagnostic capability that separates a lookup from a hunt is field monitoring that reports which element shifted. Teams without it spend days guessing; teams with it resolve the regression in minutes. If it is not being collected, adding it is the first fix, not the last.

Failure scenarios

• Media without dimensions, the classic and most widespread cause.
• Third-party content in flow, sized by the provider rather than by the page.
• Late font swap with mismatched metrics.
• Generic skeletons that differ in size from their replacements.
• No element attribution in monitoring, making every regression an investigation.

Trade-offs

Reserving space means showing an empty region while content loads, which some designers dislike and which looks worse in a screenshot than a page that fills progressively. That is a real aesthetic cost, and it is almost always the right trade — a visible gap is honest, while a shifting page causes mis-taps.

Fixed containers also constrain content that legitimately varies in size, which for advertising means either accepting wasted space or negotiating fixed slot dimensions with the provider.

Interview question

"Your layout shift score regressed after a release and nobody can reproduce it. Why not, and what is the first piece of data you would go looking for?"