Performance & Rendering

The biggest lever is shipping less JavaScript

Most frontend slowness is too much JS parsed and executed on load, not slow React renders. Tackle bundle size first.

• Server Components ship zero JS for non-interactive UI — the App Router's default is your best perf tool. Keep "use client" at the leaves.
• Code-split heavy or below-the-fold pieces with next/dynamic / React.lazy so they load on demand, not upfront.
• Audit with the bundle analyzer. Watch for fat dependencies (a big date or charting lib pulled in whole) — import only what you use, or swap for something lighter.

Memoization — only where it pays

• React.memo, useMemo, useCallback prevent re-renders/recomputation, but they aren't free and most renders are cheap. Don't sprinkle them everywhere.
• Reach for them when you've measured a real problem: an expensive computation, or a big list re-rendering on every keystroke. The React Profiler tells you where.
• Often the better fix is structural: move state down so fewer components re-render, or pass children so a subtree isn't re-created.

Images & fonts (usually the real LCP culprit)

• Use next/image — automatic resizing, modern formats, lazy loading, and it reserves space to prevent layout shift.
• Use next/font to self-host fonts, avoid a render-blocking request, and eliminate font-swap layout shift.

Core Web Vitals — what to actually watch

• LCP (largest contentful paint): dominated by your hero image/text and server response time. Optimize the image, stream the shell.
• CLS (cumulative layout shift): reserve space for images, ads, and async content so nothing jumps. The most fixable and most-overlooked one.
• INP (interaction to next paint): keep the main thread free — break up long tasks, avoid heavy synchronous work in event handlers.

Render strategy

• Stream with <Suspense> so users see a shell instantly instead of waiting for the slowest query.
• For long lists (hundreds+ of rows), virtualize (@tanstack/react-virtual) so only visible rows mount.

The rule: measure with Lighthouse and the Profiler first; optimize the thing that's actually slow, not the thing that feels slow.