Adaptive loading: improving web performance on slow devices

Anshul Soni

Jan 27, 2023

Device capabilities and network connections vary a lot. Sites that delight users on high-end devices can be unusable on low-end ones. Sites that load smoothly on fast networks can come to a halt on slow ones. Any user can experience a slow website, that's why developing "one-size fits all" solutions may not always work.

In their Chrome Dev Summit talk, Addy Osmani from Google and Nate Schloss from Facebook explore a solution to that problem—a pattern for delivering pages that better cater to a variety of user constraints. They call it adaptive loading.

What is adaptive loading?

Adaptive loading involves delivering different experiences to different users based on their network and hardware constraints, specifically:

• A fast core experience for all users (including low-end devices).
•Progressively adding high-end-only features, if a user's network and hardware can handle it.

By optimizing for specific hardware and network constraints you enable every user to get the best possible experience for their device. Tailoring the experience to users' constraints can include:

•Serving low-quality images and videos on slow networks.
•Avoiding computationally expensive operations on low-end devices.
•Blocking third-party scripts on slower devices.
•Loading non-critical JavaScript for interactivity only on fast CPUs.
•Throttling the frame-rate of animations on low-end devices.

Browser support and how to implement adaptive loading

The signals you can use for adaptive loading are listed below. Browser support is also included for each signal:

Navigator.deviceMemory h1>

The navigator.deviceMemory property is used to reduce memory consumption on low-end devices.

Browser support: Source

Navigator.hardwareConcurrency

The navigator.hardwareConcurrency property is the CPU core count. It is used to limit costly JavaScript execution and reduce CPU intensive logic when a device can't handle it well.

Browser Support: Source

NetworkInformation.effectiveType

The navigator.connection.effectiveType property is used to fine-tune data transfer to use less bandwidth.

Browser Support: Source

THANKS FOR READING IT,
CodeIN BLOGS

What is Machine Learning ?