Chromium Blog: Data Saver

Automatically lazy-loading offscreen images & iframes for Lite mode users

Thursday, October 24, 2019

In Chrome 76, we introduced native lazy-loading for images and iframes via the `loading` attribute - a developer opt-in. In Chrome 77, Chrome Android users with Lite Mode (Data Saver) enabled will benefit from native lazy-loading of images and iframes automatically.

Lite mode has allowed Chrome to reduce users’ data usage by up to 60 percent, often by compressing the pages users request before downloading them.

Web pages commonly have images or embedded content that is out-of-view near the bottom of the page, and users typically don’t scroll all the way down to discover them. Today, devices need to use resources loading this content, which is challenging for users on a limited data-plan or with a spotty network connection.

When a user has Lite Mode enabled on Chrome for Android, Chrome will defer the load of below-the-fold images and iframes until the user scrolls near them. This is done without requiring developer action. Automatic lazy-loading helps to reduce network data use and memory use. It may also increase site speed, by prioritizing content visible to the user.

In our experiments, native lazy-loading of images and iframes yields a ~10% reduction in bytes downloaded per page at the 75th percentile and an 8% reduction in overall downloaded bytes for the median user. Automatic lazy-loading also led to a 1-2% improvement in First Contentful Paint at the median, a 2% improvement in First Input Delay at the 95th percentile and a 0.7% improvement in median memory reduction per page. We expect increased benefits as we tune the feature.

Chrome’s native lazy-loading has different distance thresholds after which deferred content will start loading, based on factors such as the effective connection type. This distance is chosen so that content we’ve deferred almost always completes loading by the time it becomes visible.

Any <iframe> or <img> with the `loading` attribute value of `auto` will also be eligible for Lite Mode’s automatic lazy-loading. This includes <picture> elements and CSS background images.

It is important to note that automatic lazy-loading of images and iframes is only done if a user has Lite Mode enabled. Lite Mode is most heavily used in areas of the world with poor and expensive connectivity and we believe it is users in these regions that will benefit the most from the feature. Sites wishing to learn what percentage of users have Lite Mode turned on can monitor truthy values from the SaveData JavaScript API in their analytics.

To enable Lite mode, select Settings > Lite mode and toggle the setting to On. We look forward to this feature helping users keep their page loads just a little bit lighter.

Posted by Addy Osmani, Scott Little and Raj T - lazy Chrome engineers.

Data Saver is now Lite mode

Tuesday, April 23, 2019

Since we introduced Data Saver in Chrome, we’ve reduced users’ data usage by up to 60 percent. But now, the feature is expanding to provide more benefits in addition to data savings. Pages will now load faster, in some cases considerably faster, and use less memory. This is why starting today, we will be renaming Data Saver to Lite mode.
Lite mode will continue to reduce data use by using Google servers to compress the pages you visit before downloading them. Using the NetworkInformation API, Lite mode tells web servers that you are interested in receiving a version of the site that uses less data if one is available.
Lite mode also helps improve page loads. If Chrome predicts that a page will take longer than 5 seconds for the first text or image to show on screen, it will load a Lite version of the page instead. Lite pages are highly optimized to load considerably faster. A whitepaper will be published in the coming months that will explain this in more detail.
And of course, Lite mode will continue to respect your privacy. When Chrome optimizes an HTTPS page, only the URL is shared with Google and other information such as cookies, login information, and personalized page content is not shared with Google. We never break secure connections between Chrome and a website.
Lite mode is available only on Chrome for Android. The Chrome Data Saver desktop extension will be deprecated in M74.
To enable Lite mode, select Settings > Lite mode and toggle the setting to On. If you already have Data Saver enabled, then Lite mode will automatically be enabled.

Posted by Ben Greenstein, Technical Lead for Lite Mode and Nancy Gao, Product Manager on Chrome

Chrome Lite Pages - For a faster, leaner loading experience

Tuesday, March 12, 2019

Browsing the web with poor connectivity can be a frustrating, slow, and expensive experience.
Chrome on Android’s Data Saver feature helps by automatically optimizing web pages to make them load faster. When users are facing network or data constraints, Data Saver may reduce data use by up to 90% and load pages two times faster, and by making pages load faster, a larger fraction of pages actually finish loading on slow networks. Now, we are securely extending performance improvements beyond HTTP pages to HTTPS pages and providing direct feedback to the developers who want it.
To show users when a page has been optimized, Chrome now shows in the URL bar that a Lite version of the page is being displayed. Users can tap this indicator to see more information and to access an option to load the original version of the page. Chrome automatically disables Lite pages on a per-site or per-user basis when it detects that users frequently opt to load the original page.

How do Lite pages work?
We use built-in optimizations and Google servers to improve page loading. The specific optimization techniques depend on what region the user is in and on how the developer wrote and served that particular page. When Chrome optimizes an HTTPS page, only the URL is shared with Google; other information – cookies, login information, and personalized page content – is not shared with Google.
These optimizations are only applied when the loading experience would be painful to users. Specifically, they are applied when the network’s effective connection type is “2G” or “slow-2G,” or when Chrome estimates the page load will take more than 5 seconds to reach first contentful paint given current network conditions and device capabilities. Chrome applies these criteria equally to all pages. For all but the slowest sites, we expect this to affect a very small percentage of page loads.
What does this mean for developers?
To try out Lite pages on Chrome for Android, simply enable Data Saver from the settings menu and load a page on a very slow network.

If you’re using a faster network, set #force-effective-connection-type to any 2G option at chrome://flags. To prevent automatic disabling of the feature as a result of users opting out, enable #ignore-previews-blocklist.
We want developers to know when and why Lite pages are being shown, so starting with Chrome 72, you can implement intervention reports with the Reporting API, which detail when these optimizations are used.
Lite pages are only triggered for extremely slow sites, so we encourage developers to measure how well their pages are currently performing over slow networks. We recommend several tools to evaluate and improve a web page’s performance:

Lighthouse (part of Chrome DevTools) audits quality and performance.

PageSpeed Insights (part of the Chrome UX Report) indicates performance and suggests optimizations.

WebPageTest evaluates performance on a real device under various conditions.

In addition, web.dev is a guide for developers to learn about best practices for building fast and performant web experiences.
As we continue to improve this feature, we are providing an option to disable it on your site. Chrome will not show a Lite page if the original page’s main HTML response includes the ‘no-transform’ directive in the ‘cache-control’ header. If you use this option, please file a bug since we don’t intend for it ever to be necessary to opt out.
Posted by Ben Greenstein, Lite Pages Technical Lead and Nancy Gao, Product Manager, Chrome

Chromium Blog

Automatically lazy-loading offscreen images & iframes for Lite mode users

Data Saver is now Lite mode

Chrome Lite Pages - For a faster, leaner loading experience

Labels

Archive

Feed