Optimizing Content for Lite Mode on Chrome for Android

Posted on
Contents
Android device with Lite Mode

Google recently announced that Data Saver mode would be renamed to Lite mode in Chrome for Android. Lite mode reduces data by using Google servers to compress web pages you visit before downloading them - but only if your connection is slow.

Unfortunately Lite mode is only available on Chrome for Android and the Chrome Data Saver desktop extension has been removed and no longer works.

Jeremy Wagner covered optimizing content on the server using the Save-Data header and PHP.

You can also optimize content for Lite mode with JavaScript using the navigator.connection.saveData API.

Don’t load auto-playing video backgrounds

Your sites homepage may have an auto-playing video background using Vide . You could set it to only load the script (and the video) if a user doesn’t have Lite Mode enabled or not set with this:

if (navigator.connection && navigator.connection.saveData) {
} else {
  var js = document.createElement("script");
  js.src = "/js/vide.min.js";
  document.body.appendChild(js);
}

Don’t load Google Fonts

Loading Google Fonts can consume considerable bandwidth with both the CSS and Fonts to download. You can skip loading Google Fonts with the Web Font Loader for users on Lite Mode. You can do this with:

if (navigator.connection && navigator.connection.saveData) {
} else {
  var js = document.createElement("script");
  js.src = "https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js";
  document.body.appendChild(js);
  WebFont.load({
    google: {
      families: ["Droid Sans"],
    },
  });
}

Use a ’lite-mode’ stylesheet

This one is probably the most useful snippet - loading a special stylesheet for users on Lite Mode. Here you could set background-images to not load - or use smaller, lower-bandwidth versions, or prefer system fonts rather than downloading fonts

if (navigator.connection && navigator.connection.saveData) {
  document
    .getElementsByTagName("head")[0]
    .insertAdjacentHTML(
      "beforeend",
      '<link rel="stylesheet" href="lite-mode.css">'
    );
} else {
}

Conclusion

The SaveData API can be really useful in helping give you a lower-bandwidth version of your site to users who need it. I hope that that the Chrome team add a Lite Mode for desktop in the future.

iOS 13 adds a ‘Low data’ mode API for native apps so I’d like it if web developers had access to this API too - so I requested it .

Further Reading

You might also like

Using the Web Share API in Chrome for Android

A quick look at the new API for sharing on the web

The best Chrome extensions for Front-end web developers

10 essential tools I use for developing websites with Chrome