Skip to content

perf(site): paint before hydration, eliminate CLS, trim bundle#40

Open
c-1k wants to merge 1 commit into
masterfrom
ship/site-perf
Open

perf(site): paint before hydration, eliminate CLS, trim bundle#40
c-1k wants to merge 1 commit into
masterfrom
ship/site-perf

Conversation

@c-1k

@c-1k c-1k commented Jun 1, 2026

Copy link
Copy Markdown
Contributor

Summary

Performance + correctness pass on the Next.js 15 marketing/docs site (site/). No SDK code touched — no two-phase spend, hash-chain, or usertrust-verify changes.

The site felt laggy because the hero shipped blank and popped in after JS hydration (the LCP headline was server-rendered at opacity:0 until motion hydrated). This PR moves first paint off the hydration path and tightens bundle/animation/data-fetch cost.

Changes

  • Hero entrance → CSS (hero-rise keyframe) instead of motion initial/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).
  • Stats → server component (getPackageStats, revalidate: 3600, passed as props) instead of a client useEffectCLS 0.00 (no placeholder→value reflow) and no more 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 → server components (no client JS needed).
  • OG route runtime: "edge"dynamic: "force-static" (pre-rendered, 0 runtime invocations; ƒ).
  • next.config: optimizePackageImports + AVIF/WebP. Homepage route JS 19.6 → 12.6 kB.
  • Compositor-friendly animations: glow-ring box-shadowopacity, shimmer paused until hover.
  • Fixed a stale model name in a code sample (claude-sonnet-4-20250514claude-sonnet-4-6).
  • Deleted public/fonts/JetBrainsMono[wght].woff2 — a 303 KB GitHub HTML error page mislabeled as a font, never referenced.

Test plan

  • npx biome check . — clean
  • npx vitest run — 1483/1483 pass (no SDK changes)
  • cd site && next build — ✓ compiles, 25/25 static pages, homepage Static + ISR (1h), /og Static
  • Runtime trace: FCP ~196 ms, CLS 0.00, no console errors; hero renders pixel-identical (verified by screenshot); badge shows v1.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

  • External review (GPT-5.4): 4 findings — 2 fixed (reduced-motion tagline gap, fetch shape-guard), 2 verified-and-kept (cross-package import is build-inlined + repo is fully checked out on Vercel; OG static proven by build).
  • Internal code review: 1 medium regression found + fixed (inline pulse-glow lost reduced-motion coverage), 2 low improvements applied.
  • Security review: APPROVE — no P0/P1/P2; server-side fetch is a net security improvement (removes visitor-IP leak to GitHub).

🤖 Generated with Claude Code

@c-1k

c-1k commented Jun 1, 2026

Copy link
Copy Markdown
Contributor Author

Codex Gate — Degraded Mode

The local Codex gate could not run in this environment:

  • scripts/codex-review.sh does not exist in the repo.
  • The codex CLI is installed but its vendored binary is missing (ENOENT).

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 useReducedMotion, server/client boundary, unused imports, type errors).

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 Hero props."

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.

@c-1k c-1k marked this pull request as ready for review June 1, 2026 22:42
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>
@c-1k c-1k force-pushed the ship/site-perf branch from 91a352e to a1e925c Compare June 1, 2026 22:42
@c-1k

c-1k commented Jun 1, 2026

Copy link
Copy Markdown
Contributor Author

CI Results (Final) — a1e925c

Step Status
DCO
Typecheck
Lint
Tests + Coverage ✓ (49s)

All green.

@c-1k

c-1k commented Jun 1, 2026

Copy link
Copy Markdown
Contributor Author

Ship Pipeline Complete

Branch: ship/site-perf → PR #40Commit: a1e925c
Pipeline stages: 0–15 ✓ (16 MERGE awaits user)

Audit Trail

  • Plan/diff review (GPT-5.4, Stage 1b): 4 findings — 2 fixed (reduced-motion tagline gap, server-fetch shape guards), 2 verified-and-kept (build-inlined cross-package import; OG static proven by build).
  • Internal code review (Stage 6): 1 medium regression found + fixed (inline pulse-glow lost reduced-motion coverage → converted to a class), 2 low improvements applied (hero bgOpacity reduced-motion gate, GitHub User-Agent).
  • Security review (Stage 6, in-house): APPROVE — no P0/P1/P2. Server-side stats fetch is a net security improvement (removes visitor-IP leak to GitHub).
  • Security review (Trail of Bits, Stage 6b): folded into in-house pass — zero security surface (no SDK/crypto/credential/audit code touched).
  • Codex gate (Stage 11): degraded (no scripts/codex-review.sh; codex CLI binary missing). Substituted an independent GPT-5.4 review of the final committed diff → CLEAN.
  • CI (Stage 13): dco ✓ · typecheck ✓ · lint ✓ · tests+coverage ✓.

Summary

  • Hero paints before JS hydration (CSS hero-rise); FCP ~196ms, CLS 0.00.
  • Stats server-fetched (RSC + ISR), version sourced from packages/core/package.json (now v1.3.0), homepage route JS 19.6 → 12.6 kB, OG ƒ → ○, 303 KB junk "font" removed.
  • 1483/1483 tests pass; no SDK code touched.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant