Chrome 74 Natively Supports Lazy Loading

Google recently released Google Chrome 74 with a new experimental flag to enable native lazy loading (code-named LazyLoad) support for images and iframes. The img and iframe HTML tags get an additional loading attribute to configure the lazy loading behaviour of the corresponding resource. Deferring load of non-visible content may reduce data usage, memory usage, and speed up above-the-fold content.

Chrome 74 now supports deferring the load (LazyLoad) of below-the-fold images and iframes on the page until the user navigates within a given distance of them. The load-in distance depends on factors like the speed of the network, tuned such that content is typically finished loading in by the time it becomes visible.

To configure LazyLoad, web designers can use the loading attribute on <img> and <iframe> elements to control and interact with the default lazy loading behavior. The loading attribute supports three values:

• lazy: signals a good candidate for lazy loading.
• eager: identifies a poor candidate for lazy loading. Load right away.
• auto: leaves it in the hands of the browser whether or not to lazily load. Using auto for the loading attribute is equivalent to leaving the attribute unset.

LazyLoad is currently only supported in Chrome. Developers who need cross-platform support for the feature need resort to browser feature detection and use existing lazy loading libraries, such as lazySizes or vanilla-lazyload. Andrea Verlicchi, creator of vanilla-lazyload, addresses hybrid lazy loading in an in-depth blog article . Addy Osmani, engineering manager from the Chrome team, additionally provides a practical example:

<!-- Let's load this in-viewport image normally -->
<img src="hero.jpg" alt=".."/>

<!-- Let's lazy-load the rest of these images -->
<img data-src="unicorn.jpg" loading="lazy" alt=".." class="lazyload"/>
<img data-src="cats.jpg" loading="lazy" alt=".." class="lazyload"/>
<img data-src="dogs.jpg" loading="lazy" alt=".." class="lazyload"/>

<script>
  if ('loading' in HTMLImageElement.prototype) {
      const images = document.querySelectorAll("img.lazyload");
      images.forEach(img => {
          img.src = img.dataset.src;
      });
  } else {
      // Dynamically import the LazySizes library
    let script = document.createElement("script");
    script.async = true;
    script.src =
      "https://cdnjs.cloudflare.com/ajax/libs/lazysizes/4.1.8/lazysizes.min.js";
    document.body.appendChild(script);
  }
</script>

LazyLoad can be experimented with by going to chrome://flags and turning on both Enable lazy frame loading and Enable lazy image loading. This will turn on LazyLoad for images and iframes marked loading="lazy", plus those marked loading="auto" or without any loading attribute set that are well-suited to being lazily loaded.

Google has proposed to include the loading attribute for <img> and <iframe> as part of the HTML standard.