Light weight websites with Save-Data header

Several agencies are already using a CMS I once developed. I recently added support for the Save-Data header and attached tasks to this header. In short: your visitors may set this header to let websites know they expect or want lean webpages. As a developer or agency, we can anticipate on this kind of user preferences and adjust the way how our webpages -and which assets- are loaded.

Why a visitor might enable the Save-Data-flag

Chrome and Opera users are already able to configure the save-data option. These browsers are supporting the Save-Data flag since June 2018. But also Android users can enable this flag. Visit caniuse.com to view browser-support.

provide a more satisfying user experience, allow better content comprehension and retention, and deliver increased conversions and revenue.

developers.google.com

When set, your visitor is basically saying: please don’t waste my data. And their reasons can be versatile:

• Reduce resources and thus reduce carbon emissions produced by websites;
• Having expensive pre/post-paid data plans, still  the standard in many countries;
• A data flat rate which gets throttled after reaching a limit;
• Improve user experience for own benefits, via fast loading webpages.

Examples of Save-Data implementation

What developers and agencies can do to meet your visitor's preferences, is up to your imagination (and often up to the project's budget). You could, for example:

• Lazyload images (although this is often a best-practice);
• Don't load custom web fonts, such as Google Fonts;
• Don't load images which are only serving a decorative purpose;
• Don't preload video's;
• Don't do infinite loading, for example when showing search results;
• Load less or different type of advertisements;
• Change the way your website is doing pre-fetching of data;
• Let the user choose to toggle to full-data mode while visiting your website.

Save-Data use case

Obviously, I also implemented Save-Data support. Being a developer, it is up to me to respect this as well within the website. When the website detects Save-Data has been enabled, the website:

• will notify users that Save-Data has been detected, and they can change their preference during their session;
• won't preload fonts, or load them at all;
• won't load icon-set (as I use FontAwesome, also a font), and fall back to utf8 supported emoticons;
• won't load images. Users can choose which images to load;
• won't do preloading navigational pages, normally using resource hints;
• will offer the possibility to disable Save-Data within the website, to get full-data experience.

To illustrate: I reduced transferred data with an impressive 46%, transferring only 122 kilobytes when my homepage is being loaded. Custom fonts and icon set are ommited when Save-Data has been enabled by the user.

When specific resources are already downloaded, there often is no need to exclude them from successive page visits, as they might be cached already on first page visit. For example, when the user initially didn't set their preference using the Save-Data flag but does want to improve their user experience or reduce data afterwards, they can change their preference on-site.

But, at that stage, fonts and other recurrent resources are already downloaded and cached. You could choose to re-use those assets on other page visits.

Also consider:

• You could do the same for users experiencing slow internet connections, by checking the NetworkInformation API;
• When browsing using Chrome's incognito-modus, navigator.connection.effectiveType won't be read correctly (to prevent fingerprinting the user's device);
• Reducing JS libraries;
• Don't auto-start video's, or maybe load video's in new window using traditional hyperlinks;
• Set a class on your body element to apply different CSS (such as, CSS background colors or gradients instead of background images).

Code examples of Save-Data

Did you become enthusiastic at this point and want to do the same, or experiment with this feature? Check out developers.google.com for code examples. They also inform you about best practices when it comes to performance, but may be a stand-in-the-way when Save-Data is enabled.

As Google is stating, the Save-Data header does not have much nuance; it is either on or off, and the application bears the burden of providing appropriate experiences based on its setting, regardless of the reason.

Testing Save Data flag

While implementing, you should test the outcomes as well. To enable it within Chrome for Android, visit Settings > Data Saver and toggle the option.

Using Chrome on desktop? You can find the browser extension in their webstore. Do note, that this is only changing the HTTP header, not the JS NetworkInformation API reference.

Want more examples? Check out:

• Addy Osmani's blog post;
• CSS tricks article on Save-Data

Want to know more about implementing this feature in an optimal and tactical way? Let me get you up-to-speed about saveData and implementation.