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 loading asks the browser to delay an offscreen iframe, while referrerpolicy controls how much page-address information may accompany its request. Both matter especially for third-party embeds.
In this example: defer an offscreen embedded video.
Try the Example
Take a look at the example. We’ll explain the important lines right below it.
<iframe src="/embeds/map.html" title="Location map" loading="lazy" referrerpolicy="no-referrer" width="640" height="400"></iframe>
<address>24 Market Street</address>Let’s Read the Code
- referrerpolicy: Referrerpolicy controls how much referrer information accompanies a request.
- <iframe>: An iframe embeds a separate document with its own URL and security context.
- 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: Lazy loading can defer a frame that starts off screen. Referrerpolicy can limit referrer information sent with its request.
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
Scroll to the frame and observe when its request begins in the Network panel.
Common Beginner Mistakes
- Leaving out real media files or understandable text alternatives.
- Privacy needs more than one attribute: the embedded provider may still receive network requests when the frame loads.
Key Takeaways
- Lazy loading asks the browser to delay an offscreen iframe, while referrerpolicy controls how much page-address information may accompany its request.
- referrerpolicy: Referrerpolicy controls how much referrer information accompanies a request.
- If the resource cannot load, users still need enough text to understand what was meant to be there.