Faster Image Delivery with Chrome’s Lite Mode
We have all been there. In urgent need of just checking this thing on the web, but the page takes forever to load! Connection is flaky, maybe you’re on hotel wifi, or worse, roaming abroad on vacation and you just need to find the confirmation of your hotel booking.
Wouldn’t it be nice if you could tell the internet not to push so much data down your pipe?
Well, that feature exists! In Chrome it used to be called “Data Saver”, but has been rebranded to “Lite Mode”.
What is Chrome Lite Mode?
When Lite Mode is enabled, Chrome will add an additional header to each HTTP request. This header is was originally specified in the Client Hints specification, but now it’s a part of the Network Information API specification. The idea is that when a web server (AKA origin) receives a request with the Save-Data:on header, it should take measures to reduce the bandwidth needed to transmit the resource. What the web server should do exactly, is not specified.
The “Save-Data” header field is a boolean that, in requests, indicates client’s explicit opt-in for reduced data usage, due to high transfer costs, slow connection speeds, or other reasons. When communicated to origins, it allows them to deliver alternate content honoring such preference — e.g. smaller image and video resources, alternate “light mode” markup, etc.
End users want to save data
Observations in the wild do report varying use of Lite Mode. Anywhere from 4% of sessions to 20% of requests. This is interesting, because Lite Mode is an active user choice. The user proactively has to go into Settings > Advanced, and then enable Lite Mode.
This is also the most important reason why the Save-Data header should be respected by origins! Some users desperately want to save data! The potential is huge, especially on images, which account for the biggest share of data transmitted for an average webpage. Images should not be treated as static content!
ImageEngine is one of few image CDNs supporting the Save-Data header, and Lite Mode out of the box.
When ImageEngine receives an image request with Save-Data:on, ImageEngine will apply extra compression to the image, making the file size smaller. This serves two purposes: 1) Faster and cheaper download, 2) faster decoding in the browser.
Below is an example using curl. First a normal request:
# Optimized $ curl -I https://try.imgeng.in/http://wurfl.github.io/i/pencils.jpg
HTTP/2 200
content-type: image/jpeg
content-length: 93535
This request is 93535 bytes. Next, let’s add the Save-Data:on header:
# Optimized with Save-Data: on $ curl -I -H”Save-Data: on” https://try.imgeng.in/http://wurfl.github.io/i/pencils.jpg
HTTP/2 200
content-type: image/jpeg
content-length: 21246
Now the same image is only 21246 bytes.
Lite Mode users will enjoy a payload reduction of 77%!
Current Status of Lite Mode Support
Looking at MOVR data, we see that Lite Mode is supported by 55,7% of requests.
The share of browsers not supporting Save-Data header is comprised of mainly Apple devices and Safari browsers. Out of the total, more than 10% of the requests has Lite Mode enabled:
Who Are The Data Savers?
10% is definitely significant. So, who are these users? Let’s have a closer look.
Interestingly, about half of the users are on WIFI. While users connected through cellular networks may be motivated by saving on the data plan, WIFI users may only be interested in speed. This finding supports the “hotel WIFI use case” where even WIFI doesn’t necessarily mean that that connection is fast.
Looking at the round trip time (RTT) reported by the Netinfo API, it does not seem that increased RTT is a motivation to turn on Lite Mode. The amount of requests with Save-Data:on is stable as the RTT increases.
Looking at the downlink reported through Netinfo API however shows that Lite Mode is more common when on slow connections:
Further, not surprisingly, saving data is more popular in regions known for flaky connectivity:
A Practical Example
To illustrate what Lite Mode can do, I made a test page illustrating a web shop and ran it through Webpagetest.org with- and without the Save-Data header. ImageEngine is the image CDN serving the images. ImageEngine will apply additional compression to images when the Save-Data header is present.
In terms of data transfer, the savings are significant. Having ImageEngine apply its default optimization, the total payload is 2068 kB. With Lite Mode, the image payload is only 1009 kB. A 50% + reduction!
Of course, image quality is affected because of the rather aggressive compression, but at least the page is loading, content is displayed and the contents of the images are still clearly visible.
Looking at the various pageload time metrics for mobile, where Lite Mode may have higher impact and relevance, we also see great impact:
The visual progress is significantly faster in Lite Mode. Page is fully visible after roughly 3 seconds in Lite Mode, while it takes more than 4 seconds in regular mode. (Note that images loaded in regular mode are already highly optimized by ImageEngine compared to the originals.)
Recap
When Lite Mode is activate — Save-Data:on — this should be respected simply because there is a user at the other end who has actively enabled this feature. 10% of our users may have Lite Mode enabled without you knowing. With that in mind, remember that 53% of mobile users will leave the site when it takes more than 3 seconds to load? Like Yoav Weiss reported in this tweet, the need for saving data is a very real use-case impacting not only end users, but also engagement and conversion rates for web sites.
