Adapting media delivery to connection speed

The Network Information API exposes the user's connection quality through the navigator.connection.effectiveType property, which reports one of four values: 'slow-2g', '2g', '3g', or '4g'. This makes it possible to serve a lightweight image on slow connections while reserving heavier video content for fast ones. The API is available in Chrome 61+ and Edge 79+.

Conditionally loading content

The core technique is straightforward: check whether the Network Information API exists, evaluate effectiveType, and load the appropriate asset. The setup starts with a <video> element that has no src attribute—nothing is downloaded or displayed until JavaScript populates it. The resource URL lives in a data-src attribute instead, which is a standard way to store extra information on HTML elements.

The script first verifies API support. If navigator.connection exists and has the effectiveType property, the connection quality is evaluated against a threshold:

if ('connection' in navigator && 'effectiveType' in navigator.connection) {
  if (navigator.connection.effectiveType === '4g') {
    // load video
  } else {
    // load image
  }
} else {
  // fallback: load video
}

For browsers that lack the API, the video-loading code is wrapped in an else block so the default behavior remains intact.

Setting the video source

When effectiveType indicates a fast connection, the script grabs the video element from the DOM, reads the asset location from its data-src attribute, and assigns that value to src. A final line applies the CSS positioning needed for the background effect.

The image fallback

On slower networks—anything below '4g'—the same pattern applies to a fallback image. The HTML adds an <img> element right after the video element, again using data-src instead of src. The JavaScript then mirrors the video logic: retrieve the element, read data-src, and set it as the image's src.

Testing in DevTools

To verify the behavior, open the project and use DevTools to simulate a slow network. Under the Network tab, change the Throttling dropdown from its default No throttling setting to Fast 3G, then reload the page. On the fast profile, the background renders as video; with Fast 3G enabled, the app swaps in the static image instead.

Reacting to network changes

The API also provides an onchange event listener, which fires whenever the connection characteristics shift. That opens up more dynamic use cases: switching video quality mid-playback, restarting deferred data transfers when a faster network appears, or simply notifying the user of the change.

A minimal implementation binds the listener to a callback that updates the page with the current effectiveType. The page already contains an empty <h2> element reserved for this purpose. The callback function populates that element, and it is invoked once on load to establish the initial state.

With the throttling profile set to Fast 3G and the app reloaded, the displayed network information updates to 3g, confirming that the listener responds correctly to the emulated connection change.