是时候延迟加载屏幕外 iframe 了！

通过合集保持井井有条 根据您的偏好保存内容并进行分类。

Addy Osmani

Barry Pollard

<iframe> 元素的延迟加载会将屏幕外 iframe 的加载推迟到用户滚动到附近时。这可以节省数据、加快页面其他部分的加载速度并减少内存使用。

与图片延迟加载一样，使用 loading 属性告诉浏览器您要延迟加载 iframe。

<iframe src="https://example.com"
        loading="lazy"
        width="600"
        height="400"></iframe>

此 演示 <iframe loading=lazy> 展示了延迟加载视频嵌入

为什么要延迟加载 iframe？

第三方嵌入涵盖广泛的用例，从视频播放器到社交媒体帖子再到广告。此内容通常在用户的视口中不是立即可见的，但用户仍然需要为每个帧支付下载数据和成本高昂的 JavaScript 的成本，即使他们没有滚动到该帧。

根据 Chrome 对为 Data Saver 用户自动延迟加载屏幕外 iframe的研究，延迟加载 iframe 可以带来 2-3% 的中位数数据节省，1-2% 的首次内容绘制中位数减少，以及 2% 的首次输入延迟 (FID) 第 95 百分位数的改进。

延迟加载屏幕外 iframe 还可以改善页面的最大内容绘制 (LCP)。由于 iframe 通常需要大量带宽来加载所有子资源，因此延迟加载屏幕外 iframe 可以减少网络受限设备上的带宽争用，从而留出更多带宽来加载有助于页面 LCP 的资源。

iframe 的内置延迟加载如何工作？

loading 属性允许浏览器推迟加载屏幕外 iframe 和图片，直到用户滚动到附近。 loading 支持两个值

• lazy：延迟加载的良好候选对象。
• eager：不是延迟加载的良好候选对象。立即加载。

在 iframe 上使用 loading 属性的工作方式如下

<!-- Lazy-load the iframe -->
<iframe src="https://example.com"
        loading="lazy"
        width="600"
        height="400"></iframe>

<!-- Eagerly load the iframe -->
<iframe src="https://example.com"
        width="600"
        height="400"></iframe>

不指定属性与显式急切加载资源具有相同的效果。

如果您需要动态使用 JavaScript 创建 iframe，则在元素上设置 iframe.loading = 'lazy' 也受支持

var iframe = document.createElement('iframe');
iframe.src = 'https://example.com';
iframe.loading = 'lazy';
document.body.appendChild(iframe);

延迟加载流行的 iframe 嵌入对用户体验有何影响？

使延迟加载 iframe 成为默认设置将使网站响应速度更快。以下示例显示了媒体嵌入的时间到可交互 (TTI) 改进和数据节省，但延迟加载广告 iframe 可以带来类似的好处。

YouTube

延迟加载 YouTube 视频嵌入可在初始页面加载时节省约 500KB

<iframe src="https://www.youtube.com/embed/YJGCZCaIZkQ"
        loading="lazy"
        width="560"
        height="315"
        frameborder="0"
        allow="accelerometer; autoplay;
        encrypted-media; gyroscope;
        picture-in-picture"
        allowfullscreen></iframe>

Instagram

Instagram 嵌入提供了一块标记和一个脚本，用于将 iframe 注入到您的页面中。延迟加载此 iframe 可以避免加载嵌入所需的所有脚本，并且可以在初始加载时节省约 100 KB。由于这些嵌入通常显示在大多数文章中视口下方，因此它是 iframe 延迟加载的合理候选对象。

Spotify

延迟加载 Spotify 嵌入可以在初始加载时节省 514 KB。

<iframe src="https://open.spotify.com/embed/album/1DFixLWuPkv3KT3TnV35m3"
        loading="lazy"
        width="300"
        height="380"
        frameborder="0"
        allowtransparency="true"
        allow="encrypted-media"></iframe>

Facebook 的社交插件

Facebook社交插件允许开发者在其网页中嵌入 Facebook 内容。其中最受欢迎的是赞插件，这是一个按钮，显示有多少用户“赞”了该页面。默认情况下，使用 Facebook JSSDK 在网页中嵌入赞插件会拉入大约 215 KB 的资源，其中 197 KB 是 JavaScript。该插件通常出现在文章末尾或页面末尾附近，因此在屏幕外时急切加载它可能不是最佳选择。

感谢工程师 Stoyan Stefanov，所有 Facebook 的社交插件现在都支持标准化的 iframe 延迟加载。开发者现在可以通过插件的 data-lazy 配置选择延迟加载，从而防止这些插件加载，直到用户滚动到附近。这让嵌入程序可以继续为需要它的用户工作，同时为不向下滚动页面的用户节省数据。我们希望这是许多嵌入程序中第一个探索生产环境中标准化 iframe 延迟加载的程序。

当您想要更多地控制 iframe 延迟加载时

浏览器级别的 iframe 延迟加载在所有主流浏览器中都得到了很好的支持，并且建议在大多数用例中使用，以消除对 JavaScript 的额外依赖。

但是，如果您需要支持旧版浏览器或想要更多地控制延迟加载阈值，那么您可以使用第三方库在您的网站上延迟加载 iframe。lazysizes JavaScript 库就是这样一个库，如果您需要，它可以提供额外的选项。

屏幕外 iframe 延迟加载是否有例外情况？

Chrome 中针对 Data Saver 用户的自动延迟加载 iframe 的早期实验对隐藏的 iframe（通常用于通信或分析）有一个例外。这些 iframe 被阻止延迟加载，并且始终加载以防止破坏这些功能。

loading 属性不应用这些启发法，因此开发者始终可以选择要延迟加载的内容。loading 属性应始终受到尊重，但须遵守距离限制和其他浏览器选择（例如打印）。

资源

有关更多延迟加载的想法，请参阅 web.dev 的图片和视频延迟加载合集。

感谢 Dom Farolino、Scott Little、Houssein Djirdeh、Simon Pieters、Kayce Basques、Joe Medley 和 Stoyan Stefanov 的审核。