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

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

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

ini 复制代码

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

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

为何要延迟加载 iframe？

第三方嵌入适用于各种用例，从视频播放器到社交媒体帖子再到广告，不一而足。此类内容通常不会在用户的视口中立即显示，但即使用户不滚动网页，他们仍需为每一帧下载数据和昂贵的 JavaScript 的费用。

急切加载屏幕外 iframe 意味着用户会下载可能永远看不到的元素，浪费数据。

根据 Chrome 对为流量节省程序用户自动延迟加载屏幕外 iframe 的研究，使用延迟加载 iframe 可使流量节省中位数减少 2-3%，将 First Contentful Paint 降低 1-2%（以中位数为准），并将 First Input Delay (FID) 降低 2%（第 95 百分位）。

延迟加载屏幕外 iframe 还可以改进网页的 Largest Contentful Paint (LCP)。由于 iframe 通常需要大量带宽来加载其所有子资源，因此延迟加载屏幕外 iframe 可以减少网络受限设备上的带宽争用，留下更多带宽来加载有助于页面 LCP 的资源。

iframe 的内置延迟加载功能是如何运作的？

loading 属性可让浏览器延迟加载屏幕外 iframe 和图片，直到用户滚动到它们附近时再加载。loading 支持两个值：

lazy：适合延迟加载。
eager：不适合使用延迟加载。立即加载。

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

xml 复制代码

<!-- 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'：

ini 复制代码

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

延迟加载热门 iframe 嵌入内容对用户体验有何影响？

将延迟加载 iframe 设为默认设置可以提高网站响应速度。以下示例展示了媒体嵌入的可交互时间 (TTI) 改进和数据节省，但延迟加载广告 iframe 也有类似的优势。

YouTube

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

ini 复制代码

<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 精简版组件感兴趣。

Instagram

Instagram 嵌入代码提供了一个标记块和一个用于将 iframe 注入您的网页的脚本。延迟加载此 iframe 可避免必须加载嵌入需要的所有脚本，并且可以在初始加载时节省约 100 kB。在大多数文章中，这些嵌入通常显示在视口下方，因此适合使用 iframe 延迟加载。

Spotify

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

ini 复制代码

<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 将"Like"插件嵌入网页，系统会提取大约 215 KB 的资源，其中 197 KB 是 JavaScript。该插件通常显示在文章末尾或网页结尾附近，因此在屏幕外快速加载可能会不太理想。

Facebook 的"Like"插件。

得益于工程师 Stoyan Stefanov，Facebook 的所有社交插件现在都支持标准化的 iframe 延迟加载。如果开发者通过插件的 data-lazy 配置选择延迟加载，现在可以阻止加载这些插件，直到用户滚动到附近为止。这样一来，嵌入内容便可以继续为需要它的用户运行，同时为不会向下滚动页面的用户节省数据。我们希望这能成为首个探索生产环境中的标准化 iframe 延迟加载的大量嵌入内容之一。

跨浏览器 iframe 延迟加载

您可以将 iframe 延迟加载作为渐进式增强功能。在 iframe 上支持 loading=lazy 的浏览器会延迟加载 iframe，而不支持 loading 属性的浏览器会放心地忽略它。

您还可以使用 lazysizes JavaScript 库延迟加载屏幕外 iframe。如果您符合以下情况，则可能需要执行此操作：

要求比标准化延迟加载方案更多的自定义延迟加载阈值
希望在各个浏览器中为用户提供一致的 iframe 延迟加载体验。

ini 复制代码

<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>

请使用以下模式检测延迟加载，并在延迟加载不可用时提取延迟大小：

ini 复制代码

<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 延迟加载是否存在例外情况？

在 Chrome 中针对流量节省程序用户自动延迟加载 iframe 进行的早期实验有一个例外情况，那就是隐藏 iframe 通常用于通信或分析。这些元素不会被延迟加载，并且始终会加载以防止破坏这些功能。

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