延迟加载图片和 <iframe> 元素

图片和 <iframe> 元素占用的带宽通常比其他类型的 资源。对于 <iframe> 元素,系统会进行相当多的额外处理 加载和渲染其中的页面可能需要一定的时间。

如果延迟加载图片,则延迟加载 有助于减少带宽争用 以便在初始视口内显示更重要的资源这可以改善 (在某些情况下,如果网络连接正常,则使用Largest Contentful Paint (LCP)) 性能不佳,重新分配的带宽可以帮助 LCP 候选项加载和 从而加快渲染速度

涉及 <iframe> 元素的情况是页面的 Interaction to Next Paint (INP) 可以在启动期间通过延迟加载来改进。这是因为 <iframe> 是一个完全独立的 HTML 文档,拥有自己的子资源。 虽然 <iframe> 元素可以在单独的进程中运行,但也很常见 使它们能够与其他线程共享进程,从而创建条件 网页对用户输入的响应速度会变差

因此,延迟加载屏幕外图片和 <iframe> 元素 而且只需相当低的精力就能获得相当不错的 从而大幅提升收入本单元介绍如何延迟加载这些 两种类型的元素,以便在网页加载过程中 关键启动期。

使用 loading 属性延迟加载图片

可以将 loading 属性添加到 <img> 元素中,以告知浏览器 它们应该被加载:

  • "eager" 告知浏览器应立即加载图片。 即使它在初始视口之外。这也是 loading 属性。
  • "lazy" 会延迟加载图片,直到其与 可见视口此距离因浏览器而异,但通常设置为 尺寸足够大,使图片能够在用户滚动到该图片时完成加载。
。 <ph type="x-smartling-placeholder">

另外值得注意的是,如果您使用 <picture> 元素, loading 属性仍应应用于其子 <img> 元素,而不是 <picture> 元素本身。这是因为,<picture> 元素 该容器包含指向其他 <source> 元素的 候选映像,浏览器选择的候选映像会直接应用 添加到其子 <img> 元素中。

不要延迟加载初始视口中的图片

您只能为符合以下条件的 <img> 元素添加 loading="lazy" 属性: 定位在初始视口外然而,要知道 元素在视口内相对的精确位置, 。不同的视口尺寸、宽高比和设备 。

例如,桌面设备上的视口可能不同于 因为这可以呈现更大的垂直空间,因而可能适合图片大小 在初始视口中 与实际设备相比较在纵向模式下使用的平板电脑也会显示 相当大的垂直空间,甚至可能比一些桌面设备 设备。

不过,在某些情况下,您很明显应该避免 正在应用loading="lazy"。例如,如果 <img> 元素中的 loading="lazy" 属性(对于主打图片), 或其他图片用例中,<img> 元素可能会出现在 折叠时,或在任何设备上靠近布局顶部。这一点比这更重要 针对有可能成为 LCP 候选映像的映像

延迟加载的图片需要等待浏览器完成布局 以便知道图片的最终位置是否在视口内。这意味着 如果可见视口中的 <img> 元素具有 loading="lazy" 属性,因此仅在下载、解析并完所有 CSS 之后,才会请求 而不是在 预加载扫描器

由于所有主要语言都支持 <img> 元素的 loading 属性 浏览器无需使用 JavaScript 延迟加载图片, 将额外的 JavaScript 添加到网页中,以提供浏览器已经提供的功能 会影响网页性能的其他方面,例如 INP。

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

图片延迟加载演示

延迟加载 <iframe> 元素

如果延迟加载 <iframe> 元素直到它们在视口中可见,则可以节省 并改进所需关键资源的加载 顶级网页才会加载此外,由于 <iframe> 元素 基本上就是在顶级文档中加载了整个 HTML 文档,它们可以 包含大量子资源(尤其是 JavaScript), 如果这些框架中的任务需要 需要大量处理时间。

第三方嵌入是 <iframe> 元素的常见用例。例如: 嵌入式视频播放器或社交媒体帖子通常使用 <iframe> 元素, 并且通常需要大量子资源 会导致顶级网页资源的带宽争用。作为 例如,延迟加载 YouTube 视频的嵌入代码, 初始网页加载,同时延迟加载 Facebook “赞”按钮插件 可节省超过 200 KiB,其中大部分是 JavaScript。

无论采用哪种方式,只要网页上的非首屏有 <iframe>,您就应该 如果预先加载不是很关键,强烈建议您考虑延迟加载,因为 这样可以显著改善用户体验。

<iframe> 元素的 loading 属性

所有主要语言也支持 <iframe> 元素的 loading 属性loading 属性的值及其行为如下: 与使用 loading 属性的 <img> 元素相同:

  • "eager" 是默认值。通知浏览器加载 <iframe> 元素的 HTML 及其子资源。
  • "lazy" 会延迟加载 <iframe> 元素的 HTML 及其子资源 直到它在与视口的预定义距离内为止
