HealthLog/docs/audit/v1414-performance.md

v1.4.14 Performance Audit — Production

Status: stage-4 of the v1.4.14 release cycle Measured against: https://healthlog.bombeck.io (/api/version → 1.4.13) Measured at: 2026-05-09T14:14:48Z → 2026-05-09T14:15:27Z Tool: standalone Playwright + Chromium 1217 driver, PerformanceObserver (largest-contentful-paint, longtask) + Resource Timing API + Playwright response-event capture for transferred bytes (Cloudflare strips Content-Length on chunked responses, so the Resource Timing transferSize would otherwise read 0). Script lives at /tmp/v15-perf-measure.mjs (one-shot, not committed — re-run with SESSION=<cookie> node ./.v15-perf-measure.mjs > /tmp/v15-perf-results.json inside the repo so the script picks up node_modules/@playwright/test). Two viewports per page: desktop (1920×1080, default Chromium UA) and mobile (Playwright's Pixel 5 profile).

Method

For each (page × viewport) cell:

1. Open a fresh BrowserContext with an authenticated session cookie (healthlog_session=cmox4d6fj…) injected pre-navigation.
2. Inject a PerformanceObserver via addInitScript BEFORE navigation so LCP and longtask events from the very first paint are captured.
3. page.goto(url, { waitUntil: "load", timeout: 45_000 }) and then idle for 3 s so deferred chart code, lazy queries and below-the-fold content settle.
4. Read performance.getEntriesByType("navigation")[0], performance.getEntriesByType("resource"), plus the longtask / LCP captures we accumulated in window.__perfState.
5. Total Blocking Time is the longtask-derived proxy: Σ (longtask.duration − 50ms) over all longtasks ≥ 50 ms.

The "TTI" column in the original brief is omitted because Chromium's canonical TTI requires a 5 s quiet-window heuristic that isn't worth synthesising here — Load + TBT are the actionable signals.

Per-page metrics

page	viewport	TTFB ms	DCL ms	Load ms	LCP ms	TBT ms	Longtasks	Total KiB	JS KiB	CSS KiB
/	desktop	396	1080	2497	2828	624	1	604	425	16
/	mobile	384	752	1560	2184	0	0	604	425	16
/settings/integrations	desktop	500	738	1498	2396	0	0	394	297	16
/settings/integrations	mobile	495	771	1545	1900	0	0	386	297	16
/admin	desktop	584	761	1611	1932	0	0	382	291	16
/admin	mobile	872	1112	1920	2268	0	0	378	291	16
/insights	desktop	519	681	1609	2264	27	1	608	419	16
/insights	mobile	502	667	1647	2380	28	1	604	419	16

Read in plain English: every page comes in well under 2.5 s LCP except / desktop (2.83 s) and /insights (~2.3 s). Mobile is faster than desktop in absolute LCP terms because the Pixel 5 profile uses a smaller viewport (less LCP candidate area) — the work is the same.

/ desktop racks up 624 ms TBT from a single longtask: that's the dashboard hydration cost for the useQuery × 9 + TrendCard × 8 + HealthChart dynamic-imports firing in parallel.

Top-5 JS bundles per page

All sizes are compressed Brotli from CF. The 0vl43uc.17vx1.js chunk appears on every page — that's the framework + Radix + TanStack Query bedrock. The 0m4t~kff9equt.js chunk (52.2 KiB everywhere) is the next.js app-router shell + radix-ui/dialog/dropdown. The notable per-page chunks are flagged with bold below.

/ (desktop + mobile, identical)

• 0503y5tur7j1f.js — 108.6 KiB ← Recharts (loaded via next/dynamic from health-chart / mood-chart, but still on the critical path because the dashboard mounts ≥ 1 chart for any user with measurements)
• 0vl43uc.17vx1.js — 71.3 KiB ← framework + TanStack Query (every page)
• 0m4t~kff9equt.js — 52.2 KiB ← Next router shell + Radix overlay primitives
• 0~1ef0ki4ccp~.js — 36.7 KiB ← shared app code (i18n + auth-shell)
• 0uc70mahb3xof.js — 15.3 KiB ← dashboard/page.tsx per-page chunk

