Scaling React & Next.js: the performance wins that mattered

I've shipped React across very different products — an online food-ordering app, an instant ticketing system, an AI multimedia platform. The interesting thing is how often the same fixes produced the biggest wins.

1. Ship less JavaScript

The cheapest performance is the code you don't send. On a food-ordering UI, code splitting plus lazy loading below-the-fold components cut initial load time by 35%. Audit the bundle first — you'll find a library you forgot you imported.

const Heavy = dynamic(() => import("./heavy-panel"), { ssr: false });

2. Memoize the right things

useMemo/React.memo aren't free, but on list-heavy and real-time screens they stop avoidable re-renders cold. The trick is to profile first and memoize the components that actually re-render under load — not everything.

3. Move work to the server

Server Components and route-level caching let the browser stop re-running data-fetching code. Less client JS, fewer waterfalls, faster first paint.

4. Images and fonts are low-hanging fruit

next/image and next/font fix real Core Web Vitals problems (LCP, layout shift) with almost no effort. Do them early so you're not chasing CLS later.

The lesson

Every time I optimized on a hunch I was wrong about where the time went. Profile, fix the top item, re-measure. The headline wins (less JS, server work) repeat across projects — but only measurement tells you which one you need today.