Loading=lazy on an iframe asks the browser to defer its navigation until the frame approaches the viewport.
Make this comfortable
HTML lazy iframe: delay an optional embedded view
Why this choice matters
An inspection report offers an optional read-only map beneath the written address and route instructions. The main report remains useful before the map loads, and a normal link offers an alternate way to open it. Give the frame a title and stable dimensions so late loading does not shift nearby content. Lazy loading should be measured on the real page; a frame placed at the top may be needed immediately and gain little from deferral.
<section>
<h2>Depot approach</h2>
<p>Use the north gate for inspection I-47.</p>
<iframe src="/maps/depot-north" title="North gate depot map" loading="lazy" width="640" height="360"></iframe>
<p><a href="/maps/depot-north">Open the depot map as a page</a></p>
</section>What it does not do
The map route must exist and any private coordinates need server authorization. Lazy is a browser loading policy, not a sandbox, privacy boundary, or guarantee that no bytes are requested before scrolling.
Cost and operational limits
Deferral can save a frame document, script, and map assets for readers who never reach this section. The fixed size reduces layout shift but reserves space even when the frame fails.
Common Mistakes
- Do not lazy-load a frame needed for the first screen without measurement.
- Do not omit a useful title.
- Do not depend on the iframe as the only route to the map.
Connected lessons
html
media