Performance work is easy to overthink. Most of the wins come from a short list of fundamentals applied consistently.

Measure before you optimize

You can't improve what you don't measure. Start with real data:

1. Capture field data from real users.
2. Reproduce issues in the lab.
3. Fix the biggest offender, then repeat.

Optimize the largest paint

The Largest Contentful Paint is usually an image or a headline. Serving the right image size is the single highest-leverage change:

import Image from "next/image"
 
export function Hero() {
  return (
    <Image
      src="/hero.jpg"
      alt="Product hero"
      width={1200}
      height={630}
      priority
    />
  )
}

Ship less JavaScript

Every kilobyte of JS has to be downloaded, parsed, and executed. Prefer server rendering, and lazy-load anything below the fold.

The fastest code is the code you never send.

Keep the list short, measure often, and the numbers take care of themselves.