How do you optimise network requests?

In rough order of impact:

Send fewer bytes

• Enable Brotli or gzip on the server — text assets typically shrink by 70–80%.
• Serve images in AVIF or WebP, sized for the slot they fill, with srcset for different screens.
• Split your JavaScript so each route ships only what it needs, and check what is actually in the bundle before assuming.

Send fewer requests — but not by concatenating

Over HTTP/2 and HTTP/3, many small requests are multiplexed over one connection, so the old advice about combining files no longer holds. What still helps is removing requests entirely: inline critical CSS, drop unused third-party scripts, and use a sprite or icon font only when you have measured a problem.

Do not send the request at all

Caching is the biggest win available. Hashed static assets can be cached forever:

Cache-Control: public, max-age=31536000, immutable

For data, a short max-age with stale-while-revalidate serves instantly from cache while refreshing in the background. A CDN applies the same headers at the edge, cutting latency as well as origin load.

Start earlier

<link rel="preconnect" href="https://api.example.com">
<link rel="preload" as="image" href="/hero.avif" fetchpriority="high">

preconnect gets the DNS lookup and TLS handshake out of the way; preload starts a critical resource before the parser would discover it. Use both sparingly — preloading everything just reorders the queue.

Waterfalls are the hidden cost

Three sequential round trips hurt more than three parallel ones, even at the same total size. Look for requests that only start once another finishes, and parallelise with Promise.all where they are independent.

Also cancel work nobody is waiting for: AbortController on a search box stops obsolete requests competing with the current one.