Late-arriving content pushes already laid-out nodes

What it is

Nodes already committed to the screen get shoved when content arrives late. That event is a layout shift: not “the page is slow,” but a second layout rewriting geometry the first layout already painted. Once the engine has assigned used boxes, an ad slot, recs rail, banner, or any late-growing in-flow block forces every following box to recompute its position. What the user sees is laid-out nodes moving, not empty space filling in.

Why it happens

Document flow is a chain of geometric constraints. Each in-flow box’s block-start depends on the used height of earlier siblings. The first layout closes that chain while content is still missing; pixels are committed. The second layout reopens the same chain when the late node arrives, so every node after the insertion point translates. The delta is the difference between two layout trees for the same node, not the download time of the resource.

Cumulative Layout Shift (CLS) weights unexpected movement by the fraction of the viewport it affects. Shifts the user caused—expanding an accordion they opened—are usually excluded. Whether a shift occurs depends on whether late content changes the position of already-painted nodes; when the bytes arrive only chooses the frame.

Studying it

Lab tools synthesize a single load (Lighthouse and kin) and emit CLS; field data (CrUX or first-party RUM) records shifts across a real session window. The two often show a metric mismatch: the lab tends to block third-party scripts and reuse cached fonts, while the field includes late ads and font swaps. Independent variables: insertion point relative to painted content, insertion delay, whether the slot already has a definite size. Outcomes: CLS, largest single shift score, and layout-shift source nodes. A lab score is not a field promise—session length and third-party timing differ.

Where it stops holding

User-initiated expansion is not an unexpected shift. Out-of-flow overlays do not push following nodes, though they may occlude controls—that is covering, not shoving. Shifts entirely outside the current viewport are invisible and do not enter CLS. If a prerender or print snapshot is shown only after content is complete, the push happened before seeing and does not apply to that presentation.

Applying it

• Give any slot that will grow a definite height or aspect-ratio before first layout, so late content fills a box instead of displacing neighbors.
• Do not insert new in-flow blocks above already-painted body start or the primary action bar.
• Subscribe to layout-shift with PerformanceObserver, drop entries with hadRecentInput, and attribute remaining sources.
• Verify with a cold load plus throttled network, marking displacements frame by frame; compare field CLS percentiles with the lab and close the sources that explain the gap.

Related

• Same group: R3.05.2 Displacement causes misclicks · R3.05.3 Dynamic content needs reserved space · R3.05.4 Render-blocking resources determine the first visible moment · R3.05.5 Already-interactive regions must not be reflowed by late content · R3.05.6 Async inserts should occupy positions that do not interrupt reading
• Adjacent: I2.07 Perceived performance · R3.15 First-paint metrics and interaction readiness
• Search terms: layout shift · CLS · late content