Optimization

More optimization with prefers-reduced-data media query

prefers-reduced-data media query

In terms of technical SEO, we can always optimize our website more and more. From an SEO point of view, we always need to consider site traffic, competition and budget to optimize both site and costs.

There are lots of techniques to optimize CSS, js, images, videos, etc. However, rather than optimizing all resources for all users, it is more optimized if users can access our site with less data when they have a low speed Internet connection, the page is loading slowly for any reason or their browser has a data saver mode!

prefers-reduced-data is an experimental technology that helps users who experienced slow connections or slow page loading. To dive into prefers-reduced-data, it’s better to talk about save-data request header and media query first.

What is save-data request header?

save-data is a request header field that is a Boolean which indicates the client’s preference for reduced data usage. A client could send a “save-data: on” HTTP request header for any reasons such as slow connection speeds or high Internet transfer costs. With “save-Data: on”, the HTTP request header is similar to the example below:

Host: oxyplug.com
accept-encoding: gzip, deflate, br
save-data: on

Save-data browser compatibility

According to Mozilla documentation, most browsers support save-data request header. Google Chrome supports “save-data: on” since Google Chrome 49. The only famous browser that does not support save-data request header is Safari.

save-data HTTP request header browser compatibility

save-data HTTP request header browser compatibility

 

What is a media query?

A media query allows us to test certain aspects of the device or user agent that the page or document being rendered in.

Media queries used in the CSS @media rule to apply styles to a document based on certain conditions such as device viewport width, device type, etc.

Media query examples:

@media only screen and (max-width: 768px) {
body {
background-color: green;
}
}

@media only screen and (orientation: landscape) {
body {
background-color: green;
}
}

@media print {
body {
background-color: white;
}
}

Prefers-reduced-data media query

Andi Osmani has introduced prefers-reduced-data media query at Google Dev Summit 2019. Andi explained that prefers-reduced-data media query would let you design data-reduced variance of your site for users who expressed that preference.

Andi Osmani is talking about prefers-reduced-data at Google Dev Summit 2019

Andi Osmani is talking about prefers-reduced-data at Google Dev Summit 2019

prefers-reduced-data could be “reduce” or “no-preference”. “Reduce” indicates that the user has turned on the data saver. “No-preference” indicates that the user has sent the HTTP request header without “save-data: on” or in other words, the user has made no preference.

Prefers-reduced-data browser compatibility

prefers-reduced-data is an experimental technology. Only Google Chrome 86+, Google Chrome Android 85+ and Microsoft Edge Chromium 85+ support this technology. So, use prefers-reduced-data carefully.

Prefers-reduced-data can be used the same as other media queries. It can be used both in HTML and CSS.

How to use prefers-reduced-data media query in HTML?

Prefers-reduced-data can be used in HTML tags including but not only <picture>, <link> and wherever other media queries can be used.

In the example below, the font.woff2 only be preloaded if the data-saver is not on. So, users with slow connection will not preload the mentioned font.

<head>
<link rel="preload" href="font.woff2" as="font" media="(prefers-reduced-data: no-preference)" crossorigin>
</head>

In the following example, users with slow connection or with turned on data saver, will see data-sever-on.png and others will see data-sever-off.png

<picture>
<source media="(prefers-reduced-data: reduce)" srcset="/data-sever-on.png" type="image/png" >
<source media="(prefers-reduced-data: no-preference)" srcset="/data-sever-off.png" type="image/png">
<img src="/data-sever-off.png" alt="prefers data savar test image" width="618" height="314">
</picture>

HTML picture element with or without save data HTTP request header

How to use prefers-reduced-data media query in CSS?

In the example below, since “prefers-reduced-data: no-preference” media query means that there is no “save-data: on” request header, we can only have (prefers-reduced-data: reduce) as a media query and show the large-image.jpg without media query.

@media (prefers-reduced-data: reduce) {
/* Save-Data: On */
.body {
background-image: url("small-image.jpg");
}
}

@media (prefers-reduced-data: no-preference) {
/* Save-Data: Off */
.body {
background-image: url("large-image.jpg");
}
}

How to emulate prefers-reduced-data on Google Chrome?

As I have been mentioned earlier, prefers-reduced-data is an experimental technology. You can test it with Google Chrome 86+. Follow the steps below to emulate prefers-reduced-data:

1- Turn on Google Chrome 86+ experimental web platform features

Open chrome://flags/#enable-experimental-web-platform-features and Enable “Experimental Web Platform features” and relaunch the browser.

Enable Google Chrome Experimental Web Platform features

Enable Google Chrome Experimental Web Platform features

2- Go to the Google Chrome DevTools command menu.

Press Control+Shift+C or F12 (Windows, Linux, Chrome OS) or Command+Option+C (Mac) to open the DevTools. Then, press Control+Shift+P (Windows, Linux, Chrome OS, Mac) to open the command menu.

Open Google Chrome command menu

Open Google Chrome command menu

3- Click on Rendering tab

Enter render in the command menu and select “Show Rendering”.

Google Chrome DevTools rendering tab

Google Chrome DevTools rendering tab

4- Change Emulate CSS media feature prefers-reduced-data

Change “No emulation” to “prefers-reduced-data: reduce” from the “Emulate CSS media feature prefers-reduced-data” drop down.

Choose prefers-reduced-data from the drop down menu

Choose prefers-reduced-data from the drop down menu

Note: since there are 5 “Emulate CSS media”s in the DevTools, be careful to find the correct one which is “Emulate CSS media feature prefers-reduced-data”.

Prefers-reduced-data examples

After choosing the “prefers-reduced-data: reduce” in your Google Chrome 86+ DevTools, you should be able to see different images in the examples below. You can switch between “No emulation” and “prefers-reduced-data: reduce” to see different images.

HTML picture element with or without save data HTTP request header

In summary

prefers-reduced-data is an experimental technology that helps us achieve better UX for users who experienced slow connections or slow page loading. Pages with prefers-reduced-data technology are able to provide less data to users with slow connection. Since prefers-reduced-data is a media query, we can use it in any case that supports media query which includes but not only the <picture> and <video> tag or <link> and in the CSS.

At this moment, only Google Chrome 86+ and Microsoft Edge Chromium 85+ support this technology. You can enable this experimental feature through Google Chrome DevTools.

FAQ about prefers-reduced-data

1- Do all browsers support prefers-reduced-data?

No, at this moment, Google Chrome 86+, Google Chrome Android 85+ and Microsoft Edge Chromium 85+ support prefers-reduced-data.

2- Can we use prefers-reduced-data to load different video formats?

Yes, you can use prefers-reduced-data for every element that support media query. For example, prefers-reduced-data can be used for video, picture, link, CSS, etc.

3- How to test prefers-reduced-data on desktop?

You can experience it with the Google Chrome DevTools prefers-reduced-data emulator.

Leave a Reply

Your email address will not be published. Required fields are marked *

35  +    =  38