现在该延迟加载屏幕外 iframe 了！

Addy Osmani

Barry Pollard

浏览器支持

• 77
• 79
• 121
• 16.4

<iframe> 元素的延迟加载会推迟屏幕外 iframe 的加载，直到用户滚动到它们附近。这有助于节省数据、加快网页其他部分的加载速度，并减少内存用量。

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

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

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

为什么要延迟加载 iframe？

第三方嵌入涵盖各种用例，从视频播放器到社交媒体帖子再到广告。此类内容通常不会立即显示在用户的视口中，但用户仍需为每个帧下载数据和昂贵的 JavaScript，即使他们没有滚动到该帧也是如此。

提前加载屏幕外 iframe 意味着用户会下载他们可能永远也不会看到的元素，从而浪费流量。

根据 Chrome 对自动延迟加载屏幕外 iframe 以便“节省数据”用户获享更好体验的研究，延迟加载 iframe 可使平均数据流量减少 2-3%，平均首次内容绘制时间缩短 1-2%，95 百分位数的首次输入延迟 (FID) 缩短 2%。

延迟加载屏幕外 iframe 还可以改进网页的 Largest Contentful Paint (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>

Chrome.com 通过延迟加载屏幕外 YouTube 嵌入内容，将 TTI 缩短了 10 秒。

注意：如果您希望以更高效的方式加载 YouTube 嵌入内容，不妨考虑使用 YouTube Lite 组件。

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。此插件通常出现在文章的末尾或接近页面末尾，因此在脱屏时急切地加载该插件可能不太理想。

Facebook 的“赞”插件。

得益于工程师 Stoyan Stefanov，Facebook 的所有社交插件现在都支持标准化 iframe 延迟加载。通过插件 data-lazy 配置选择启用延迟加载的开发者现在可以阻止这些插件加载，直到用户滚动到附近。这样，嵌入内容就可以继续为需要它的用户正常运行，同时为未滚动到底部的用户节省数据。我们希望这是探索正式版中标准化 iframe 延迟加载的众多嵌入代码中的第一种。

当您希望更好地控制 iframe 延迟加载时

浏览器级 iframe 延迟加载在所有主要浏览器中都得到了良好支持，对于大多数用例，建议采用这种方法，以免对 JavaScript 产生额外的依赖。

不过，如果您需要支持旧版浏览器，或者想要更好地控制延迟加载阈值，则可以使用第三方库在您的网站上延迟加载 iframe。lazysizes JavaScript 库就是这样一个库，可在您需要时提供其他选项。

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

在 Chrome 中为启用“数据节省器”的用户自动延迟加载 iframe 的早期实验中，隐藏的 iframe（通常用于通信或分析）有一个例外情况。这些组件被阻止延迟加载，并且始终加载，以防止破坏这些功能。

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

资源

如需了解更多延迟加载技巧，请参阅 web.dev 的图片和视频延迟加载集合。

感谢 Dom Farolino、Scott Little、Houssein Djirdeh、Simon Pieters、Kayce Basques、Joe Medley 和 Stoyan Stefanov 对他们的评价。