Lazy load an iframe

If you have any videos embedded on your website, you may be able to improve performance by using lazy loading. Add the attribute loading="lazy" to an iframe:

This lazy loading attribute is added by default to all of our iframes so you don’t need to do anything to take advantage of this feature within our video CMS.

What is lazy loading?

Lazy loading is when resources are only loaded when they need to be.

Normally when an iframe is included on a page, the browser loads it. That uses memory and a small amount of data.

But what if it is below the fold and not visible in the viewport (the part of the page visible in the browser)? Then there is no need for it to be loaded. That is the idea of lazy-loading: content is only loaded when it needs to be loaded. In this case, when the user scrolls down the page and so is getting close to the iframe.

We tried it using the most popular web browser: Google’s Chrome (it also works in Firefox though). We have the browser’s network tab open to see what it is doing behind the scenes. You can see it in your browser by pressing F12 or from its Developer tools.

We requested a page and can see it then loads a few assets, like our logo:

Notice despite a video being embedded on that page, there is no request for it in the network tab. Consequently that data has been saved and the memory usage reduced.

The reason it has not been loaded by the browser yet is we have loading="lazy" as an attribute in its iframe. That tells the web browser that it should only load the iframe (with the video in) if it actually needs to. And the browser is smart enough to know it doesn’t need to until the viewer scrolls down a little.

When we scroll down it’s at that point the browser requests the iframe, which in turn loads its various additional files (like its JavaScript, CSS, fonts, and so on):

If we had not scrolled down the page, the iframe would not have been loaded. The site would have loaded faster and you would have saved a little data from your bandwidth allowance.

The threshold distance between iframe and viewport varies. Browsers even take into account the viewer’s connection speed when determining whether to load content that’s not in the viewport. On a faster connection, content can be loaded closer to the viewport because it will be more likely to have loaded by the time the viewer has scrolled down to see it.

Will lazy loading happen anyway?

Chrome on Android will lazy load iframes automatically if you are using the Lite mode. But for other browsers, particularly on desktop, it’s a good idea to add the loading attribute to make it clear.

What about older browsers?

They will simply ignore the loading attribute. It’s a progressive enhancement.

What values are supported for the loading attribute?

We use loading=lazy here however there are three supported values:

• lazy: This element should be lazy loaded if possible
• eager: This element should be loaded as soon as possible (so, not lazy loaded)
• auto: The browser should determine the best approach to loading it

The default lazy-loading behaviour in Chrome is auto. So the resource will be loaded (except for the Lite mode consideration on Android mentioned above).

Note: There are different rules for hidden iframes: that case does not apply here. Clearly, the video’s iframe is visible and is there to be seen.

Updated: March 22, 2021