Fast by default in Next.js

Performance work usually happens in a panic, two weeks before a launch. I would rather follow a few rules from the first commit and never need the sprint.

1. Server components until proven otherwise

A component becomes a client component when it needs state, an effect or a browser API. Not before. Most of a page is text and layout, and none of that needs to ship JavaScript.

2. Push the client boundary down

// The page stays on the server. Only the toggle is interactive.
export default function Page() {
  return (
    <article>
      <Content />
      <LikeButton />
    </article>
  );
}

3. Lazy-load anything heavy

Charts, editors and 3D scenes are loaded on demand with a lightweight fallback in their place. The first paint should never wait for them.

4. Give every image dimensions

Layout shift is a performance problem that users feel directly. Width and height on every image removes it for free.

5. Measure on a slow phone

A fast laptop hides everything. I keep a mid-range Android device on my desk and test on it before calling a feature done.

None of this is clever. That is the point: boring defaults beat heroic optimisation.