gaugeEngineering

Performance & Rendering

Bundle size, code splitting, memoization done right, images and fonts, and the Core Web Vitals that matter.

1 item

Links1

01NotesNote

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.