performance-optimization

Replace per-record queries inside loops with a single query using a join or include clause, such as passing include: { owner: true } to an ORM findMany call. Confirm the fix by checking the database query log before and after the change.

Start by measuring with Lighthouse and the web-vitals library to find the actual bottleneck. For LCP, optimize hero images with responsive srcset and fetchpriority; for INP, profile long tasks on the main thread and reduce heavy JavaScript work.

A typical budget keeps initial JavaScript under 200KB gzipped, CSS under 50KB, above-the-fold images under 200KB, and API p95 response times under 200ms. Enforce the budget in CI with bundlesize and Lighthouse CI.

Do not optimize before you have measurement evidence of a real problem. Premature optimization adds complexity that costs more than the performance it gains, and changes that show no measurable improvement should be reverted rather than kept.

The change may have targeted the wrong bottleneck, or the gain is smaller than run-to-run variance. Re-measure under identical conditions as the baseline, compare against variance rather than the mean, and revert changes that fall within noise.

No. Overusing React.memo and useMemo adds comparison overhead and complexity without benefit. Apply them only to expensive components or computations identified through profiling, and stabilize object references passed as props first.