Learn Performance - Defer IFrames

loading="lazy"

This demo contains two IFrames. One IFrame is within the initial viewport, while the other is outside of the viewport. The IFrame outside of the viewport has the loading="lazy" attribute.

If you observe the network tab, you should notice that the IFrame with the loading="lazy" attribute (and its subresources) is not requested immediately but begins downloading as you scroll down and it approaches the viewport.

Chrome DevTools Network panel showing 7 resources. The iframe within the viewport (row 4) and its subresources begin downloading immediately. The iframe outside of the viewport (row 7) starts downloading later.

In the network panel above, the iframe iframe-1.html and its subresoures iframe.css and iframe.js are downloaded immediately. The lazy-loaded iframe iframe-2.html started downloading as the user scrolled down.

View Source Code 
<iframe
  title="Inline Frame Example"
  width="800"
  height="800"
  src="../iframe-2.html?v=1"
  class="iframe"
  loading="lazy"
>
</iframe>