How can you optimize network requests for better performance?

TL;DR

Measure real traffic, then reduce transferred bytes, avoid unnecessary or duplicate requests, cache immutable assets and revalidate changing data, compress text with Brotli or Gzip, and prioritize critical resources. Under HTTP/2 and HTTP/3, blindly merging every file can hurt caching and code splitting; bundle boundaries should balance request overhead, compression, and independent cacheability.

How can you optimize network requests for better performance?

Minimize the number of requests

Avoid requests that do not contribute to the current experience, while preserving useful cache and code-splitting boundaries:

Remove duplication: Deduplicate dependencies and requests, and coalesce API calls when the server can answer them efficiently.
Load on demand: Split code and media by route or feature so users do not download work they do not need.
Inline only tiny critical assets: Inlining removes a request but also prevents independent caching and increases the containing resource, so measure the tradeoff.

Use caching

Caching can reduce the need to make network requests for resources that have not changed:

HTTP caching: Use Cache-Control and ETag headers to control how and when resources are cached by the browser.
Service workers: Implement service workers to cache assets and API responses, allowing your app to work offline and load faster on subsequent visits.

Compress data

Reducing the size of the data being transferred can speed up network requests:

Gzip/Brotli compression: Enable Gzip or Brotli compression on your server to compress HTML, CSS, and JavaScript files.
Minification: Minify CSS, JavaScript, and HTML files to remove unnecessary characters and reduce file size.

Use modern web technologies

Modern web technologies can help optimize network performance:

HTTP/2 or HTTP/3: Multiplexing and compressed headers reduce the cost of concurrent requests. Browser support for HTTP/2 server push was removed, so use preload or Link hints only for resources proven to be critical.
CDNs: Use Content Delivery Networks (CDNs) to serve static assets from locations closer to the user, reducing latency.

Optimize images

Images often account for a large portion of the data transferred:

Responsive images: Use the srcset attribute to serve different image sizes based on the user's device.
Image formats: Use modern image formats like WebP or AVIF, which offer better compression than traditional formats like JPEG or PNG.
Lazy loading: Implement lazy loading to defer loading images until they are needed.

Reduce payload size

Reducing the amount of data sent in each request can improve performance:

API optimization: Optimize API responses to include only the necessary data.
Shape API responses intentionally: Field selection through GraphQL or purpose-built endpoints can reduce over-fetching, but either approach can still produce excessive round trips or hard-to-cache responses. Measure the complete request pattern.

Exercises

Beta

How can you optimize network requests for better performance?

TL;DR