performance-optimization

Improve Core Web Vitals by first measuring with Lighthouse or the web-vitals library, then targeting the specific bottleneck. For LCP, optimize images and render-blocking resources; for INP, reduce long tasks on the main thread; for CLS, set explicit image dimensions.

Fix N+1 queries by replacing per-record lookups with a single query using joins or ORM include statements. For example, use findMany with an include clause instead of looping through results and querying each related record individually.

Use React.memo for expensive child components that re-render unnecessarily and useMemo for costly computations tied to specific dependencies. Overusing them adds overhead, so only apply them after profiling confirms a re-render bottleneck.

Premature optimization adds complexity without proven benefit because it targets assumed bottlenecks rather than measured ones. Always establish a baseline with real profiling data, fix the identified bottleneck, and verify improvement with follow-up measurements.

Enforce performance budgets in CI using bundlesize to check JavaScript bundle limits and Lighthouse CI (lhci autorun) to validate performance scores. Set concrete budgets such as under 200KB gzipped JavaScript and a Lighthouse score of at least 90.