Lazy-loading embedded iframes

Lazy-loading has been a fairly common practice in web development for many years now. At it's core it aims to deliver faster page loads by deferring the loading of elements that are outside the initial viewport area. As the user scrolls down the page these elements (normally images) are loaded "just in time".

Often lazy-loading is applied to images. But did you know that you can also apply it to iframe elements? With support in Chromium browsers now it's as easy as adding the loading=lazy to an iframe tag. And, doing so could give your web pages a nice boost in some Web Vital metrics as well.

Based off Chrome's research into automatically lazy-loading offscreen iframes for Data Saver users, lazy-loading iframes could lead to 2-3% median data savings, 1-2% First Contentful Paint reductions at the median, and 2% First Input Delay (FID) improvements at the 95th percentile.
~ Addy Osmani (link)

I created a quick and dirty test just to see what kind of savings can be gained by lazy-loading a single YouTube embed on a web page. Here's what I found:

Without lazy-loading (site)

• Requests: 18
• Page size (compressed): 1.8MB

With lazy-loading (site)

• Requests: 2
• Initial load size: 2kb

Given, the pages I made to test with were extremely barebones, but the difference a single attribute can make is still stark. Addy Osmani has more detailed examples and guides to using lazy-loading for iframes.