Learn Performance - Defer IFrames

Hidden IFrames

This demo contains two IFrames. One IFrame is has a width and height of 800 while the other is a hidden IFrame (similar to what is used for tracking or analytics) with a width and height of 0, and display:none. The hidden IFrame is placed outside the viewport and has the loading="lazy" attribute.

Hidden IFrames that are lazy-loaded might not load correctly and it is not advisable to use loading="lazy" on hidden IFrames.

If you observe the network tab, you should notice that the IFrame with the loading="lazy" attribute (and its subresources) are requested immediately while the Hidden IFrame is never requested.

Chrome DevTools Network panel showing 6 resources. The iframe within the viewport (row 4) and its subresources begin downloading immediately. The hidden iframe is not downloaded.

In the network panel above, the iframe iframe-1.html and its subresoures iframe.css and iframe.js are downloaded immediately. The lazy-loaded hidden IFrame iframe-2.html does not get downloaded—even after scrolling down—as it has the display:none CSS property.

View Source Code 
<iframe
  title="Hidden IFrame"
  src="../iframe-2.html?v=2"
  height="0"
  width="0"
  loading="lazy"
></iframe>