perf(homepage): stabilize font loading [Codex] - #1360
jderochervlk wants to merge 3 commits into
Conversation
jderochervlk
changed the title
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
guide | 2f60272 | Commit Preview URL Branch Preview URL |
Sep 18 2026, 02:20 PM |
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 69f5c8f98f
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
|
|
||
| let links = () => [ | ||
| fontPreload("/fonts/subset-Inter-Regular.woff2"), | ||
| fontPreload("/fonts/subset-Inter-SemiBold.woff2"), |
There was a problem hiding this comment.
At the lg breakpoint, the homepage's hl-title switches to font-bold, so the prominent H1 uses Inter 700 rather than this preloaded 600 face. On desktop—the default Playwright viewport and a key performance scenario—the browser therefore still discovers /fonts/subset-Inter-Bold.woff2 only after parsing the stylesheet, leaving the headline font swap this change is intended to prevent. Add the 700 face to the preload set and exercise it in the font-loading assertion.
Useful? React with 👍 / 👎.
69f5c8f to
fc9c3b8
Compare
f4dab0a to
f0b152e
Compare
Lighthouse baselineCompared with target branch
Download the full Lighthouse reports and baseline Commit |
f0b152e to
501f880
Compare
Guide Cloudflare deployment⛅️ wrangler 4.130.0 To deploy this version to production traffic use the command wrangler versions deploy Changes to non-versioned settings (config properties 'logpush' or 'tail_consumers') take effect after your next deployment using the command wrangler versions deploy Changes to triggers (routes, custom domains, cron schedules, etc) must be applied with the command wrangler triggers deploy |
Guide Cloudflare deployment⛅️ wrangler 4.130.0 To deploy this version to production traffic use the command wrangler versions deploy Changes to non-versioned settings (config properties 'logpush' or 'tail_consumers') take effect after your next deployment using the command wrangler versions deploy Changes to triggers (routes, custom domains, cron schedules, etc) must be applied with the command wrangler triggers deploy |
Cloudflare deploymentDeployement ID: c03f8ca5-f857-42d7-80ee-c24da6b47b5e ⛅️ wrangler 4.130.0 ✨ Uploading _redirects |
501f880 to
4dc6a68
Compare
Self-host the homepage Red Hat Mono face and preload the three critical first-viewport fonts through the route links export. Keep font requests on the local origin and cover the preload contract in production Playwright tests.
Record the initial bundle sizes produced by the font-loading layer after rebasing the stack onto the latest master.
4dc6a68 to
2f60272
Compare
1 participant
Context
The homepage currently discovers Red Hat Mono from a Google Fonts stylesheet rendered inside the hero body. That creates a late cross-origin stylesheet-to-font waterfall, while the critical Inter faces are discovered only after the main stylesheet, making the first-visit font swap visible.
This is the third layer in stack #1359, based on #1358, and contributes to #1354.
Changes
Impact
The external stylesheet and two-origin font waterfall are removed, and the three first-viewport faces begin loading directly from the document head. Compared with the preceding stack layer, route metadata adds 187 raw bytes and 22 gzip bytes of JavaScript; the local font-face declaration adds 291 raw bytes and 20 gzip bytes of CSS. DOM and media counts are unchanged.