Contact Us

Contact Us



Pleas confirm by checkbox


Web Development

Lite Sites & Apps with “Prefers Reduced Data”

Author_img
By Vinil Pansare February 10, 2021

One of the interesting experiments going on with the CSS @media property is the prefers-reduced-data feature. This feature detects if the user has requested the content which consumes less internet traffic. And based on that, it serves the content which requires less quantity of internet data.

This feature is mainly useful for people who do not have the access to fast or unlimited internet data. If we want more people to keep accessing our websites/web applications, then this would be the perfect tool that will give them access to the required information with the minimum internet data usage.

Why we need this?

In many countries (different parts of the world) people either have very limited access to the internet or don’t even have it at all. In some places, the internet even comes with a data cap. And this restricts the user from using their internet data without any worries. They have to be more careful while accessing different websites/web applications that are heavy and takes more data to load.

By using the reduced data feature you can reduce the page size causing faster load time on the slower internet connection. And of course, people will have access to your website/web application in the first place.

Current support?

Officially, no browser supports this feature. Though, you can access this feature in Chromium browsers by enabling a simple flag.
Various operating systems also support this feature, and if prefers-reduced-data ever get implemented in CSS, this can mainly rely on the settings provided by the operating system.

With the below examples, you will get a better idea about this feature.
But before going through them, let’s prepare your browser for this!
Make the following change in your GOOGLE CHROME.

Note: This feature is not supported by any user agent and can be used on Chromium browsers enabling the correct flag. The feature is defined in the Media Queries Level 5 Spec.

Enable experimental-web-platform-features (see below image for your reference)

 

chrome://flags/#enable-experimental-web-platform-features

Once done with this, do the following.

To access the “prefers-reduced-data” feature, you need to access the rendering tool section. For that, open developer tools with the command + option (control + shift for Windows and Linux) + I in the browser. While it’s open, press command (control for Windows and Linux) + shift + P and type rendering in the search bar and press enter or click on the Show Rendering option.

Now in the Rendering tab, scroll down to the middle section to find “emulate CSS media feature prefers-reduced-data”

You can change the prefers-reduced-data: values from the available dropdown. Toggle these values to see the effect on the below examples.

Possible use cases of prefers-reduced-data:

  1. Conditionally load fonts –

    See the Pen
    Render google fonts using prefers-reduced-data
    by Vinil (@vinil)
    on CodePen.

Declare custom font @font-face code under the no-preference option.

@media (prefers-reduced-data: no-preference) {
        @font-face {
  	     font-family: 'Roboto';
  	     font-style: normal;
  	     font-weight: 100;
	     font-display: swap;
  	     src: url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxFIzIXKMnyrYk.woff2) format('woff2');
	}
}

body {
        font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Ubuntu, Cantarell, Noto Sans, sans-serif;
}

This will call Roboto font only if the prefers-reduced-data property is set to no-preference. In other words, a user with reduced data selected will not get the custom font but will see your content in default lighter font stacks.

  1. Background images

    See the Pen
    Render background images using prefers-reduced-data
    by Vinil (@vinil)
    on CodePen.

You can load high-resolution background images under no-preference media query or small images under the reduced section.

@media (prefers-reduced-data: reduce) {
	body {
		background-image: url(/images/small-image.webp);
	}
}

@media (prefers-reduced-data: no-preference) {
	body {
		background-image: url(/images/large-image.png);
	}
}

Here if the user has reduced data selected, he will get the small image.

  1. Smaller images in HTML

    See the Pen
    Loading different images based on prefers-reduced-data
    by Vinil (@vinil)
    on CodePen.

One more way to use prefers-reduced-data is to use it in the HTML <picture> tag. As you know, <picture> tag already have the media attribute inside <source> element.

<picture>
	<source srcset=”small.jpg” media=”(prefers-reduced-data: reduce)”/>
	<img src=”large.jpg” alt=”large image” srcset=”large2x.jpg” />
</picture>

This code will serve small.jpg to the users who have set their data preference to low (reduced)

  1. Conditionally preload and auto-play videos.

    See the Pen
    Loading videos using prefers-reduced-data
    by Vinil (@vinil)
    on CodePen.

Just like HTML, we can use prefers-reduced-data in JavaScript too. Simply use the window.matchMedia function to set data preference for autoplay and preload attributes on a video tag.

const video = document.createElement(‘video’);
const canAutoPlayAndPreload = window.matchMedia(‘(prefers-reduced-data: no-preference)’).matches;

video.setAttribute(‘autoplay’, canAutoPlayAndPreload);
video.setAttribute(‘preload’, canAutoPlayAndPreload);
  1. Ditch infinite scrolling – (don’t auto load additional data)

With recent trends, many developers started replacing pagination with infinite scrolling giving the end user an option to access data without them to take any action. But this change also came with additional data cost. To prevent this data loss for the people with prefers-reduced-data: reduce, you can simply give them the option of “Load More” button.

const button = document.querySelector(“.loadmore-button”);
const list = document.querySelector(“.my-list”);

const button = document.querySelector(“.loadmore-button”);
const list = document.querySelector(“.my-list”);

const showButton = window.matchMedia(
    ‘(prefers-reduced-data: reduce)’
).matches;

if (showButton) {
    list.appendChild(button);
    button.addEventListerner(“click”, loadMoreData)
} else {
    list.addEventListener(“scroll”, function(){
        const shouldLoadData = /*Code that checks the scroll position*/;
        if(shouldLoadData){
            loadMoreData();
        }
    })
}

Conclusion:

In the world of the internet with 1tbps speed, there are places where people don’t have the access to the internet. Even if they have it, they have it with many limitations. If you want to sell your product/application to a large audience, then you need to consider all the different scenarios. You can’t serve the same (large data) content to everyone. Especially to the people with the above limitations. Prefers-reduced-data can help you with this problem in many ways. Let’s hope this feature gets a green flag and get implemented in all the browsers.

Ref:

Related posts
Fluid Typography with Clamp: Usage and Benefits
Web Development

Fluid Typography with Clamp: Usage and Benefits

By kulwinder.singh October 12, 2020
Bootstrap 5 is Here: What’s New for Us
Web Development

Bootstrap 5 is Here: What’s New for Us

By kulwinder.singh September 14, 2020
What's new in Node-Data 2.0
Scalability

What's new in Node-Data 2.0

By kulwinder.singh December 30, 2017
Comparing productivity of node.js frameworks
Project Management

Comparing productivity of node.js frameworks

By kulwinder.singh December 29, 2017
Comparing performance of node.js frameworks
Scalability

Comparing performance of node.js frameworks

By kulwinder.singh December 29, 2017
SonarQube - PHP Project - Ubuntu
Technical

SonarQube - PHP Project - Ubuntu

By kulwinder.singh March 29, 2016
Part 2: Building web app using react.js, express.js, node.js, and mongodb
Technical

Part 2: Building web app using react.js, express.js, node.js, and mongodb

By kulwinder.singh February 02, 2016
Part 1: Building web app using react.js, express.js, node.js and mongodb
Technical

Part 1: Building web app using react.js, express.js, node.js and mongodb

By kulwinder.singh January 19, 2016
Prototypal Inheritance in JavaScript
Technical

Prototypal Inheritance in JavaScript

By kulwinder.singh October 03, 2015
Getting started with TypeScript in AngularJS application
Technical

Getting started with TypeScript in AngularJS application

By kulwinder.singh August 12, 2015

Stay updated

Get the latest creative news from Fubiz about art, design and pop-culture.