/settings/integrations (desktop + mobile, identical)

• 0vl43uc.17vx1.js — 71.3 KiB
• 0m4t~kff9equt.js — 52.2 KiB
• 0~1ef0ki4ccp~.js — 36.7 KiB
• 01q.1mkz27ebz.js — 19.8 KiB ← settings/integrations page
• 0d3x9g6k_smzl.js — 15.0 KiB

/admin (desktop + mobile, identical)

• 0vl43uc.17vx1.js — 71.3 KiB
• 0m4t~kff9equt.js — 52.2 KiB
• 0~1ef0ki4ccp~.js — 36.7 KiB
• 0d3x9g6k_smzl.js — 15.0 KiB
• 0of675ww0w6~y.js — 13.6 KiB ← admin status-card-grid

/insights (desktop + mobile, identical)

• 18b.35leqj.iy.js — 108.5 KiB ← Recharts, eagerly imported because insights/page.tsx uses ScatterChart/Scatter/XAxis/YAxis/CartesianGrid/Tooltip/ResponsiveContainer symbols at module top-level (line 42–50)
• 0vl43uc.17vx1.js — 71.3 KiB
• 0m4t~kff9equt.js — 52.2 KiB
• 0~1ef0ki4ccp~.js — 36.7 KiB
• 16c~twjymta_z.js — 15.6 KiB

Treemap-flavoured grouping

group	KiB (uncompressed est ×3 or measured)	notes
Recharts (per page that uses it)	~108 KiB	by far the heaviest single dep; v1.4.14 candidate for replacement. v1.4.6 already moved HealthChart/MoodChart to next/dynamic, but /insights still imports the Scatter primitives eagerly.
Framework (Next.js + React + TanStack Query)	~71 KiB	unavoidable baseline
Radix primitives + app-router shell	~52 KiB	unavoidable baseline
Shared app code (i18n, auth-shell, layout)	~37 KiB	unavoidable baseline
Per-page app code	13–20 KiB	within budget

Pages without charts (/admin, /settings/integrations) are about 132 KiB lighter than the chart pages, confirming Recharts is the dominant single-dependency cost.

Slowest API calls observed

Measured for / desktop (worst case). Numbers are the per-request PerformanceResourceTiming.duration (queue + DNS + connect + TTFB + body):

endpoint	ms
/api/measurements?type=WEIGHT&limit=500&offset=0	812
/api/notifications/preferences	654
/api/gamification/achievements	651
/api/measurements?type=PULSE	506
/api/measurements?type=BLOOD_PRESSURE_SYS	404
/api/measurements?type=BLOOD_PRESSURE_DIA	399
/api/mood/analytics	351
/api/analytics	342
/api/medications	340
/api/withings/status	303

Two surprises:

• notifications/preferences and withings/status are fired by the GettingStartedChecklist even when the user is well past onboarding (the live tenant has onboardingCompletedAt set since early 2026 and 1000+ measurements). The checklist short-circuits with null after fetching, so the network is wasted.
• gamification/achievements is hot-polled every 2 minutes by AchievementUnlockNotifier. Acceptable cadence; not on the win list.

Top 3 wins

1. Defer Recharts imports on /insights (S, implemented)

• File: src/app/insights/page.tsx
• What: Replace the eager import { ScatterChart, … } from "recharts" with per-symbol next/dynamic imports (ssr: false). Each scatter card is below the fold — it sits inside the correlation cards that gate on data.bpMedicationScatterData.length >= 5 etc.
• Expected impact: Moves the 108.5 KiB Recharts chunk off the initial bundle. LCP-critical content no longer waits for Recharts to parse on the main thread. Same Recharts that the dashboard already pays for is shared at runtime, so no double-fetch on cache-warm navigation.
• Effort: ~10 LOC (the seven recharts symbols become seven dynamic(...) consts).
• Risk: each first paint of a scatter section will Suspense-fallback for ~1 frame while the chunk downloads. That matches the existing <HealthChart> UX on the same page.

