performance-optimization

Improve Core Web Vitals by measuring first with Lighthouse and the web-vitals library, then targeting the failing metric. For LCP, optimize hero images and server response time; for INP, reduce main-thread long tasks; 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 Prisma's include option to fetch related records in one query instead of looping through results with individual findUnique calls.

A reasonable budget is under 200KB gzipped JavaScript for initial load, under 50KB CSS, under 200KB per above-the-fold image, API p95 response under 200ms, and a Lighthouse performance score of at least 90. Enforce budgets in CI with bundlesize and Lighthouse CI.

Do not optimize before you have profiling evidence of an actual problem. Premature optimization adds complexity that costs more than the performance it gains. Measure first, identify the real bottleneck, and only fix what measurements prove matters.

Excessive re-renders usually come from unstable object or function references passed as props, creating new values on every render. Hoist static objects outside components, use React.memo for expensive children, and useMemo for expensive computations.