App startup with on-demand panels

huggingface/agent-manager · issue #133 · production builds of main@ef08e84 (before) and perf/lazy-panels-133 (after), same fixture fleet, same Chromium 153.0.8010.12, same machine, 5 cold visits per cell, medians (min–max).

Desktop · 1280×800 · no throttling

Cold visit: fresh browser profile, HTTP cache disabled, the remembered selection seeded in storage. nav = sidebar lists sessions; view = the selected view's first useful interaction; script = V8 ScriptDuration (parse, compile and run of all JS so far) at that moment — this Chromium reports V8CompileDuration as 0, so it is not shown separately; JS = script requests and bytes on the wire until then (the server does not compress; gzip computed from the same files).

desktop: opening a deferred panel from a warm Overview (ms, click → first useful content)

A panel counts as open at its first useful content — for Usage a populated trace row, for the API log a real row, for the others their form and controls — so these numbers include each panel’s own API round trips; the frame and its skeletons appear earlier and are not counted. "After" adds one chunk request on top; the difference between the columns is the real cost moved from startup to first open.

Mobile-like · 390×844 · 4× CPU slowdown · 1.6 Mbps down / 150 ms RTT

Cold visit: fresh browser profile, HTTP cache disabled, the remembered selection seeded in storage. nav = sidebar lists sessions; view = the selected view's first useful interaction; script = V8 ScriptDuration (parse, compile and run of all JS so far) at that moment — this Chromium reports V8CompileDuration as 0, so it is not shown separately; JS = script requests and bytes on the wire until then (the server does not compress; gzip computed from the same files).

mobile: opening a deferred panel from a warm Overview (ms, click → first useful content)

A panel counts as open at its first useful content — for Usage a populated trace row, for the API log a real row, for the others their form and controls — so these numbers include each panel’s own API round trips; the frame and its skeletons appear earlier and are not counted. "After" adds one chunk request on top; the difference between the columns is the real cost moved from startup to first open.

What moved out of the entry chunk

Unchanged and deliberately kept: the CodeMirror core/languages chunks and the PDF chunks were already dynamic. The entry still carries xterm, react-dom, marked and dompurify — the terminal/Reader pane needs them and they are out of scope here.

Conditions

• Harness: node scripts/startup-bench.mjs --dist <dist> --label before|after --runs 5; fixture fleet from web/test/helpers/fixture-server.mjs (two Claude sessions — one with a 14-turn transcript, one empty — a Files pane, a Trace pane, a group with Files + Trace). Reader mode throughout; no PTY is ever attached and no CLI is spawned.
• Browser: Chromium 153.0.8010.12 via Playwright, headless, Network.setCacheDisabled, a new browser context per visit. Node v22.23.2. Both runs on the same shared Space box (8 cores available to the container; os.cpus() sees the 64-core host), sequentially; before at 2026-09-09T18:07:27.936Z, after at 2026-09-09T18:14:39.887Z.
• Load on the box (1-minute average, recorded by the harness): before run start 6.33 · after desktop 6.83 · after mobile 9.52 · panel opens retaken (usage marker = data) 5.66 · start 4.98 · after desktop 5.51 · after mobile 6.59; after run start 7.52 · after desktop 8.15 · mobile discarded (load 18.1) 18.1 · start 6.4 · after mobile 6.35 · panel opens retaken (usage marker = data) 5.66 · start 6.51 · after desktop 6.79 · after mobile 6.39. A run is only kept if it stayed under ~10 throughout.
• Markers are stamped by a MutationObserver inside the page (performance.now() at first match), not by the harness polling.
• Numbers are this machine's. Use them for the direction and the ratios; regression budgets below are set from them with headroom.

Regression budgets (from these runs)

• Entry chunk ≤ 720 kB minified (measured 697 kB) and free of the seven panel modules — both asserted by web/test/lazyPanels.test.mjs on the built chunks (size, and one panel-only literal per module).
• Cold Overview and restored Reader request zero panel chunks — asserted by the same suite.
• First open of a deferred panel is a deliberate trade: on the mobile-like profile Settings and the API log cost ~0.9 s cold where they cost 0.1–0.3 s in the entry, because their chunk shares the throttled link with the Overview's polls. Budget: within ~1.2× the after medians in the tables above (Settings ≲ 1.15 s, API log ≲ 1.05 s, other subpages ≲ 0.45 s on that profile; ≲ 150 ms on desktop). If those must come down, the boundary needs tuning — an intent prefetch on the Settings button, or one chunk for Settings + API log — not a bigger entry.
• Warm reopen of any deferred panel equals its pre-change cost (module cached); a regression there means the cache broke.

Independent reproduction

The PR reviewer rebuilt both SHAs and reran the harness with the same settings on the same box (load 5.2–7.7): mobile-like Overview 5246 → 4752 ms, restored Reader 6028 → 5535 ms, Files 5880 → 5743, Trace 5995 → 5662, mixed group 5886 → 5758 — the same gain, outside the sample ranges. Desktop was flat there (Overview 88 → 81 ms, Reader 195 → 195, mixed group 195 → 220), so the desktop cells on this page should be read as noise around zero, and the improvement described as less to download and wait for at startup — not a CPU speedup: V8 script time is broadly flat for Overview/Reader in both runs. The first-open trade reproduced too (mobile Settings 199 → 935 ms, API log 104 → 855; warm 90 → 85 and 76 → 73).