延迟加载图片和 <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 的延迟加载解决方案来实现此目的，例如 lazysizes 或 yall.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> 元素？

"eager"
正确！
"lazy"
请重试。

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

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

哪种方法适合使用立面？

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

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

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