Adaptive serving based on network quality

Milica Mihajlija

Loading a website can be a very different experience depending on the network conditions. Everything is usually smooth when you are on a fast network, but when you're on the go with a limited data plan and spotty connection, or stuck with a laptop on slow coffee-shop Wi-Fi, it's a different story.

One way to deal with this is by adapting which assets you're serving to users based on the quality of their connection. This is now possible with the Network Information API which enables web applications to access information about the user's network.

Usage

There are many ways you can use this network information to improve the user experience:

• Switch between serving high-definition and low-definition content based on the user's network.
• Decide whether to preload resources.
• Defer uploads and downloads when users are on a slow connection.
• Enable offline mode if the network quality is not good enough to load the app and use the features.
• Warn users that doing something (for example, watching video) over cellular could cost them money.
• Use it in your analytics to gather data on your users' network quality.

Many applications are already doing something similar. For example, YouTube, Netflix and most other video (or video calling) services automatically adjust the resolution during streaming. When Gmail is loading, it provides users with a link to "load basic HTML (for slow connections)".