A layout shift occurs when visible content changes position without the visitor moving it. A performance trace can connect the movement to the element that changed and the resource or script that caused it.
Capture the movement
- Record a fresh navigation with the browser performance panel.
- Open the layout-shift events and inspect the affected nodes and their surrounding timeline.
- Repeat with network throttling to expose images, fonts, embeds, or data that arrive late.
Reserve space before content arrives
Give images and video stable dimensions, reserve a slot for embeds and ads, and avoid inserting banners above text after the page is already visible. For fonts, compare fallback and final metrics instead of hiding the text while a file loads.
Do not treat every shift as a CSS bug. A changing label, validation message, or asynchronous result may need a stable layout or clearer interaction. Verify the change on a representative mobile viewport and on a real page load.