koala73 / koala73/worldmonitor

perf: Core Web Vitals FAILED in field (LCP 4.8s/INP 870ms mobile) — prioritized fix

Open
#4,487 8 comments 0 reactions 0 assignees View on GitHub
enhancement P0 performance seo
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.