layout shift
Visible content moves unexpectedly as the page loads or updates.
Use this when Text or buttons jump when images, fonts, or embeds arrive.
without the term
“When the page loads, the text jumps down as images and the ad pop in, and people click the wrong button. Can you stop things from moving around?”
with the term · How do you ask a model for layout shift?
Find and fix the cause of these layout shifts. Reserve space for late content and compare a before-and-after loading trace.
What is layout shift?
Layout shifts occur when existing elements change position. Cumulative Layout Shift measures qualifying unexpected shifts over defined windows.
Why does layout shift matter when vibe coding?
Generated layouts often omit reserved space for content that loads later.
How do you do layout shift?
Trace the moving elements, reserve appropriate space, and compare before and after under delayed loading.
What goes wrong with layout shift?
A fixed placeholder height clips content on a smaller viewport.