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