frontend-performancelisted

# Frontend Performance This skill makes a React + Vite app hit the Core Web Vitals bar — the same metrics Google uses for ranking and that users feel as "fast." It optimizes against real thresholds, not vibes. Analogy: shipping a fast app is like packing for a flight. You don't drag every possession to the gate — you pack the carry-on with what's needed now (above-the-fold) and check the rest (lazy-load below-the-fold). Overpacking the initial bundle is what makes the page heavy. ## The targets (field data, 75th percentile) - **LCP < 2.5s** — largest content paint. - **INP < 200ms** — interaction to next paint (replaced FID in March 2024). - **CLS < 0.1** — cumulative layout shift. ## Discovery (max 3 questions, only if unknown) 1. What's slow — first load (LCP/bundle) or interactions (INP)? 2. Do you have field data (real users) or only a Lighthouse lab score? 3. What's the biggest payload — JS bundle, images, or fonts? ## Step 1 — Measure real users first Install `web-vitals` (attribution build) and report `onLCP/onINP/onCLS` to your analytics. **Lab tools (Lighthouse) miss field INP** — optimize against real-user data, not just a local score. The Vercel Speed Insights package gives this with no backend. ## Step 2 — Cut the bundle - **Route-level code splitting** with `React.lazy` + `<Suspense>`. Lazy-load below-the-fold and modal/dialog components so the initial bundle ships only above-the-fold code. - **Split vendors** in `vite.config.ts` via `build.rollupOption