Web Performance Patterns

Quick Guide: Bundle budgets: < 200KB main bundle gzipped. Core Web Vitals: LCP < 2.5s, INP < 200ms, CLS < 0.1. Profile before optimizing -- measure actual bottlenecks, don't guess. Lazy load routes and heavy libraries. Use React Compiler (React 19+) for automatic memoization; manual memo only when profiling proves a bottleneck. Monitor real users with web-vitals library, not just Lighthouse.

<critical_requirements>

CRITICAL: Before Optimizing Performance

(You MUST profile BEFORE optimizing - measure actual bottlenecks with browser DevTools, framework profiler, or Lighthouse)

(You MUST set performance budgets BEFORE building features - bundle size limits and Core Web Vitals targets)

(You MUST use named constants for ALL performance thresholds - no magic numbers like 200 or 2.5)

(You MUST monitor Core Web Vitals in production - track LCP, INP, CLS for real users, not just lab metrics)

(You MUST lazy load route components and heavy libraries - code splitting prevents large initial bundles)