A photo, chart, or recording can explain an idea faster than a paragraph, but only if people can actually use it.
What You Need to Know
Lazy iframe loading can postpone loading an offscreen third-party widget. It saves work up front, but the embedded content may appear later as someone scrolls toward it.
Try the Example
Take a look at the example. We’ll explain the important lines right below it.
<h1>Museum visitor guide</h1>
<p>The map is farther down the page.</p>
<section>
<h2>Location</h2>
<iframe src="/embeds/museum-map.html" title="Museum location map"
loading="lazy" width="640" height="420"></iframe>
</section>Let’s Read the Code
- <h1>: A top-level heading explains what the page is about.
- <section>: A section groups content with a shared topic.
- src: Src identifies a resource path for images, frames, or media.
- loading: Loading can ask the browser to defer a resource that is off screen.
What the example shows: The browser can delay loading an offscreen iframe, reducing early resource requests.
What Happens in the Browser?
The paths shown here refer to files in your own example project. Put real images and recordings in those locations before expecting them to load.
Remember the boundary. Embedded content may be a separate document, sometimes provided by another company. Give it a readable title or alternative, and check what permissions and information its request may expose.
Your Turn
Open the Network panel, scroll down, and check when the iframe request begins.
Common Beginner Mistakes
- Leaving out real media files or understandable text alternatives.
- Do not lazily load a frame that is essential immediately at the top of the page if doing so delays it unnecessarily.
Key Takeaways
- Lazy iframe loading can postpone loading an offscreen third-party widget.
- <h1>: A top-level heading explains what the page is about.
- If the resource cannot load, users still need enough text to understand what was meant to be there.