Different networks and devices have different capabilities. There are many websites created with high-end devices in mind, which don’t perform well on simpler devices. Fast networks can load websites smoothly, while slow networks might make the same websites halt. All the users have experienced problems with loading some websites, and everyone can agree that a slow experience is a bad experience.
We live in a world full of devices with different capabilities so developers are always looking for “one-size fits all” solutions. However, such solutions might not always work. Facebook’s Nate Schloss and Google’s Addy Osmani addressed this issue in their Chrome Dev Summit talk and discussed adaptive loading — a pattern that allows for delivering pages in a way that helps deal with different kinds of user constraints. Adaptive loading delivers a fast core experience to all devices, including the low-end ones, and then gradually adds high-end features, depending on the capabilities of a particular user’s device and network.
Check out the video on YouTube: https://youtu.be/puUPpVrIRkc
What Is Adaptive Loading?
Adaptive loading involves using low-quality videos and images when a network is slow. It takes into account Data Saver preferences, uses less bandwidth, and adjusts Data Transfer. It also helps reduce memory use, optimizing the loading of resources that consume a lot of memory and switches memory-intensive animations. Adaptive loading limits JavaScript on slow devices and adds non-critical JavaScript elements on fast CPUs. It also reduces CPU-intensive code execution.If a website contains a lot of media content, adaptive loading shows gallery applications with low-resolution previews so that a user can click on them and see high-resolution images if needed. Search applications may display fewer results, reduce the number of dependencies, or limit the number of results that rely heavily on media. Adaptive loading can also work on news-oriented websites, avoiding less popular stories or categories, and delivering smaller previews. Adaptive loading also allows not to load a resource at all, as sometimes it may be even a better choice than showing resources based on device capabilities.
How Adaptive Loading Works
A demo from React Movie illustrates adaptive loading that delivers media based on the status of a network. This application shows movie posters, cast lists, and plot summaries. Depending on a user’s connection, it might show either high-quality posters or low-quality posters, if the connection is too slow. Currently, adaptive loading is used by several popular websites, including eBay, Facebook, and Tinder.In 2018, Twitter introduced its Data Saver mode that helps reduce the amount of data. When the Data Saver mode is active, users see low-resolution previews of images. If they want to load large images, they can tap on the necessary preview. This mode enables Android and iOS users to save as much as 50% of data, while desktop users can save up to 80% of data. You can check out a React demo that replicates the Twitter timeline using the Save data hook. It’s easy to see the difference in the amount of transferred data if you open the DevTools Network panel and scroll the feed with the enabled and disabled Save Data feature.
eBay also saves data, turning off zooming and other features if a user’s network or hardware is unable to support them properly. In this case, the goal is achieved by using code loading and code-splitting. Highly interactive components are conditionally loaded on high-end devices, while users with slow devices don’t receive them. The same goes for operations that require heavy computations. You can check out a 16-minute video where this pattern is used on a demo eBay page using Suspense and React.lazy().
Tinder also uses adaptive loading to ensure the fastest user experience possible, no matter what devices or networks users have. Adaptive loading is implemented in Tinder’s Lite app and web app. If a user enables Data Saver or uses a slow network, these apps disable the autoplay feature for videos and only load one image at a time when swiping. These apps also limit route prefetching. Adaptive loading has proven to be very effective, as Tinder got a significantly increased swipe count in a number of countries, including Indonesia.
Facebook uses the user-agent string to get the device name and then groups devices into low-end and high-end categories. It makes implementing adaptive loading on mobile devices a simple task. However, it becomes more difficult when people visit Facebook from a desktop. In this case, the only information available is the type of operating system.
To categorize desktop devices, Facebook includes the data on RAM (navigator.deviceMemory) and CPU (navigator.hardwareCurrency) in its performance monitoring. Analyzing performance and the relationships between different types of hardware, Facebook can divide desktop devices into five categories. As hardware classes get integrated into monitoring, developers can better understand how different people use Facebook products on their devices, therefore identifying regressions much easier.
How To Implement Adaptive Loading
To implement adaptive loading, developers can use a number of signals. Here are a few of them.- Memory. We can use navigator.deviceMemory to reduce memory consumption on low-end devices.
- Network. navigator.connection.effectiveType allows developers to fine-tune data transfer in order to decrease bandwidth. In addition, developers can use navigator.connection.saveData to make use of the user’s Data Saver preferences.
- CPU core count. Developers can use navigator.hardwareConcurrency to limit the execution of resource-consuming JavaScript and to limit CPU intensive logic if the user’s device is unable to handle it properly. This becomes possible due to the fact that JavaScript execution is CPU bound.
You can decide what content to serve to users working with the server or the client. If you want to work with the client, you can use JavaScript APIs listed above.
Determine whether a user has Data Saver turned on:
if ("connection" in navigator) {
if (navigator.connection.saveData === true) {
// Implement data saving operations here.
}
}
Here’s how you can determine whether Data Saver is enabled on the server side:
// false by default.
$saveData = false;
// Check if the `Save-Data` header exists and is set to a value of "on".
if (isset($_SERVER["HTTP_SAVE_DATA"]) &&
strtolower($_SERVER["HTTP_SAVE_DATA"]) === "on") {
// `Save-Data` detected!
$saveData = true;
}
Use the following code to serve low-resolution pictures on high-resolution displays:
if ($saveData === true) {
// Send a low-resolution version of the image for clients specifying `Save-Data`.
?><*img alt="A butterfly perched on a flower." src="butterfly-1x.jpg" /><*img alt="A butterfly perched on a flower." src="butterfly-1x.jpg" srcset="butterfly-2x.jpg 2x, butterfly-1x.jpg 1x" />
You can also apply adaptive loading to background images:
<*html class="<?php if ($saveData === true): ?>save-data<?php endif; ?>">
To omit non-essential images and fonts, use the following approach:
This paragraph is essential content. The image below may be humorous, but it's not critical to the content.
<*img src="meme.jpg" alt="One does not simply consume data.">; rel=preload; as=style";
if($saveData === true) {
// ...but don't push anything if `Save-Data` is detected!
$preload .= "; nopush";
}
header("Link: " . $preload);
Final Thoughts
Delivering the best user experience possible is a top priority for any website or app that aims to become mainstream. This is a reason why site owners search for the fastest hosting services and invest in localization, using services like The Word Point. People use different devices, and not all devices are able to handle heavy interfaces and multimedia. On the one hand, people who use high-end devices always appreciate beautiful features, such as autoplay videos, galleries with large images, etc. On the other hand, such features consume a lot of traffic and resources so users with low-end devices might be unable to use the website or app comfortably.Adaptive loading is a concept based on the principle of inclusivity. You can provide a core experience for everyone, analyzing a particular device and network, and adding high-end features based on a particular user’s network, CPU, and memory. Such an approach allows companies to provide a better user experience for everyone so we can expect it to become more and more common in the near future.
0 comments:
Post a Comment