Building for the connection your users actually have

Fast Wi-Fi at home, spotty cellular on the train, congested coffee-shop networks — the same page can feel completely different depending on where and how it is loaded. A growing number of sites respond to this by changing what they ship based on network quality, instead of serving the same payload to everyone.

The Network Information API exposes the client's network conditions to JavaScript, making this kind of adaptive serving possible today.

Adapting assets to the connection

With access to connection data, you can make practical decisions about what to load:

  • Serve high-definition media on fast connections and lower-resolution versions when the network is slow.
  • Decide whether preloading resources is worth the bandwidth.
  • Defer uploads or downloads until the connection improves.
  • Offer an offline mode when network quality is too poor for a full app experience.
  • Warn users about potential data charges before streaming or downloading over cellular.
  • Collect network-quality data in your analytics to understand your users' real-world conditions.

Large-scale services already operate this way. YouTube, Netflix and video calling platforms adjust streaming resolution on the fly; Gmail shows a link to load "basic HTML (for slow connections)" during initial load.

Reading connection information

The interface is exposed through the navigator.connection object. The actual connection details available on the current browser can be inspected directly in the console.

Key properties you can read include the estimated round-trip time (rtt), the approximate bandwidth (downlink), and a simplified connection category (effectiveType), which returns a value like 4g, 3g, 2g, or slow-2g.

In addition to being available in JavaScript, effectiveType data can be passed to servers via Client Hints, allowing the backend to tailor responses before a single byte of page JavaScript executes.

Reacting to network changes

One-off detection is only part of the story. The onchange event fires when the connection quality changes, which enables dynamic behavior:

  • If you deferred a download because of a slow connection, listening for onchange allows you to resume the transfer when conditions improve.
  • You can alert users when they are dropped from Wi-Fi to a cellular network, preventing accidental data usage.

Attaching the event listener works the same way as any other event listener, and the connection object's properties can be re-read when it fires to determine the new conditions.

Used as a progressive enhancement, the Network Information API delivers the most value to bandwidth-hungry applications and to users on constrained connections. Where the API is not supported, pages can fall back to their default behavior and continue working without it.