Lazy Loading iframes

The loading="lazy" attribute defers iframe loading until the user scrolls near it. This is especially effective for YouTube or map iframes below the fold.

A single lazy YouTube iframe can save hundreds of kilobytes on initial page load.

Example

<!-- Without lazy loading: loads immediately -->
<iframe src="https://www.youtube.com/embed/VIDEO_ID"></iframe>

<!-- With lazy loading: defers until near viewport -->
<iframe
  src="https://www.youtube.com/embed/VIDEO_ID"
  loading="lazy"
  title="Demo video"
></iframe>

HTML

Full Editor

Pro Tip

Lazy loading iframes is supported in all modern browsers — add it to every below-the-fold iframe.

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned