Lemma
No. 054

UI Design

Layout Shift

A layout shift is when elements jump or move unexpectedly while a page is still loading. Content that has already appeared gets pushed around as more arrives.

Why it matters

Sudden shifts are jarring and can make people tap the wrong thing when a button moves at the last moment. Stable loading feels calmer and more trustworthy.

In depth

Common causes are images without set dimensions, web fonts swapping in, or ads and banners injected after the page draws. The fix is to reserve space ahead of time, so an element's slot exists before its contents arrive. Layout shift is measured by Cumulative Layout Shift, one of Google's Core Web Vitals, because it has such a direct effect on how usable a page feels.

Real-world example

You start reading an article when an image finishes loading above it, shoving the text down and losing your place. Reserving space for that image would have kept everything still.

Try it

The headline loads instantly.

Then an image arrives a moment later.

Back to index