Performance Audit

Finds and fixes the real bottlenecks — measured, not guessed.

Process

1. Measure first:
   • Ask for/run Lighthouse (Perf tab), or check reported Core Web Vitals (INP, LCP, CLS).
   • Identify the single worst metric; optimize that first.
2. Top suspects in order (web apps):
   • Bundle size: check with next build output / vite build / bundle-analyzer. Look for heavy deps accidentally imported fully (import * as from big libs, missing tree-shaking, duplicate versions).
   • Images: unoptimized images are the #1 LCP killer → use next/image or responsive srcset/sizes, modern formats (WebP/AVIF), correct dimensions (no 4000px images displayed at 400px), loading="lazy" below the fold, fetchpriority="high" for LCP image.
   • Fonts: font-display: swap, preload the font file, limit weights/characters, text-rendering and subsetting.
   • JS execution: code-split routes (dynamic()/lazy()), defer non-critical scripts, avoid heavy work on the main thread (INP).
   • Layout/render: CLS fixes — reserve space for images/ads/embeds (aspect-ratio), stable font metrics.
   • Network: enable compression, cache static assets, HTTP/2+; avoid giant inline payloads; paginate large lists.
   • Data layer: N+1 queries, missing indexes, no pagination, blocking the render with slow fetches.
3. Apply fixes one at a time, re-measuring each — avoid shotgun changes you can't attribute.
4. Report: metric before → after, what you changed, and what remains (with an estimate of impact).