perf(site): paint before hydration, eliminate CLS, trim bundle#40
Conversation
Codex Gate — Degraded ModeThe local Codex gate could not run in this environment:
Per the pipeline's degraded-mode path, I proceeded without Codex and substituted an independent model review (GPT-5.4) on the final committed diff — specifically targeting anything the remediations might have introduced (hero tagline ternary nesting, hook-rules from Result: CLEAN — "no build/runtime/type regressions; the hero reduced-motion ternary is balanced, hook usage stays in client components, and the server-fetched stats flow matches the new Combined with the GPT-5.4 plan/diff review (Stage 1b), internal code review, and security review (all addressed), the change has had three independent review passes. |
Performance + correctness pass on the Next.js marketing/docs site (site/). No SDK code touched (no two-phase spend, hash-chain, or verify changes). - Hero entrance moved from motion JS (initial/animate, hydration-gated) to a CSS hero-rise keyframe so above-the-fold content paints on the first frame (FCP ~196ms, was gated on JS hydration). Reduced-motion fully honored (orbs, tagline rotation, glow, shimmer, scroll-fade). - npm/GitHub stats fetched server-side (RSC, revalidate 1h) and passed as props instead of a client useEffect — eliminates the placeholder->value layout shift (CLS 0.00) and the unauthenticated GitHub rate-limit failures. Hardened against unexpected API shapes; GitHub call sends a User-Agent. - Version badge sourced from packages/core/package.json at build time (was hardcoded, stale v1.2.2 -> now v1.3.0, drift-proof). - 5 components converted to server components (no client JS needed). - OG route runtime:edge -> dynamic:force-static (pre-rendered, 0 invocations). - next.config: optimizePackageImports + AVIF/WebP. Homepage route JS 19.6->12.6kB. - Compositor-friendly animations: glow-ring box-shadow->opacity, shimmer paused until hover, reduced-motion covers utility/decorative animations. - Fixed a stale model name (claude-sonnet-4-20250514 -> claude-sonnet-4-6). - Deleted public/fonts/JetBrainsMono[wght].woff2 — a 303KB GitHub HTML error page mislabeled as a font, never referenced. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Signed-off-by: Cam <cam@camwhiteus.com>
CI Results (Final) —
|
| Step | Status |
|---|---|
| DCO | ✓ |
| Typecheck | ✓ |
| Lint | ✓ |
| Tests + Coverage | ✓ (49s) |
All green.
Ship Pipeline CompleteBranch: ship/site-perf → PR #40 • Commit: Audit Trail
Summary
|
Summary
Performance + correctness pass on the Next.js 15 marketing/docs site (
site/). No SDK code touched — no two-phase spend, hash-chain, orusertrust-verifychanges.The site felt laggy because the hero shipped blank and popped in after JS hydration (the LCP headline was server-rendered at
opacity:0until motion hydrated). This PR moves first paint off the hydration path and tightens bundle/animation/data-fetch cost.Changes
hero-risekeyframe) instead of motioninitial/animate→ above-the-fold paints on the first frame. Measured FCP ~196ms (was hydration-gated). Reduced-motion fully honored (orbs, tagline rotation, glow, shimmer, scroll-fade).getPackageStats,revalidate: 3600, passed as props) instead of a clientuseEffect→ CLS 0.00 (no placeholder→value reflow) and no more unauthenticated GitHub rate-limit failures. Hardened against unexpected API shapes; GitHub call sends aUser-Agent.packages/core/package.jsonat build time (was hardcoded stalev1.2.2→ nowv1.3.0, drift-proof).runtime: "edge"→dynamic: "force-static"(pre-rendered, 0 runtime invocations;ƒ→○).optimizePackageImports+ AVIF/WebP. Homepage route JS 19.6 → 12.6 kB.box-shadow→opacity, shimmer paused until hover.claude-sonnet-4-20250514→claude-sonnet-4-6).public/fonts/JetBrainsMono[wght].woff2— a 303 KB GitHub HTML error page mislabeled as a font, never referenced.Test plan
npx biome check .— cleannpx vitest run— 1483/1483 pass (no SDK changes)cd site && next build— ✓ compiles, 25/25 static pages, homepage○Static + ISR (1h),/og○Staticv1.3.0, stats server-rendered (no—flash)Files changed
13 modified + 1 new (
app/lib/version.ts), 1 deleted (junk font).+156 / −1606.Review audit trail
pulse-glowlost reduced-motion coverage), 2 low improvements applied.🤖 Generated with Claude Code