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

Addy Osmani

Barry Pollard

浏览器支持

• <ph type="x-smartling-placeholder"></ph> 77 个
• <ph type="x-smartling-placeholder"></ph> 79 个
• <ph type="x-smartling-placeholder"></ph> 121
• <ph type="x-smartling-placeholder"></ph> 16.4

<iframe> 元素延迟加载会延迟加载屏幕外 iframe 直到用户滚动到其附近这样可以节省数据，加快 网页的其他部分，并减少内存用量。

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

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

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

为什么要延迟加载 iframe？

第三方嵌入代码涵盖了从视频播放器到 社交媒体帖子、广告。这些内容通常不会立即显示在以下位置： 但用户仍需支付下载数据的费用和高昂的成本 JavaScript（即使这些代码不会滚动到相应帧）。

<ph type="x-smartling-placeholder">

</ph>

提前加载屏幕外 iframe 意味着 下载他们可能永远不会看到的元素来浪费数据。

基于 Chrome 对自动延迟加载屏幕外 iframe 的研究 流量节省程序用户 延迟加载 iframe 的数据流量中位数可减少 2-3%，1-2% First Contentful Paint 降幅在中位数，为 2% 首次输入延迟 (FID) 方面的改进（在第 95 百分位）。

延迟加载屏幕外 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 将 TTI 缩短了 10 秒 延迟加载的屏幕外 YouTube 嵌入内容。

。

注意： 如果您正在寻找更高效的方法加载 YouTube 嵌入内容， 可能对 YouTube 精简版组件感兴趣。

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 内容嵌入到他们的 网页。其中最受欢迎的是 Like 插件， 显示有多少用户已“赞”过页面。默认情况下，嵌入 使用 Facebook JSSDK 在网页上使用“Like”插件可提取大约 215 KB 的 其中 197 KB 是 JavaScript。插件通常出现在 文章后或在网页末尾快速加载，因此能够在用户离开屏幕时 可能不够理想。

<ph type="x-smartling-placeholder">

</ph>

Facebook 的“Like”插件

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

跨浏览器 iframe 延迟加载

浏览器级 iframe 延迟加载在所有主流浏览器上都得到了很好的支持，并且推荐用于大多数用例，这样就无需额外依赖于 JavaScript。

但是，如果您需要支持更多浏览器，或者想要更好地控制延迟加载阈值，则可以使用第三方库在您的网站上延迟加载 iframe。

您还可以使用 lazysizes 延迟加载屏幕外 iframe。 JavaScript 库：

<script src="lazysizes.min.js" async></script>

<iframe frameborder="0"
      class="lazyload"
    allowfullscreen=""
    width="600"
    height="400"
    data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>

使用以下模式来检测延迟加载和提取延迟大小 不可用时：

<iframe frameborder="0"
      class="lazyload"
    loading="lazy"
    allowfullscreen=""
    width="600"
    height="400"
    data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>

<script>
  if ('loading' in HTMLIFrameElement.prototype) {
    const iframes = document.querySelectorAll('iframe[loading="lazy"]');

    iframes.forEach(iframe => {
      iframe.src = iframe.dataset.src;
    });

  } else {
    // Dynamically import the LazySizes library
    const script = document.createElement('script');
    script.src =
      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js';
    document.body.appendChild(script);
  }

</script>

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

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

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

资源

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

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