。 <ph type="x-smartling-placeholder">

延迟加载 iframe 演示

外墙

您不必在网页加载期间立即加载嵌入内容,而是可以在 响应用户交互的需求这可以通过显示 或其他相应的 HTML 元素,直到用户与之互动。部署 如果用户与该元素进行了互动,则可将其替换为第三方嵌入。 此技术称为立面

立面的一个常见用例是来自第三方服务的视频嵌入, 嵌入可能会涉及加载大量额外的 子资源(例如 JavaScript)。在此类 情况(除非正当需要自动播放视频),否则视频嵌入 用户在播放视频之前点击播放按钮 按钮。

这是展示视觉上与 并在此过程中节省大量带宽。用户 点击图片,然后将其替换为实际的 <iframe> 嵌入, 触发第三方 <iframe> 元素的 HTML 及其子资源以开始 下载。

除了改善初始网页加载之外,另一个关键的好处是,如果 用户从不播放该视频,投放该视频所需的资源也永远不会播放 已下载。这是一种很好的模式,因为它可以确保用户只下载 但他们并不会对实际情况做出错误的假设, 用户的需求

聊天微件是立面技术的另一个优秀用例。大多数人 聊天微件会下载大量的 JavaScript, 影响网页加载和对用户输入的响应。就像加载任何内容一样 成本是在加载时发生的,但对于聊天微件来说,并不是 每个用户从来都不会打算与之互动

另一方面,使用 Facade,可以将第三方“Start” 聊天”带有一个虚假按钮。当用户以有意义的方式 例如,将鼠标指针悬停在它上面并保留合理的时间,或者 只需点击一下,实际实用的聊天微件就会 用户需要它。

虽然构建自己的 Facade 可以,但还有一些开源软件 适用于较常用的第三方的选项,例如 lite-youtube-embed 适用于 YouTube 视频、lite-vimeo-embed 适用于 Vimeo 视频,以及 React 实时聊天 聊天微件的加载器

JavaScript 延迟加载库

如果您需要延迟加载 <video> 元素、<video> 元素 poster 图片, 由 CSS background-image 属性加载的图片,或其他不受支持的 那么您可以使用基于 JavaScript 的延迟加载解决方案来实现此目的,例如 lazysizesyall.js,因为延迟加载这些类型的资源不是 浏览器级别的功能

特别是在没有音轨的情况下自动播放和循环播放 <video> 元素 是比使用动画 GIF 更高效的替代方案, 通常比具有同等图像的视频资源大几倍 质量。即便如此,这些视频在带宽、 因此,延迟加载它们是一项额外的优化措施 减少带宽浪费

其中大多数库都使用 Intersection Observer API 来运行,并且 Mutation Observer API 还可 初始加载 — 识别元素何时进入用户的视口。如果 那么 JavaScript 库 会替换非标准属性(通常为 data-src 或类似属性), 包含正确的属性,例如 src

假设您有一个可替换动画 GIF 的视频,但您想要延迟加载该视频 使用 JavaScript 解决方案。可以通过 yall.js 实现这一点,方法如下: 标记格式:

<!-- The autoplay, loop, muted, and playsinline attributes are to
     ensure the video can autoplay without user intervention. -->
<video class="lazy" autoplay loop muted playsinline width="320" height="480">
  <source data-src="video.webm" type="video/webm">
  <source data-src="video.mp4" type="video/mp4">
</video>

默认情况下,yall.js 会观察所有符合条件的 HTML 元素,其类为 "lazy"。在网页上加载并执行 yall.js 后,视频便不会 直到用户将其滚动到视口中。届时,data-src <video> 元素的子 <source> 元素的属性被交换出 src 属性,该属性会发送下载视频的请求 则会自动开始播放

知识测验

以下哪一项是 loading 属性的默认值: 既包含 <img> 元素,又包含 <iframe> 元素?

"lazy"
"eager"

何时适合使用基于 JavaScript 的延迟加载解决方案?

适用于任何可延迟加载的资源。
对于没有 loading 属性的资源 例如在自动播放视频时 也可以延迟加载 <video> 元素的 海报图片。

哪种方法适合使用立面?

对于任何不需要加载的资源的第三方嵌入 但并非所有用户 可以与之互动
对于消耗大量数据的任何第三方嵌入, 用户的需求

后续内容:预提取和预渲染

现在,您已经了解了延迟加载图片和 <iframe> 元素, 可以确保网页在加载网页时 尊重用户的需求不过,在某些情况下 推测性加载资源是更理想的选择。在下一个单元中, 了解预提取和预渲染,以及这些技术 — 它可以在加载时 提前测试。