Optimizing Web Pages with the Save-Data Header

What are web users looking for when they perform searches with popular engines like Google? They want fast answers to their questions, swift access to products and services or instant delivery of media content. Mobile users in particular prefer speedy websites, and sites unable to deliver the expected experience are quickly abandoned.

In 2010, Google responded to this desire by making page load time part of the algorithm used to determine site rankings. In its continuing quest to deliver the best information possible in response to queries, the search giant now gives preference to sites offering a superior user experience (UX). The faster a site loads and the easier it is to consume site content across devices and platforms, the better chance it will have for ranking higher in the SERPs.

As a webmaster, this means you need to take speed into consideration when optimizing the pages of your site for SEO. Just half a second of delay in load time can result in a 20 percent drop in traffic, and slower pages experience higher bounce rates. Check out this list of 21 ways you can reduce the bounce rate on your website.

Several popular browsers now offer a way for users to communicate a preference for optimized UX on the sites they visit called the Save-Data header. This new option provides users with the streamlined experience they desire while giving webmasters control over how pages are enhanced for better load times.

Understanding the Save-Data header

As defined by Web Concepts, Save-Data is

A token that, in requests, indicates client's preference for reduced data usage, due to high transfer costs, slow connection speeds or other reasons.

This HTTP request header is enabled by users through options available in the following browsers:

Opera 35+ will advertise Save-Data whenever the user enables Opera Turbo mode on desktop, or the Data savings option on Android browsers.

will advertise whenever the user enables Opera Turbo mode on desktop, or the Data savings option on Android browsers. Yandex 16.2+ will advertise Save-Data whenever Turbo mode is enabled on desktop, or mobile browsers.

When these options are turned on and the web developer has defined parts of their website to be smaller in size for data-save users, browsers return streamlined versions of pages, to speed up UX and minimize the amount of data used. This helps to counteract the problem of websites getting heavier in recent years. Between 2010 and 2016, for example, the average data size of a website increased by over 3 times.

Until this data-saving token was introduced in early 2016, the best way for users to pare down excess or unnecessary elements on web pages was to rely on a proxy browser or transcoding service. These options work to compress images and text elements and reformat sites, creating lighter versions roughly half the size of the originals. However, neither users nor webmasters have a say in the look and feel of the final product, and this can result in a vastly different UX than what was intended.

Developers and webmasters now have a way to respond to requests from users for faster, lighter pages. Instead of being at the mercy of a third party service, it's possible to provide alternate elements to users with data-saving options enabled on their browsers. UX is preserved, users get the information they need and search engines take notice.

Why is Save-Data important to web developers?

Mobile users are blowing through an average of 2.1 GB of data every month.

However, even though there are 67 percent more users of unlimited plans than limited ones, a large chunk of your potential audience is actively trying to conserve data to get the most out of the mobile experience while avoiding overage charges.

Even those with unlimited plans may not always experience the best connectivity. Some areas still lack 4G access, leaving mobile users with the option of slower 3G or 2G connections. Pages not optimized for speed on 4G will take even longer to load for these users, and ignoring the implications of this can be costly for your brand.

On the developer's end, Save-Data requests provide a way to improve page speed optimization without compromising site layout and appearance. You dictate the content delivered when users want a faster experience so that the look and feel you originally designed for your site isn't lost when the page is pared down.

This is another essential component of UX. Focusing on speed to the exclusion of other elements of the overall experience undermines the usefulness of this tactic for SEO. Search engines look not only for speed but also for ease of navigation and a sensible hierarchy within the content presented on pages. Balancing all factors involved in how a user interacts with your site is important.

Faster load times, better user response

When a user enables Save-Data , pages can load up to four times faster and use 80 percent fewer bytes of data. A combination of smaller or compressed images and video and lighter markup has been shown to increase traffic by about 50 percent for some websites. Browsers know to switch to optimized content because the header token announces a user's preference when they navigate to a website.

Since 47 percent of mobile users prefer page load times of less than two seconds and 40 percent will abandon a site if it takes longer than three seconds to load, even a small improvement in how quickly your site delivers content can have a big impact on UX. If you're running a business, this means:

