"Performance" lumps two things together: load speed (LCP, FCP, TTI) and interaction snappiness (INP, smooth scroll/drag). They need different techniques.

Load speed

The page needs to arrive fast.

Server:

• SSR/SSG so HTML has content immediately.
• Edge SSR (Cloudflare Workers, Vercel Edge) to bring TTFB to ~100ms globally.
• CDN with long max-age on hashed assets.
• Brotli compression on text.
• HTTP/2 or HTTP/3.

Bundle:

• Code split per route + per heavy widget.
• Tree-shake unused exports.
• Modern JS for modern browsers.
• Audit deps quarterly; replace heavy with light.

Resources:

• Preload LCP image + critical fonts.
• AVIF/WebP for images, with srcset + sizes.
• Inline critical CSS; async-load the rest.
• Defer/async non-critical scripts.
• Lazy-load below-fold images and iframes.

Don't lazy-load the LCP image — it's the #1 LCP anti-pattern.

Responsiveness

After the page loads, the user expects clicks, taps, and inputs to respond within 100ms. INP measures this.

Main-thread hygiene:

• Long tasks (>50ms) block INP. Split them with scheduler.yield() or chunked setTimeout.
• Don't do CPU-heavy work in event handlers — push to web workers.
• Avoid layout thrash (interleaved layout reads + style writes).

Render perf:

• Virtualize long lists.
• React.memo + stable refs on expensive subtrees.
• useTransition for non-urgent updates so input stays responsive:

const [filter, setFilter] = useState('');
const [isPending, startTransition] = useTransition();
function onChange(e) {
  setFilter(e.target.value); // urgent — input stays snappy
  startTransition(() => {
    setResults(slowFilter(items, e.target.value)); // deferred
  });
}

Animations:

• Use CSS transform + opacity (compositor-only, no layout/paint).
• requestAnimationFrame for JS-driven animations.
• will-change: transform to promote to its own layer (use during animation, remove after).

Inputs:

• Debounce search/autocomplete.
• Throttle scroll/drag/mousemove handlers (or RAF-coalesce).
• Cancel previous in-flight requests on new keystrokes.

Combined: scrolling a long list

A long list both loads slowly and scrolls poorly without intervention.

• Virtualize (windowing) → constant DOM size regardless of data length.
• Paginate or cursor-fetch data → bounded memory.
• Memoize row components → no re-render on parent updates.
• content-visibility: auto on offscreen sections → browser skips render.
• AbortController on data fetches → cancel stale requests.

Web workers for CPU

const worker = new Worker('parse.js');
worker.postMessage(rawCsv);
worker.onmessage = e => setData(e.data);

Heavy parse, compression, image manipulation off the main thread. Comlink wraps the postMessage API nicely.

Concurrent React features

• useDeferredValue — defer dependent re-render until user stops typing.
• useTransition — mark state updates as low-priority.
• Suspense — show fallback while data/code loads, with concurrent rendering avoiding "render-then-suspend" jank.

What to measure

• Load: LCP, FCP, TTFB, total bytes, time to first paint.
• Responsiveness: INP, total blocking time, long-task count.
• Per device class + network + geo + route.
• p75 and p95.

Process

1. Ship RUM.
2. Find worst metric × worst page × worst segment.
3. Profile (DevTools Performance + Coverage).
4. Identify dominant cost: bundle parse, image, third-party, render.
5. Apply the matching technique above.
6. Validate metric movement on real users.

Common pitfalls

• Optimizing LCP but ignoring INP — users complain about laggy interactions even when load is fast.
• Memoizing everything in React — overhead without payoff.
• Lazy-loading the LCP image.
• Big third-party scripts (analytics, ads, chat) eating the perf budget.
• No CI guard — wins regress without anyone noticing.

Mental model

Two metrics, two playbooks. LCP/FCP fixes: ship less, ship earlier, serve faster. INP fixes: keep the main thread free, defer work, slice long tasks. Plan for both; measure both; never trade one off without knowing it.