perf: preload the feed from the shell

`fetchFeed` cannot start until main.js has downloaded, parsed and mounted React,
so the one request this page exists to make was the last one to leave. Nothing
about the URL depends on the bundle, so the preload scanner can have it in flight
in the first few milliseconds instead.

Measured on a 4G/4x-CPU profile with a cold cache and gzip on: the events reach
the screen at ~470ms instead of ~570ms, and the loading state stops being
something a reader can see rather than merely being brief. First contentful paint
is unchanged within noise — the win is that the feed is off the critical path
entirely, arriving at 216ms while the bundle is still downloading.

`crossorigin` on that link is not decoration. `as="fetch"` has to match the
credentials mode of the `fetch()` that follows, and a mismatch is not a no-op:
the browser throws the preload away and downloads the feed twice, which is worse
than not preloading at all. Verified by counting requests in a real browser,
because no test here can see it.

Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>
This commit is contained in:
Lucas Winther
2026-08-20 06:57:22 +02:00
co-authored by Claude Opus 5
parent 3e30ab07aa
commit abed3f86fa
2 changed files with 45 additions and 0 deletions
+18
View File
@@ -62,6 +62,24 @@
}
})();
</script>
<!--
The feed, in flight before the bundle that asks for it.
`fetchFeed` cannot run until main.js has downloaded, parsed and mounted
React, so the one request the page exists to make was starting last: on a
4G/4x-CPU profile the bundle finished at ~900ms and the feed only then
began, landing at ~1260ms. Nothing about it depends on the bundle — the URL
is a constant — so the preload scanner can have it on the wire in the first
few milliseconds instead, alongside the JS rather than behind it.
Resolved against `<base>` above, exactly as `fetchFeed` resolves it against
`document.baseURI`, so this is correct at a domain root and under a Pages
subpath alike. `crossorigin` is not decoration: `as="fetch"` has to match
the credentials mode of the `fetch()` that follows, and a mismatch is not a
no-op — the browser discards the preload and downloads the feed a second
time, which is worse than not preloading at all.
-->
<link rel="preload" href="data/events.v1.json" as="fetch" crossorigin />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link