现在该延迟加载屏幕外 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 还可以提高网页的最大 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 的“Like”插件

感谢工程师 Stoyan Stefanov现在的所有社交插件 支持标准化 iframe 延迟加载。 选择通过插件的data-lazy 配置现在可以阻止加载这些插件，直到用户滚动屏幕 附近。这样，嵌入代码便可继续对有需要的用户运行，而 为那些不会一直向下滚动页面的用户保存数据。我们充满希望 这是第一个探索标准化 iframe 延迟加载的众多嵌入式工具， 生产环境。

想要更好地控制 iframe 延迟加载时

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

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

是否存在屏幕外 iframe 延迟加载的例外情况？

针对流量节省程序自动延迟加载 iframe 的早期实验 Chrome 用户遇到隐藏的 iframe 这一例外情况，通常用于 通信或分析。它们被阻止延迟加载，并且 以免破坏这些功能

loading 属性不会应用这些启发法，因此开发者始终 如何选择要延迟加载的内容loading 属性应始终为 受到距离限制和其他浏览器选择（如打印）的约束。

资源

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

感谢 Dom Farolino、Scott Little、Houssein Djirdeh、Simon Pieters、Kayce Basques、Joe Medley 和 Stoyan Stefanov 为他们提供了评价。