BT

Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ

Topics

Choose your language

InfoQ Homepage News Adaptive Loading for a Faster Web

Adaptive Loading for a Faster Web

This item in japanese

Bookmarks

The Google Chrome team recently introduced Adaptive Loading, an exploration for loading and rendering the most suitable version of a component based on network speed, CPU, memory, and other web platform signals.

The Network Information API has been a long-awaited feature. Support is starting to arrive in browsers, including Chrome for Android, Firefox for Android, and Chrome and Chromium-based desktop browsers. It is just one of several adaptive loading patterns currently under exploration. Others include battery levels, available memory, device capability, hardware concurrency, and more.

The Adaptive Loading project also includes a collection of React Adaptive Loading Hooks and Utilities for those wanting to try these approaches with React components.

The team at Chrome is not the first to experiment with these concepts. For example, software engineer Theodore Vorillas started experimenting with the Network Information API in early 2019 for serving adaptive components, and software engineer Netanel Basal started exploring connection-aware Angular components in late 2018.

Each example explores options for providing an experience based on capabilities. For example, a network-aware adaptive media loader could look at the connection speed (slow-2g, 2g, 3g, 4g, or default), and determine whether to load an image of an appropriate resolution on a slower connection or a video on 4g or faster:

let media;
switch (effectiveConnectionType) {
  case 'slow-2g':
    media = <img className='responsive' src={minResImage} alt='low resolution' />;
    break;
  case '2g':
    media = <img className='responsive' src={mediumResImage} alt='medium resolution' />;
    break;
  case '3g':
    media = <img className='responsive' src={maxResImage} alt='high resolution' />;
    break;
  case '4g':
    media = <video className='responsive' src={video} controls />;
    break;
  default:
    media = <video className='responsive' src={video} controls />;
    break;
}

 

As the Network Connection API and other performance APIs such as the Battery Status API gain adoption, the ability to create applications that provide performance appropriate experiences should only improve.

A video introducing the adaptive-loading project at the 2019 Chrome Developer Summit is also available.

The adaptive-loading project is open source software available under the Apache 2 license.

Rate this Article

Adoption
Style

BT