- Shipped
- August 20, 2026 at 3:33 AM UTC
- Author
- Kamo
- Commit
- 73d73f8
Two scroll listeners on the homepage read `scrollHeight` per event. That is a layout query, and this page is the worst place to make one repeatedly: its sections use `content-visibility: auto`, so scrolling continuously invalidates layout and there is never a clean one to read from — every read forces a synchronous reflow. The document's height does not change while it is being scrolled, so both now measure once and re-measure only on resize or when a ResizeObserver on the document element says something actually changed. HiddenAnimations was the worse of the two and not only for the reflow. It kept its bookkeeping in React state, so it called setState on every scroll event — a render per frame of every scroll — and because both values were in the effect's dependency array, the effect tore down and re-attached the listener each time too. Refs make it invisible to React until the egg actually fires, the listener is passive, and the work is coalesced into one rAF per frame. Also restores Space Grotesk's preload, which is a deliberate reversal rather than a flip-flop: what the hint costs depends on what the bottleneck is. It was removed because it claimed priority against the LCP image, and that contention is now gone — the logo lost its preload and halved in size, and the LCP subparts no longer appear in the report. Without the hint the face is discovered only when the stylesheet parses, which made it a THIRD link in the critical chain (document -> CSS -> font). That is what took maximum critical path latency to 488 ms and pushed the render-blocking estimate up to 300 ms, since removing the stylesheet would have removed the font's dependency on it as well. Verified that the preload and the @font-face resolve to the same URL — Next emits a distinct `.p.` variant for preloaded faces, and a mismatch there would be a wasted hint plus a second download of the same font.