Lazily load below-the-fold images and iframes

Image of Mattias Geniar

Mattias Geniar, April 08, 2019

Follow me on Twitter as @mattiasgeniar

A pretty cool feature has landed in Chromium that allows you to easily lazy-load images and iframes.

Here’s some info directly from the mailing list:

Support deferring the load of below-the-fold images and iframes on the page until the user scrolls near them.

This is to reduce data usage, memory usage, and speed up above-the-fold content.

Web pages can use the “loading” attribute on and elements to control and interact with the default lazy loading behavior, with possible values “lazy”, “eager”, and “auto” (which is equivalent to leaving the “loading” attribute unset).

Source: Intent to Ship: Lazily load below-the-fold images and iframes – Google Groups

Which leads to some pretty powerful optimizations for page loading and bandwidth savings, especially on image-heavy sites (like news sites, photo blogs, …).

It works simply as follows:

<img src="example.jpg" loading="lazy" alt="example" />
<iframe src="example.html" loading="lazy"></iframe>

Some more technical readings: Native Lazy Loading for img and frame is Coming to the Web.