[ashtonanderson]

Eighth round: the analysis page's Moves by Rating chart loads after the page instead of with it. Stacked on #329 (claude/perf-round-7); this PR's base is that branch. Details are in LOADING.md ("Round 8").

Change (c16c4fa)

• Why: recharts and its d3 helpers (~320 KB of JavaScript, uncompressed) were the largest part of the analysis page's start-up code, all for one chart. On desktops the chart is in the sidebar; on phones it's below the board.
• What: the chart (MovesByRatingArea) now loads with next/dynamic once MovesByRating renders. The panel and its heading draw at once, and a placeholder of the chart's height holds its place.
• Elsewhere: puzzles, drills, broadcasts and the home page's sections use the same component, so they get the same change.
• Test: MovesByRating's test renders the chart directly through a mocked next/dynamic, and still checks that the chart redraws only when its moves change.

Results (round 7 → this branch)

Local builds. The phone is Chrome's 4x CPU throttling with 4G. 5 runs each, builds alternating.

analysis	phone, first visit	desktop
JavaScript at start-up (build, gzip)	417 → 311 kB	417 → 311 kB
Game fully visible	2.65 → 2.56 s	0.65 → 0.59 s
Moves by Rating chart drawn	2.98 → 3.13 s	0.77 → 0.79 s
Main-thread work, first 10 s	6.51 → 6.66 s

• Game: fully visible sooner in 4 of 5 phone pairs and 5 of 5 desktop pairs.
• Where the saving comes from: mostly the download. Recharts' code only ran when the chart was drawn, so script time is unchanged. On this emulated 4G (9 Mbps) the 106 kB take about 0.1 s; slower connections save more.
• Layout: the panel and chart are at the same place and size as before, on a Pixel 7 and at 1440 × 900.

Lighthouse (phone settings, local builds, 3 runs each):

	before	after
Analysis score	57–66 (median 66)	59–67 (median 64)
Analysis blocking time	2.72 s	2.31 s
Analysis speed index	3.02 s	3.07 s
/puzzles score	42	42

Lighthouse's main content is the board in both builds. Its runs overlap: 2.45–3.91 s before, 2.60–3.44 s after.

Stockfish

Checked with scripts/perf/chart-probe.mjs on the analysis page, 8 steps per run, each pair run in both orders.

	round 7 → this branch
Desktop: depth 12 after a step	0.03 ± 0.02 s sooner (sooner on 19 of 32 steps)
Desktop: depth reached before the next step	17.03 → 16.94
Phone: depth 12 after a step	0.23 ± 0.24 s sooner (sooner on 38 of 63 steps)
Phone: steps reaching depth 12	64 → 63 of 64
Phone: depth reached before the next step	14.69 → 14.61

On the phone the build run first in a pair comes out slower:

• With round 7 run first, the branch was 0.93 s sooner.
• With the branch run first, it was 0.48 s later.

That's why the order is balanced.

Testing

• npm test (89, with main's), npx tsc --noEmit and npm run lint pass, rebased on main after Capture PostHog web vitals again #330 and Track what visitors do, and stop losing events #332.
• Not tried on real phones or in Safari.

🤖 Generated with Claude Code

[vercel]

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

Project	Deployment	Actions	Updated
maia-platform-frontend	Ready	Preview	Nov 3, 2026 6:32am UTC