What Is Lazy Loading?

Lazy loading defers loading a piece of a page, such as an image or an embedded iframe, until it actually scrolls near the visible viewport. For a YouTube embed, that means the player script and thumbnail preview do not load the instant the page opens, only when a visitor is about to see it.

Why it matters for embeds

A YouTube iframe is relatively heavy to load. A page with several embeds (a blog post reviewing five videos, for example) can feel noticeably slower if all of them load immediately, which is why lazy-loading is a common recommendation for Core Web Vitals and general page speed.

How to enable it

Modern browsers support the native loading=”lazy” attribute directly on an <iframe>, no extra script required. The embed code generator includes this attribute by default.

How native lazy-loading works under the hood

When a browser encounters an element with loading=”lazy”, it does not create a placeholder and wait indefinitely; instead, it calculates a rough distance threshold from the current viewport and only begins the actual network request once the element is approaching that threshold, typically a few hundred to a thousand pixels before it would become visible, depending on the browser and network conditions. This means a lazy-loaded embed still loads in time to be visible when a visitor scrolls to it, without paying the loading cost for embeds far below the fold that a visitor may never scroll to at all.

A practical example

A long-form article reviewing ten products, each with an embedded demo video, benefits enormously from lazy-loading: without it, all ten players would request their scripts and thumbnails simultaneously on page load; with loading="lazy" added to each iframe, only the one or two videos near the top load immediately, with the rest loading progressively as the visitor scrolls down.

Lazy-loading vs. click-to-load

Lazy-loading and click-to-load solve a similar problem with different trade-offs. Lazy-loading still eventually loads every embed automatically once a visitor scrolls near it, which is simple to implement (a single HTML attribute) but does not save any resources for embeds a visitor does scroll past and see. Click-to-load goes further, never loading the real iframe until a visitor explicitly clicks a placeholder, which requires more implementation work but guarantees zero requests for videos never actually played. For most sites, native lazy-loading, already used by default in our embed code generator, offers the best balance of simplicity and performance benefit.

As a rule of thumb, apply lazy-loading to every embed except one that is guaranteed to already be visible the instant a page loads, such as a hero video at the very top.

Browser support for native lazy-loading is now broad enough across modern Chrome, Firefox, Safari and Edge that a JavaScript-based lazy-loading library is rarely necessary anymore specifically for iframes, though older library-based approaches remain in use on many existing sites built before native support arrived.

Frequently asked questions