One image priority setting that sped up my home page

My home page's main picture is only 57KB, and Next.js was already preloading it. Yet on a throttled phone connection (1.6 Mbps, 150ms latency) it took about two seconds to show.

Reading the waterfall

Recording every request with Chrome's DevTools protocol made it obvious. The picture was requested early, but at Low priority. A 72KB font went out at High, and a dozen script chunks shared the rest of the bandwidth. The picture finished at about 1.8 seconds.

• Hero picture: preloaded, but at Low priority, done at ~1,830ms.
• Text font: High priority, 72KB.
• A monospace font: 69KB, preloaded on every page, used only by the command menu.

The fix

Two small changes. Tell the browser which picture matters most, and stop preloading a font almost nobody sees:

<Image
  src={hero}
  alt="…"
  priority
  fetchPriority="high"
/>

The monospace text now uses the device's own built-in font, which costs nothing to download.

Now the picture goes out first, at High priority, and nothing on the first screen is downloaded just in case. The lesson generalises: a preload says when to fetch, not how urgently. If one image is the page, say so.