A year ago, Google added lazy loading support for images in Chrome 76. Recently, ChromeEng manager Addy Osmani announced that the team has added iframe lazy loading as a standard feature to the Chrome browser and Chromium browser.

  <iframe src="https://example.com"
  loading="lazy"
  width="600"
  height="400"></iframe>

This feature delays the loading of an out-of-window iframe until the user scrolls the webpage nearby. This saves data, speeds up loading of other parts of the page, and reduces memory usage.

Research from the Chrome team shows that iframe lazy loading can save a median of 2-3% on data size, 1-2% on first content render, and 2% on first input delay (FID) in 95% of locations.

Currently, the loading supports three attribute values:

lazy: Ideal for lazy loading.

eager: Load immediately (ideal for non-lazy loading).

auto: The browser decides whether to delay loading.

Osmani says it saves 10 seconds of interaction time on mobile devices when it loads embedded content on YouTube. Instagram and Spofity still process embedded content on initial load, but save >100KB and 514KB respectively after compression.

Also, all Facebook social plugins now support native browser lazy loading of iframes. It concluded that support for lazy-loading iframes would make it significantly easier for users to improve the performance of their web pages.

It is worth mentioning that Chrome for Android will still automatically delay loading images and iframes outside the window in Lite mode. More details can be found on the official blog.