earn how to ensure every user gets the best possible experience by optimizing your sites for specific hardware and network constraints.

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.

n 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.

learn more about web Performance

What is adaptive loading?

• 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.
• Throttling the frame-rate of animations on low-end devices.
• 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.

How to implement adaptive loading

• Network—for fine-tuning data transfer to use less bandwidth (via navigator.connection.effectiveType ). You can also leverage the user's Data Saver preferences (via navigator.connection.saveData ).
• Memory—for reducing memory consumption on low-end devices (via navigator.deviceMemory ).
• CPU core count—for limiting costly JavaScript execution and reducing CPU intensive logic when a device can't handle it well (via navigator.hardwareConcurrency ).

There are two places where you can make a decision about what to serve to users: the client and the server. On the client, you have the JavaScript APIs noted above. On the server, you can use client hints to get insight into the user's device capabilities and the network they're connected to.

Adaptive loading in React

React Adaptive Loading Hooks & Utilities is a suite for the React ecosystem that makes it easier to adapt your sites to lower-end devices. It includes:

• The useNetworkStatus() hook for adapting based on network status (slow-2g, 2g, 3g, or 4g).
• The useSaveData() hook for adapting based on the user's Data Saver preferences.
• The useHardwareConcurrency() hook for adapting based on the number of logical CPU processor cores on the user's device.
• The useMemoryStatus() hook for adapting based on the user's device memory (RAM).

Each hook accepts an optional argument for setting the initial value. This option is useful in two scenarios: when the user's browser does not support the relevant API and for server-side rendering where you can use the client hint data to set the initial value on the server. For example, the useNetworkStatus() hook can use the initial value passed from client hint for server-side rendering and, when executed on the client, update itself if the network effective type changes.