performance-optimization

Start by measuring with Lighthouse and the web-vitals library to establish baselines for LCP, INP, and CLS. Then identify the specific bottleneck using the symptom decision tree, apply a targeted fix such as image optimization or code splitting, and re-measure to verify improvement.

Replace per-record queries with a single query using join or include clauses, such as Prisma's include option. Check your database query logs to find endpoints issuing one query per row, then batch the related data fetching into one query.

The recommended budgets are under 200KB gzipped JavaScript for initial load, under 50KB CSS, under 200KB per above-the-fold image, API responses under 200ms at p95, and a Lighthouse performance score of at least 90. Enforce these in CI with bundlesize and Lighthouse CI.

Use React.memo for expensive child components that re-render unnecessarily and useMemo for costly computations. Avoid applying them everywhere, since overuse adds complexity without benefit; profile first to confirm a re-rendering problem exists.

Do not optimize without evidence of a performance problem. Premature optimization adds complexity that costs more than the performance it gains; always profile first and only fix bottlenecks that measurements prove matter.