浏览器支持
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
<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">![通过为 iframe 使用 iframe 延迟加载功能节省的流量。在本示例中,即时加载会提取 3MB 内容,而延迟加载会在用户滚动到更靠近 iframe 的位置后提取此代码。](https://web.developers.google.cn/static/articles/iframe-lazy-loading/image/data-savings-using-ifram-721849ff3b329.png?authuser=7&hl=ro)
基于 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 通过延迟加载用于嵌入 YouTube 视频的屏幕外 iframe,将可交互时间缩短了 10 秒](https://web.developers.google.cn/static/articles/iframe-lazy-loading/image/chromecom-achieved-10-s-80c4aa3655294.png?authuser=7&hl=ro)
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">![Facebook 的“Like”插件](https://web.developers.google.cn/static/articles/iframe-lazy-loading/image/facebook-button-e0eb339d5d796.png?authuser=7&hl=ro)
感谢工程师 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 为他们提供了评价。