Lazy Loading for Images and Iframes

There is a new attribute in town. It's the loading attribute which can be applied to the img element and the iframe element. This can provide the perception of a quicker loading web page when you set the loading attribute to the value "lazy" on img and iframe elements that are not initially in the browser viewport. The resource is only requested when the web page visitor scrolls near the element. See https://web.dev/native-lazy-loading and https://web.dev/iframe-lazy-loading for more info.

Lazy Loading Images and Iframes with the Google Chrome Browser

Lazy loading is a term that describes delaying the loading of  below-the-fold images until the web page visitor scrolls down the page to them. The major benefits are quicker load times, less bandwidth, and reduced memory usage. Until this announcement by Chrome, developers needed Javascript event handlers create this effect.

The latest version of Chrome browser (Chrome 76) will support native lazy loading, by implementing the new HTML loading attribute for img and iframe elements. 
Values for the loading attribute are:

• auto (default browser loading)
• lazy (defer loading the resource until it reaches a calculated distance from the viewport)
• eager  (load the resource immediately)

Here’s an HTML example of adding lazing loading to the img element:

HTML img element with the loading attribute

Although not yet part of an official W3C HTML5 Recommendation, the loading attribute is in the process of being added to the HTML5 standard and is documented at https://whatpr.org/html/3752/urls-and-fetching.html#lazy-loading-attributes. Keep in mind that at this time only the Chrome browser supports native lazy loading and other browsers will ignore the loading attribute.