perf: preload the hero font so it arrives before the text it sets #23

Merged

me merged 1 commit from perf/preload-hero-font into main

2026-08-30 03:02:41 +00:00

me commented

2026-08-30 03:00:53 +00:00

Owner

The homepage hero is set in Fraunces, but nothing asks for the font until the
Home chunk mounts — so it starts downloading at ~2.1s and lands at ~4.6s, a
second after the hero has painted in a fallback serif and reflowed.

A transformIndexHtml plugin emits a <link rel="preload"> for it, resolving
the hashed filename from ctx.bundle. A pattern that matches nothing throws, so
a Fontsource rename can't silently drop the preload.

Measured on perf/homepage-loop.mjs, four runs:

	before	after
hero font ready	4639ms	1908–1986ms
FCP	1152ms	1276–1356ms

The ~130ms of FCP is the real cost — the preload competes with the entry bundle
for bandwidth. It still finishes after FCP, so nothing blocks the first paint.

New heroFontMs budget at 2600ms guards the win. Only the upright is preloaded;
adding the italic costs the upright 744ms and it sits below the first fold.

tsc, 71 tests, biome ci, both build modes, all five budgets green.

The homepage hero is set in Fraunces, but nothing asks for the font until the `Home` chunk mounts — so it starts downloading at ~2.1s and lands at ~4.6s, a second *after* the hero has painted in a fallback serif and reflowed. A `transformIndexHtml` plugin emits a `<link rel="preload">` for it, resolving the hashed filename from `ctx.bundle`. A pattern that matches nothing throws, so a Fontsource rename can't silently drop the preload. Measured on `perf/homepage-loop.mjs`, four runs: | | before | after | |---|---|---| | hero font ready | 4639ms | 1908–1986ms | | FCP | 1152ms | 1276–1356ms | The ~130ms of FCP is the real cost — the preload competes with the entry bundle for bandwidth. It still finishes after FCP, so nothing blocks the first paint. New `heroFontMs` budget at 2600ms guards the win. Only the upright is preloaded; adding the italic costs the upright 744ms and it sits below the first fold. `tsc`, 71 tests, `biome ci`, both build modes, all five budgets green.

me added 1 commit

2026-08-30 03:00:53 +00:00

perf: preload the hero font so it arrives before the text it sets

CI / Frontend CI (pull_request) Successful in 57s

Details

CI / Backend CI (pull_request) Successful in 50s

Details

CI / E2E Tests (pull_request) Successful in 6m7s

Details

9304e7516d