Load in reading order
Paint top to bottom: nav, logo, headline, then the rest. Never shove.
Guillermo Rauch@rauchgLoading sequence was strange. I saw ◆ features ◆ then headline ◆ then nav ◆ finally company logo The nav pushed everything down and caused CLS
Demo 1 replays the exact sequence from his post: features, headline, nav, logo.
Features, headline, nav, logo
Reload both and watch what the nav does to the page.
His loading sequenceBad
Shell first, then fillGood
// app/layout.tsx: nav and logo ship in the first byte, at a fixed size
<header className="h-14">
<Image src="/logo.svg" width={96} height={24} alt="Lumen" priority />
<Nav />
</header>
// app/page.tsx: the headline is static; slow features stream into a sized slot
<h1>Know what shipped, and what broke.</h1>
<Suspense fallback={<FeatureGrid.Skeleton />}> {/* same 3 cards, same height */}
<FeatureGrid />
</Suspense>Pick the arrival order
Reorder the parts, choose reserved space or not, then play.
Your sequenceShifts
Why it matters, pros and cons
Why it matters
People read top down. Anything that lands above what they're reading pushes it away.
Pros
- Nothing moves: CLS stays at 0.
- The first paint already says whose page it is.
- Late content lands in a slot the eye has already skipped.
Cons
- A static shell needs the nav and logo size known up front.
- A skeleton sized wrong shifts anyway; measure the real thing.
- Holding the headline for the nav adds a few ms of blank.