0Pricing
HTML Academy · Lesson

Lazy Loading iframes

Defer offscreen iframe loading with loading=lazy.

What is Lazy Loading?

Lazy loading defers the loading of resources until they are needed — when an element is near or within the viewport. For iframes, this means the embedded document, its scripts, CSS, and assets do not download until the user scrolls close to the iframe.

The loading Attribute

Add loading="lazy" to an iframe: <iframe src="embed.html" loading="lazy">. The browser determines when to start loading based on its own heuristic (typically 1000-2500px before the iframe enters the viewport). No JavaScript required.

All lessons in this course

  1. The iframe Element src and sandbox
  2. iframe Security Clickjacking and X-Frame-Options
  3. The embed and object Elements
  4. Lazy Loading iframes
← Back to HTML Academy