Skip to content
iframecheck

loading="lazy"

The value loading="lazy" tells the browser to wait before it loads an iframe or image. The browser loads it only when it comes near the visible part of the page.

HTML attribute

Also called Lazy iframes, Lazy loading

Updated

On this page

How it works

The loading attribute has two values. eager loads the frame at once. It is the default, and the browser also uses it for a missing or wrong value. lazy waits until the frame is a set distance from the viewport. The browser picks that distance.

A lazy frame does not use the network until the browser expects the visitor to see it. This can make the first load of the page faster. The browser waits only when JavaScript is on. With JavaScript off, it loads the frame at once.

Common mistakes

  • The frame never loads. The frame sits in a closed tab, a hidden modal, or a scroll box that never shows it. The browser never sees it near the viewport.
  • Code waits for the page load event. The load event of the page can fire before lazy frames load. Do not expect a lazy frame to be ready at that time.
  • The frame is at the top of the page. A frame that shows at once gains nothing from lazy. Keep eager there.

Example

HTML
<iframe
  src="https://widget.example/map"
  title="Store map"
  width="600"
  height="400"
  loading="lazy"
></iframe>

The frame starts to load when the visitor scrolls near it.

How to use it

Add loading="lazy" to frames far down the page. Keep loading="eager", the default, for frames that show at once.

<iframe
  src="https://widget.example/map"
  title="Store map"
  loading="lazy"
></iframe>

A lazy frame in a closed tab or a hidden modal may never load. Set loading="eager" or add the frame when it shows.

Learn more

Sources

Know before you embed.

Free, no sign-up, nothing stored. Paste a URL and get a verdict, a live preview, and the fix.

Test a URLBrowse guides