You have a better chance of retaining the 79 percent of customers who never return to brands after experiencing issues with site performance

You can avoid losing 7 percent of conversions for every one second of delay

Your customer satisfaction remains 16 percent higher than competitors whose sites load one second slower

Focusing too much on the homepage is a common mistake webmasters make. Fewer than half of the people visiting your site will land on the homepage first. This doesn't mean you shouldn't create save-data alternatives for the your main portal, but it might be more profitable to focus your initial optimization efforts on the pages currently receiving the most traffic or experiencing unusually high bounce rates.

The benefits of a faster experience

Why should you invest the time in optimizing the most popular and potentially profitable pages on your site? Take a look at what a difference this action made for U-Pack. In 2011, the moving company initiated an aggressive effort to speed up their website and enjoyed a 15 percent increase in conversions. Much of the increase came from organic search traffic, showing the power of page load speed for SEO.

Changes in page speed for other well-known websites show similar results:

Speeding up pages on Shopzilla resulted in 7 to 12 percent more conversions

Decreasing page rendering time by 2.2 seconds increased Firefox downloads by 15.4 percent

Shaving seven seconds off page load time improved page views by 17 percent for Edmunds.com

Tests reveal only about 50 percent of sites load in five seconds, which is still three seconds longer than most mobile users expect. Slimming down your pages with content designed to fulfill data-saving requests can give you an edge with better page rankings, greater visibility and higher click-through rates.

Using the Save-Data header

What can you change to leverage the power of data-saving HTTP requests and transform the UX of your site? Work with your development team to update the code and scripting on the pages so that each one renders the way it should while conserving as much data as possible.

Some tactics to consider include:

Reducing the DPI of displayed images

Removing images not essential to the content

Removing or replacing heavy markup elements

Editing CSS scripts to remove heavy HTML assets

The examples below, written by Jeremy Wagner on CSS-Tricks, shows you can use a rewrite rule on an Apache server to tell it to deliver higher quality images if the user doesn't have save-data enabled and lower quality images if they do.

RewriteCond %{HTTP:Save-Data} =on [NC] RewriteRule ^(.*)-2x.(png|jpe?g|webp)$ $1-1x.$2 [L]

This snippet looks for any PNG, JPEG, or WebP image requests ending in -2x (which corresponds to the high DPI version) and rewrites them to the low DPI version (-1x).

Another example is to include a .save-data class within your HTML like so:

<html class="<?php if($saveData === true) : echo("save-data"); endif; ?>">

Then, in your CSS file, you would define styles for your regular body tag (or which tag you wish) and styles for your .save-data body tag.

body { background-image: url("/img/high-res-background.png"); font-family: Open Sans; } .save-data body { background-image: url("/img/low-res-background.png"); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; }

As shown in the example, we've defined a high resolution image to display for users without the Save-Data header along with Google's Open Sans font. On the other hand, users who do have the Save-Data header enabled will be shown a lower resolution image and their browser will use a system font from the list.

Additional best practices to improve page load speeds

Adjusting your site's scripting to ensure it responds appropriately to an enabled Save-Data header is one of the newest tools you can use to optimize page load times and improve your place in search rankings. There are several other strategies you can employ to ensure visitors enjoy a superior UX:

Use a speed test tool to see where your website stands in terms of performance and what recommendations are given to improve your site overall.

Summary

Applying changes to your site so that it delivers streamlined content to users with data-saving preferences enabled can improve overall site performance.

One downfall of the Save-Data header is that if you want to optimize all of your web pages for users who have the Save-Data option enabled, it can be time consuming. As shown in the example above, you can employ rewrite rules to reduce the number of manual modifications required although in some cases you'll need to write your own styles for Save-Data users.

Another downside is cache implications. Let's say you're using a caching proxy and have enabled the Save-Data header on your site. Then a user with the Save-Data option enabled in their browser visits your site and receives the stripped down version of the site, this version will then be cached on the proxy and delivered to all subsequent visitors whether they have the Save-Data option enabled or not. This issue can be resolved by using the Vary header to tell browsers to cache content based on the existence of the Save-Data header however not all caching proxies or CDNs support Vary header caching.