Layout shift and how to stop it
Nothing erodes trust like a button that moves just as you tap it. Most shifts come from four causes.
The frustrating jump
You are reading an article, and the paragraph suddenly drops half a screen because an advertisement loaded above it. You reach for a button, and it slides away as a banner appears, so you tap something else instead. Cumulative layout shift measures exactly this: how much visible content moves unexpectedly during a visit.
A good score is below 0.1.
Cause one: images without dimensions
When the browser does not know an image's size in advance, it allocates no space for it. When the image arrives, everything below it moves down. Setting width and height attributes on every image, or an aspect-ratio in CSS, lets the browser reserve the right space from the start.
Cause two: late-loading embeds and ads
Third-party embeds, advertisements and widgets often inject content of unknown size. Reserve a slot with a minimum height that matches the most common size. If the slot sometimes stays empty, a reserved blank space is still better than a sudden jump.
Cause three: web fonts
When a web font replaces a fallback with different metrics, text can reflow and change the height of its container. Matching fallback metrics with size-adjust and the override descriptors, or using font-display: optional, minimizes this.
Cause four: content injected above existing content
Cookie banners, promotional bars and "new version available" notices that push the page down are common offenders. Overlay them instead, or place them at the bottom of the viewport, or reserve their space in the initial HTML.
Shifts that do not count
Layout changes within half a second of a user interaction are excluded from the metric, because the user expects something to happen when they click. Expanding an accordion is fine. A shift that happens on its own, without any input, is what counts.
Animations
Animating top, left, width or height moves layout and can register as shift. Animating transform does not, because it changes how an element is painted without affecting the layout of anything around it.
Finding the culprits
Developer tools can highlight regions that shifted as the page loaded. Field data with attribution reports which elements moved most often for real visitors. The results are frequently surprising: a single late-loading component in a shared layout can be responsible for most of the shift across an entire site.
The payoff
Fixing layout shift rarely requires deep engineering. It is mostly a matter of reserving space for things before they arrive, and it makes a site feel noticeably calmer and more trustworthy.