Skip to content

perf: paint the home page before analytics and motion load - #8

Merged
jakesciotto merged 2 commits into
stagingfrom
perf/first-paint
Oct 22, 2026
Merged

jakesciotto merged 2 commits into
stagingfrom
perf/first-paint

Conversation

@jakesciotto

Copy link
Copy Markdown
Owner

Summary

  • Tiles render visible at first paint. Before this change, every tile started at opacity: 0 and waited for GSAP to hydrate and reveal it.
  • Only tiles below the fold animate in on scroll. The hero name animates with CSS keyframes and ships no JavaScript.
  • posthog-js loads at browser idle through a dynamic import. app/lib/analytics.mjs queues up to 50 events until it attaches.
  • GSAP, ScrollTrigger and Lenis load through one dynamic import in app/lib/motion.mjs. @gsap/react is removed.
  • next goes from 16.4.0 to 16.4.2. This clears the critical and high advisories that fail the audit job on staging.
  • The projects tile lists easton mcp.

Measurements

production (staging code) this branch
initial home page JS, gzip -9 382 KB 231 KB

The server side was already fast. HTML TTFB is 145 ms and every API route answers in 125 to 180 ms from the CDN. So the time went to client JS and the opacity gate.

Trade-offs

  • PostHog misses an exception that fires before idle. The pageview still fires at init.
  • The first accordion click waits for the GSAP chunk if it has not loaded yet.

Checks

  • pnpm test: 75 pass, 0 fail (3 new analytics tests).
  • pnpm format:check and pnpm build: pass.
  • coherence spec --check and coherence run: 22 of 22 pass.
  • Headless Chrome on next start: the first frame shows all static tiles, and the settled frame shows every data tile.

Not in this PR

  • Server rendering of tile data with 'use cache'.
  • The apex jakesciotto.com 307 to www (Vercel domain setting).

🤖 Generated with Claude Code

jakesciotto and others added 2 commits October 22, 2026 11:46
GHSA-p3m5-59mp-jv5r (denial of service in App Router server actions)
and the critical unauthenticated remote code execution advisory cover
next 16.0.0 through 16.4.0. The audit gate went red on staging at
17:39 UTC. Format, tests (72), build and audit pass on 16.4.2.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DrYM9YJajWKgE2fHSAALBw
Tiles render visible at first paint. Only tiles below the fold animate in
on scroll. The hero name animates with CSS keyframes. posthog-js, GSAP,
ScrollTrigger and Lenis load through dynamic imports, so the initial home
page JS drops from 382 KB to 231 KB (gzip). app/lib/analytics.mjs queues
up to 50 events until posthog-js attaches.

Also bumps next to 16.4.2 for GHSA-2464-fhr4-w9xw and GHSA-p3m5-59mp-jv5r,
removes @gsap/react, and adds easton mcp to the projects tile.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@vercel

vercel Bot commented Oct 22, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
portfolio Ready Ready Preview Oct 22, 2026 5:50pm UTC

@jakesciotto
jakesciotto merged commit 54bdd4b into staging Oct 22, 2026
12 checks passed

This branch was successfully deployed

1 active deployment
Preview — a48ebd34 Deployed Oct 22, 2026 by vercel[bot]
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