mirror of
https://github.com/nexu-io/open-design.git
synced 2026-06-01 03:14:35 +07:00
5f7d65d513
Two PSI-targeted wins (split from #2599 follow-up). 1. New `resource-hints.astro` mounted in every page's <head> declares `<link rel="preconnect" href="https://api.github.com" crossorigin>`. The inline enhancer script on /` issues 3 fetch() calls to api.github.com right after DOMContentLoaded (stars, latest release, contributors). Without preconnect each pays a full DNS + TCP + TLS handshake (~150-300ms) inline with the fetch. With preconnect those handshakes happen in parallel with HTML parse and all three share one warmed HTTP/2 connection. 2. Wrap the scroll listener's read + classList write in requestAnimationFrame. Trackpads and high-rate wheels fire scroll faster than display refresh, and every callback that hits classList triggers layout recalc. PSI was attributing ~700ms of "forced reflow" to the un-throttled version. The rAF gate collapses each burst to one DOM mutation per frame; `{ passive: true }` is preserved so the listener still doesn't block the scroll thread. Same throttling pattern mirrored to `header-enhancer.astro` (used by every sub-page) and `home-enhancer.astro` (kept in lockstep even though /` currently uses its own inline copy). Expected PSI delta: - "Preconnect to required origins" hint: cleared - "Forced reflow" diagnostic 700ms → near zero - LCP: small bonus from earlier GH fetch warm-up (~100-300ms)
21 lines
917 B
Text
21 lines
917 B
Text
---
|
|
/*
|
|
* Resource hints — preconnect to third-party origins the page is about
|
|
* to talk to, so the TLS handshake completes before the first fetch().
|
|
*
|
|
* Why preconnect instead of dns-prefetch:
|
|
* preconnect performs DNS + TCP + TLS warmup; dns-prefetch only the
|
|
* DNS lookup. For api.github.com we issue 2-3 fetch() calls from
|
|
* the inline enhancer scripts almost immediately on page load
|
|
* (stars / latest release / contributors), so the full TLS warmup
|
|
* saves ~150-300ms per fetch on first visit. After that all calls
|
|
* share the same warmed connection via HTTP/2 multiplexing.
|
|
*
|
|
* Why `crossorigin`:
|
|
* GitHub API responds with CORS. Without the crossorigin attribute
|
|
* the browser opens a separate (non-CORS) connection, then opens
|
|
* another (CORS) one when fetch() runs, and the preconnect is wasted.
|
|
*/
|
|
---
|
|
|
|
<link rel='preconnect' href='https://api.github.com' crossorigin />
|