Built-In Lazy Loading Lands in Google Chrome Canary

As Bleeping Computer first reported back in January this year, Google has started rolling out support for built-in lazy loading inside Chrome.

Currently, support for image and iframe lazy loading is only available in Chrome Canary, the Chrome version that Google uses to test new features.

Two flags are now available in the chrome://flags section of Chrome Canary. They are:

Enabling these two flags will activate a new type of content loading behavior inside the Chrome browser. The two flags have been available in Chrome Canary for a few days, since v70.0.3521.0.

How lazy loading helps speed page loading times

In current Chrome versions, the browser will load an entire page's code when the user accesses an URL. With the two flags enabled, Chrome Canary will load all the page's elements that are visible on screen (called "above the fold" elements), but will not load images (< img > tags) and iframes (< iframe > tags) that are not visible on the page and are "below the fold."

As Google engineers explained in a feature design document in January, the reason for implementing image and iframe lazy loading is to speed up page loading times and to save bandwidth on mobile data connections.

Tests carried out by the Chrome engineering team showed page load speed improvements varying from 18% to 35%, depending on the underlying network configuration and Internet connection.

Feature developed for primarily for Chrome on Android

Google specifically designed the feature to improve page load times on Chrome for Android, but the desktop versions were also scheduled to receive it if tests on Android were successful. Based on the two flags appearing in Chrome Canary, tests were indeed successful.

Issues with supporting a built-in lazy loading feature included the fact that Google had to re-do some existing Chrome features, like "Print" or "Save Page As," to load deferred images/iframes before executing their predefined actions (printing or saving a fully-rendered copy of the page).

In addition, Google engineers had to solve problems with users on intermittent connections, where images/iframes may have failed to load when scrolling down the page, and the user may have had no idea that there was supposed to be other content on the page they were scrolling down through.

New "lazyload" HTML attribute in the works as well

Lazy loading is a decade-old concept in web design, but until now it only worked in the form of JavaScript libraries that website owners would load on their sites.

By adding built-in lazy loading in Chrome, Google hopes to bring the concept to older websites that have not been updated in years, or websites that are run by webmasters who don't have the technical skills to implement a lazy loading library on their own.

As for website owners that do not want their site's images and iframes to be lazy-loaded in Chrome, Google is also working with the W3C's Web Platform Incubator Community Group (WICG) to develop a new HTML attribute that tells Chrome and other websites that may support built-in lazy loading not to lazy-load a specified element.

< iframe src="http://www.example.com/" lazyload="auto/on/off" >< /iframe >

Image credits: PACE, Bleeping Computer, Google