performance-optimization

Improve Core Web Vitals by first measuring with Lighthouse and the web-vitals library, then targeting the failing metric: optimize images and server response for LCP, reduce main-thread long tasks for INP, and set explicit image dimensions to prevent CLS. Verify fixes with before-and-after measurements.

Fix N+1 queries by replacing per-record lookups with a single query using joins or ORM includes, such as Prisma's include option. Detect them by logging database queries per request and watching for repeated identical query patterns.

Use React.memo for expensive components that re-render with unchanged props, and useMemo for costly computations dependent on specific values. Avoid applying them everywhere, since overuse adds complexity and memory overhead without measurable benefit.

No, optimizing without profiling data is premature optimization that adds complexity without improving what matters. Establish a baseline with synthetic tools like Lighthouse and real user monitoring first, then fix only the identified bottleneck.

Enforce performance budgets in CI using bundlesize to check JavaScript payload limits and Lighthouse CI (lhci autorun) to fail builds below score thresholds. Typical budgets include under 200KB gzipped initial JavaScript and a Lighthouse performance score of at least 90.