Layout shift happens when visible content moves after the page has started rendering. The CSS fix is usually to reserve the space that late content will need.
The useful question is not “why did the page jump?” It is “which component changed size after the browser had already made a layout decision?” Once you frame the bug that way, layout shift becomes a normal sizing problem. A later image, font, message, badge, embed, or control state arrived without a stable slot. The browser did what it was asked to do: recalculate the layout with the new information.
Start by narrowing the shift to a single boundary. If the whole page appears to move, record the load or interaction and watch the first visible element that changes position. The moving element is not always the offender. A paragraph may jump because an image above it finally got dimensions. A sticky header may jitter because a banner expanded. A card grid may reflow because one card got a late badge. Work backward to the first box whose size changed, then make that box honest before the late content arrives.
Images and media need dimensions
.media-frame {
aspect-ratio: 16 / 9;
background: #eef2eb;
}
.media-frame img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}The frame reserves space before the image finishes loading. The image can arrive without pushing the content below it.
Use aspect-ratio when the media has a predictable shape, and pair it with inline-size: 100% so the reserved space follows the container. Avoid reserving space with arbitrary heights unless the art direction is actually fixed. A fixed height: 320px may look stable on desktop and become wasteful or cropped on narrow screens. The stronger contract is: this media occupies a 16:9 frame, fills the available inline size, and crops in a known way.
For responsive images, keep the HTML dimensions too when you know them. Width and height attributes give the browser an early ratio before CSS and image data finish resolving. CSS can still make the image fluid; the attributes are not a demand that the image render at that exact pixel size.
Embeds need stable regions
If a site uses third-party embeds, the surrounding layout should not collapse to zero and then expand. Reserve a stable region before the embed loads so the rest of the page does not jump.
Embeds are especially risky because the content often arrives from another script and may not match your design system. Treat the embed wrapper as the layout owner. Give it a minimum block size, an aspect ratio, or a loading skeleton that uses the same dimensions as the finished state. Do not let the third-party iframe define the first layout pass.
If an embed can have multiple states, reserve for the state users normally see. A video player, map, or scheduling widget should not load as a one-line placeholder and then become a tall panel. That may be technically correct markup, but it is poor layout ownership.
Font shifts are real
Web fonts can move text when they swap in. Use a font stack with similar metrics, set sensible line heights, and avoid layouts where a single heading line break changes a large section height.
Font shifts usually show up around headings, buttons, and navigation because small metric differences change line wrapping. The CSS side of the fix is to avoid fragile vertical alignment and unbounded headline regions. Let headings wrap naturally, keep line height explicit, and avoid centering an entire first viewport around text whose block size can change. If the hero depends on a title staying on one line, the layout is fragile before the font even loads.
Fallback font selection matters too. A fallback with similar width and x-height reduces the visual distance between the first and final render. That is not a replacement for performance work, but it makes the CSS layout more tolerant of the loading sequence.
Interactive states should not resize tools
Buttons, tabs, counters, and filters should have stable dimensions. A selected state that adds a border can shift neighboring controls unless the border space is already reserved.
.tab {
border: 2px solid transparent;
}
.tab[aria-selected="true"] {
border-color: currentColor;
}The selected tab changes color, not size.
The same rule applies to validation messages, disclosure panels, and filters. If a form can show an error, decide whether the error should reserve space from the beginning or push content in a controlled place. Absolutely positioned errors may avoid shift, but they often overlap controls or disappear at zoom. A reserved error row is usually more honest. For compact interfaces, a summary region above the form can absorb the state change without moving every individual control.
Loading states deserve the same treatment. A button that changes from “Save” to “Saving changes…” should either have enough inline space for both labels or use a stable icon/text pattern. A table that loads rows asynchronously should reserve row height or show a skeleton with the same density as the final rows. Skeletons that are taller or shorter than the finished UI simply move the shift to a more decorative step.
Debug in the order users experience the page
Layout shift has a timeline. Check initial HTML, CSS, fonts, images, scripts, and interaction-driven state in the order they affect the page. If the first shift happens before JavaScript runs, a React state fix will not solve it. If the shift happens only after a personalization script inserts a banner, image dimensions will not matter. Use the browser’s performance recording or layout shift overlay when available, but keep the decision local: a component changed size late; that component needs a stable boundary.
When testing, use real content lengths and slow resources. A local fast connection can hide image, font, and embed shifts. Throttle the network, reload without cache, and test pages at widths where text wraps differently. A shift that is invisible at 1440px may become obvious at 390px because the same heading moves from two lines to four.
The debugging move
Record the page load or interaction, then identify the first element that moves. Work backward to the resource or state that arrived late. Then reserve the space at the component boundary instead of trying to patch every child.