Support for data saving mode

[Nooshu]

What

Modern browsers are starting to come bundled with a save data mode, whereby a user can tell a website that, if possible limit the amount of data sent to the device. This is achieved by the browser sending the Save-Data header to the server. The server can then provide modified assets based on this.

Why

One of the more obvious examples of where this could be used is with our webfonts. When save data mode is enabled it would be good to stop the browser requesting the webfonts and fallback to Arial. This can be done by providing a different CSS font stack. This would remove approximately 123 KB of data for v1 fonts, and 65 KB for v2 fonts.

Now this may not sound like a huge amount but it makes quite a difference, especially on low spec devices on a poor connection. I created a prototype to display the difference it has on the GOV.UK homepage:

In the above image we see a Moto G4 on a 3G Fast connection. With Data saving mode text is displayed a full 500ms quicker.

We also see an overall improvement in visual progress, as seen in the graph above. The full results of these tests can be seen here.

I've written about a solution that uses the currently supported JavaScript API here. Browser support can be found here. Example code:

<script>if ("connection" in navigator) {if (navigator.connection.saveData === true) {document.body.className = ((document.body.className) ? document.body.className + ' js-save-data' : 'js-save-data');}}</script>

But there are plans to introduce this functionality within CSS Media queries too:

@media (prefers-reduced-data: no-preference) {....}

The specification for this can be found here. An open bug for FF can be found here. It would be worth investigating the overall support and the timeline for browsers.

We should look to see if we can capture data from users (CDN logs), as to the presence of the Save-Data header. It's also worth nothing that organisations like the BBC are already examining this header and seeing how they can use it to improve user experience.

[joelanman]

Thanks Matt! What changes do you think could be made in the Design System/Frontend for this?

[Nooshu]

If we were to go down the JS API route (which has good support at the moment), we'd add a little JS snippet much like the js-enabled class that gets appended to the body. Some class along the lines of js-data-saver-on. Then we'd have to look at a way of setting up a new CSS font stack for this class (removing "nta").

If we wait and use the media query then we'd do something similar but as to how exactly that works at the moment still looks to be in discussion. Ultimately we're looking for the simplest (and least impactful in terms of maintenance) way to change font-family:'GDS Transport',arial,sans-serif to font-family: arial,sans-serif when data saver mode is enabled.

[Nooshu]

It's also worth noting that fonts is an obvious change for data saving. Another could be images used. e.g. provide a smaller version, or less images when the client has the mode enabled. But this feels out of scope for what the Design System / Frontend can provide. It's up to the service team themselves to detect the Save-Data: true header in this instance and change the server responses accordingly.