koala73 / koala73/worldmonitor
perf: Core Web Vitals FAILED in field (LCP 4.8s/INP 870ms mobile) — prioritized fix
- Dominant language
- TypeScript
- Stars
- 86.6k
- Forks
- 13.1k
- Avg merge
- 8h 4m
- Merged PRs (30d)
- 825
Description
## Core Web Vitals are FAILED in the field (real users) — prioritized fix
**Field data (CrUX, 28-day, pagespeed.web.dev, 2026-06-28) — `www.worldmonitor.app/dashboard`:**
| Metric | Mobile | Desktop | Good |
|---|---|---|---|
| **LCP** | **4.8s** 🔴 | **5.1s** 🔴 | < 2.5s |
| **INP** | **870ms** 🔴 | 396ms 🟠 | < 200ms |
| FCP | 3.9s 🔴 | 2.2s 🟠 | < 1.8s |
| CLS | 0.19 🟠 | 0.13 🟠 | < 0.1 |
| TTFB | 0.5s 🟢 | 0.4s 🟢 | < 0.8s |
| **Overall** | **FAILED** | **FAILED** | |
The #4476 config-data diet (clients/bases/feeds) was the right *direction* (too much eager JS) at the wrong *scale* — ~50KB deferrals are noise against **315–438 KiB unused JS + a 2.7–3.1 MB payload**, and the worst failure is **LCP**, not the `main.js` scriptEval the campaign chased. Lab LCP is green (2.4s) while field LCP is red (4.8s) — real-network/device + JS-gated render gap.
**Strategy (full detail: `docs/brainstorms/2026-06-28-perf-field-cwv-gate-requirements.md`):** field-CWV-gated, prioritized by what real users actually fail. Every increment re-checks CrUX, with deterministic bytes/scriptEval as the leading indicator.
**Levers (priority order):**
- [ ] #4488 · **P0 slow-tier bootstrap deferral (LCP/FCP)** — the 410KB `bootstrap?tier=slow` fetch blocks first paint (`App.ts:1211` → `bootstrap.ts:183` awaits both tiers). Defer it. *(planning now)*
- [ ] #4486 · **P0 service-graph boot split (unused-JS → LCP/FCP/INP)** (156KB of main.js is unused at first paint).
- [ ] #4489 · **P0 LCP element + critical payload (LCP)** — the 2.7–3.1 MB payload; identify + prioritize the LCP element.
- [ ] **P1 INP / long-task reduction** — folds into the boot split (#4486) + yield-to-main chunking.
- [ ] #4490 · **P2 CLS reserve-space (amber→green, cheap)** — reserve space for dynamically-mounted panels.
Supersedes the framing of #4443 (TBT-only) and #4476 (config-only, exhausted). Acceptance = field CrUX flips toward PASSED, not a lab score.
Contributor guide
Research direction
Read docs/brainstorms/2026-06-28-perf-field-cwv-gate-requirements.md, then inspect App.ts:1211 and bootstrap.ts:183 to understand the bootstrap path and its field-CWV priorities. Review the linked work in #4488, #4486, #4489, and #4490; done means deterministic byte/scriptEval measurements improve and field CrUX moves toward PASSED.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend, performance
- Issue type
- Bug
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 30/100