The world is an inconsistent place; not everyone holds the same things, and this holds true for the devices they operate, the configuration of the devices, and the network access they have.

We are talking about device and network inconsistencies because we are trying to improve web performance by using a pattern called adaptive loading.

Providing a "one fit for all" solution can be the wrong decision that you can make, especially if you are targeting developing countries like India and Indonesia, where the majority of the young population with internet access resides.

Thus, the focus should be on serving the user best based on their current network condition and device capabilities.

Addy Osmani from Google and Nate Schloss from Facebook discuss a pattern for delivering pages that better accommodate a range of user constraints as a potential solution to that issue in their Chrome Dev Summit talk. They summarized this pattern with the term "adaptive loading."

What is adaptive loading?

Adaptive loading is the loading of resources or features based on the user device capabilities and the network condition. For example:

• For users on the slower network, serve low-quality images, do not autoplay the videos, etc.
• For users with limited processing capacity on the devices, do not provide large animations.

Progressively add on the features as and when the network condition improves. For the device, we can do progressive enhancements.

Curating the feature delivery as per the user's current capabilities and progressively enhancing it can be the best way to serve a wide range of users.

You may notice that when the network speed is affected, YouTube downgrades the video quality. This allows users to continue using the application, though it is not the best experience. They can still browse the application, and the stream adjusts automatically once the network condition improves.

The following are things that can be worked on for adaptive loading:

• Serve low-quality media (video and images) for the smaller devices.
• Avoid heavy client-side computation on lower end devices.
• Lazy load scripts on the user interaction.
• Providing data-saver options to the user based on device capability and serving the AMP (Accelerated Mobile Pages).
• Predictively preload the resources; for example, if you know where the user will navigate next, preload that page or script.
• Block third-party scripts on lower end devices.

Adaptive loading in React