The Next.js performance work that actually moves the score

Performance audits usually surface a long list, and the list is intimidating enough that nothing gets done. In practice a handful of fixes account for most of the gain on a typical marketing site or dashboard, and they're all things you can do in an afternoon.

1. Images are almost always the LCP

On most pages the Largest Contentful Paint element is an image, which means image handling *is* your LCP score. Use next/image so you get modern formats and correct sizing, mark the one above-the-fold image as priority, and — the part people skip — write an accurate sizes.

<Image
  src="/images/hero.png"
  alt="Product dashboard"
  fill
  priority
  sizes="(min-width: 1024px) 520px, 100vw"
/>

Without sizes, the browser assumes the image is full-viewport width and downloads a far larger file than a 520px slot needs. It's the most common single line of wasted bandwidth I find.

2. Self-host fonts and stop the flash

next/font self-hosts your fonts at build time, so there's no extra DNS lookup, no request to a third-party CDN, and no layout shift while the swap happens. Subset to the characters you use and preload only the weights that appear above the fold.

This one is quick, it removes a render-blocking request and a chunk of CLS at the same time.

3. Move the client boundary down

A "use client" at the top of a page turns the whole tree into client JavaScript. Most pages only need interactivity in a few leaves — a carousel, a filter, a theme toggle.

1. 1.Keep pages and layouts as server components.
2. 2.Push "use client" down to the smallest component that genuinely needs state, effects or event handlers.
3. 3.Pass data down as props rather than re-fetching inside the client component.

The shipped bundle shrinks, hydration finishes sooner, and interaction latency (INP) improves without changing a single line of feature code.

4. Audit the third-party scripts

Analytics, chat widgets, heatmaps, pixels. Each one is someone else's JavaScript competing with yours for the main thread. Load them with next/script and strategy="afterInteractive" (or lazyOnload for anything that isn't needed on first paint), and remove the ones nobody has opened a dashboard for in six months.

Measure on the device your users have

Lighthouse on a developer laptop over office wifi flatters everything. Test with mobile throttling, and once you're live, watch field data in Search Console — that's the number that reflects real users on real phones, and it's the one search engines act on.