Lazy Load Offscreen Iframes
As more websites embed YouTube videos into their pages to provide richer content, and it indeed helps users access information more effectively.
However, without proper optimization, it can burden the original page's loading efficiency.
Deferred Loading of iframe Content
By default, browsers automatically load all content when a user opens a page, including any embedded iframes.
However, if we change the page loading rules to:
- By default, do not load any content for iframes located at the bottom of the page (in the non-visible area).
- Start loading the embedded pages only when the user scrolls near them.
We can significantly reduce the original page's loading time and the amount of data that needs to be downloaded.
Browser's Built-in Solution
The browser offers a built-in loading attribute for the iframe tag, which changes the loading logic of the embedded page by setting different values.
<iframe loading="lazy" src="..."></iframe>
It supports two values:
- lazy: Indicates the iframe is a good candidate for lazy loading.
- eager: Instructs the browser to load the iframe immediately.
Subscribe to read the full content
