Mobile Performance Guide
Ship pages that feel instant on every device — from flagship phones to budget handsets on 3G.
1. Core Web Vitals on Mobile
Mobile LCP under 2.5s, FID under 100ms, CLS under 0.1. Test on real devices — Chrome DevTools throttling is optimistic. Use WebPageTest with a Moto G4 on a 3G Fast profile for ground truth.
2. JavaScript Budget
Keep total JS under 200 KB gzipped. Tree-shake aggressively. Dynamic import below-the-fold components. Audit with bundle-analyzer — if a dependency costs more than 15 KB, find a lighter alternative or lazy-load it.
3. Image Pipeline
Serve WebP with AVIF fallback. Use srcset for resolution switching. Lazy-load everything below the fold. Preload the LCP image with fetchpriority="high". Never ship a hero image wider than 800px on mobile viewports.
4. Font Strategy
Subset fonts to latin glyphs. Use font-display: swap. Self-host WOFF2 — avoid Google Fonts CDN round-trips. Preload the primary weight. If you ship more than two weights, you have a design problem, not a performance problem.
5. Network Resilience
Cache-first for static assets. Stale-while-revalidate for API responses. Prefetch critical pages on hover or intersection. Ship a minimal offline fallback — a blank screen on a tunnel is a lost user.
6. Render Performance
Avoid layout thrashing — batch DOM reads and writes. Use CSS contain where appropriate. Keep the DOM under 1500 nodes. Long tasks over 50ms on mobile kill INP scores. Break them up with requestIdleCallback or scheduler.yield.
Pro tip: Run Lighthouse in incognito with no extensions. Extensions inject JS that skews every metric. Your real users do not have React DevTools installed.