图片和 <iframe>
元素占用的带宽通常比其他类型的
资源。对于 <iframe>
元素,系统会进行相当多的额外处理
加载和渲染其中的页面可能需要一定的时间。
如果延迟加载图片,则延迟加载 有助于减少带宽争用 以便在初始视口内显示更重要的资源这可以改善 (在某些情况下,如果网络连接正常,则使用Largest Contentful Paint (LCP)) 性能不佳,重新分配的带宽可以帮助 LCP 候选项加载和 从而加快渲染速度
涉及 <iframe>
元素的情况是页面的 Interaction to Next Paint
(INP) 可以在启动期间通过延迟加载来改进。这是因为
<iframe>
是一个完全独立的 HTML 文档,拥有自己的子资源。
虽然 <iframe>
元素可以在单独的进程中运行,但也很常见
使它们能够与其他线程共享进程,从而创建条件
网页对用户输入的响应速度会变差
因此,延迟加载屏幕外图片和 <iframe>
元素
而且只需相当低的精力就能获得相当不错的
从而大幅提升收入本单元介绍如何延迟加载这些
两种类型的元素,以便在网页加载过程中
关键启动期。
使用 loading
属性延迟加载图片
可以将 loading
属性添加到 <img>
元素中,以告知浏览器
它们应该被加载:
"eager"
告知浏览器应立即加载图片。 即使它在初始视口之外。这也是loading
属性。"lazy"
会延迟加载图片,直到其与 可见视口此距离因浏览器而异,但通常设置为 尺寸足够大,使图片能够在用户滚动到该图片时完成加载。
另外值得注意的是,如果您使用 <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。
图片延迟加载演示
延迟加载 <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 及其子资源 直到它在与视口的预定义距离内为止
延迟加载 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>
元素?
"lazy"
"eager"
何时适合使用基于 JavaScript 的延迟加载解决方案?
loading
属性的资源
例如在自动播放视频时
也可以延迟加载 <video>
元素的
海报图片。
哪种方法适合使用立面?
后续内容:预提取和预渲染
现在,您已经了解了延迟加载图片和 <iframe>
元素,
可以确保网页在加载网页时
尊重用户的需求不过,在某些情况下
推测性加载资源是更理想的选择。在下一个单元中,
了解预提取和预渲染,以及这些技术
— 它可以在加载时
提前测试。