2. Skip GettingStartedChecklist data fetches for post-onboarding users (S, implemented)

• File: src/components/onboarding/getting-started-checklist.tsx
• What: Gate withings/status and notifications/preferences on !!user && user.onboardingCompletedAt == null. The two queries fire unconditionally today, then the checklist self-hides because the user has already completed onboarding.
• Expected impact: 2 fewer API calls per dashboard load for every established user. Saves ~950 ms of network on / desktop.
• Effort: 2 LOC (one extra clause in each enabled: field).
• Risk: the corner case of a returning user with onboardingCompletedAt != null but < 5 measurements (e.g. they deleted readings post-onboarding) will see a checklist with stale withingsConnected / notificationsConfigured flags. Acceptable — the checklist already gracefully renders unknown defaults.

3. Replace Recharts on the dashboard (L, deferred to v1.4.15)

• What: Drop Recharts in favour of a smaller library (Visx, Chart.js 4, or hand-rolled SVG). Recharts is ~108 KiB Brotli for a use case that needs ~3 chart variants (line, area, scatter).
• Expected impact: −80 to −100 KiB initial JS on / and /insights; TBT win on / desktop because Recharts hydration is the dominant longtask source.
• Effort: L. New dep + every chart in src/components/charts/ needs rewrite. Out of scope for v1.4.14 — track in v1.4.15 backlog.
• Why deferred: hard rule "no new dependencies in v1.4.14".

Bonus / honourable mentions

• Achievements polling cadence on the dashboard is 2 min, staleTime 60 s. Reasonable, no win.
• staleTime: 5 * 60 * 1000 is already the global default in providers.tsx — no global tuning needed.
• Image lazy-load: only the <AvatarImage> in sidebar-nav.tsx and one <img> in admin/feedback-inbox-section.tsx exist. The avatar is in-viewport; the feedback <img> is admin (Stage 4b territory). Skip.

Verification

Local pnpm build cannot complete on this machine due to a Node-25 upstream regression (Cannot read private member #state from an object whose class did not declare it in turbopack's prerender path; this is the same bug noted in the repo doc's pnpm-build entry). Wins #1 and #2 therefore can't be re-measured against prod until v1.4.14 ships and Coolify force-pulls the new bundle. Both wins are nevertheless verified by static code review:

• Win #1 — defer Recharts: every changed import follows the exact same next/dynamic(... ssr: false) shape that src/app/insights/page.tsx already uses for HealthChart and MoodChart. Next 16 / Turbopack splits each dynamic(...) callsite into its own async chunk. Recharts internally re-uses one shared module so the seven dynamic imports collapse to a single chunk request at runtime, identical to the existing dashboard behaviour.
• Win #2 — skip checklist fetches: onboardingPending is read once per render from user.onboardingCompletedAt. When false, both useQuery({ enabled: onboardingPending }) calls stay idle. The downstream shouldShowChecklist() already hides the component for every post-onboarding user with ≥ 5 measurements, so no UI regresses. pnpm test (95 files / 733 tests) is green after the change.

A re-measure after v1.4.14 ships should show:

• /insights initial JS dropping from ~419 KiB to ~310 KiB (the 108 KiB Recharts chunk moves out of the critical path and is only fetched if a scatter section actually mounts).
• / dashboard total request count dropping from 9 to 7 for any user with onboardingCompletedAt != null, eliminating the notifications/preferences (~654 ms) and withings/status (~303 ms) calls.

If post-deploy measurement contradicts either expectation, revert the relevant commit and update this document.