Read the scroll position from an observer, not from layout

Performancekamo-marketing
Shipped
August 20, 2026 at 10:18 PM UTC
Author
Kamo
Commit
861e159

The nav's scrolled/at-top state came from a scroll handler that read window.scrollY, and the mount effect called that handler synchronously during React's commit phase. Reading a scroll offset there forces the browser to compute layout on the spot, before the first paint has happened, which is precisely the forced reflow Lighthouse was reporting against the router chunk. An IntersectionObserver on a 1x20px sentinel at the top of the document answers the same question — is the page scrolled past 20px — without asking for geometry at all. The browser reports it out of a pass it was already going to do. The sentinel is absolutely positioned and pointer-events: none, so it is out of flow and cannot shift or intercept anything.

All changes

Like what you see shipping?

Every one of these updates lands in your workspace automatically. Start free and watch it grow week after week.

Start Free ForeverView Pricing