Lazy Loading Inline Frames

There’s a new loading attribute that allows native lazy loading in Chrome. The loading attribute is not a standard yet, but it’s being worked on and I’m really looking forward to it, I think this is a really good feature.

Besides images I noticed that it’s also possible to lazy load iframes. iframes aren’t used that much these days, but when they are, it can be helpful being able to load them only by the time the user scrolls near them, instead of loading all their associated data right away. I’m thinking Google Maps, which send quite a bit of data with their iframe maps, but I haven’t looked at or tried it yet at all.

The way to lazy-load an iframe is straight forward and just the same as you would do with images:

<iframe src="source.html" loading="lazy"></iframe>

Note: The loading attribute is only available in Chrome 76 and later, and as of this writing, no other browsers support it yet.