在上一单元中,您学习了与图片相关的一些性能技术。图片是网络上广泛使用的资源类型,但要谨慎优化并考虑用户的视口,则会占用大量带宽。
但是,图片并不是网络上常见的唯一媒体类型。视频是网页上常用的另一种媒体类型。查看一些可能的优化措施之前,请务必先了解 <video>
元素的工作原理。
视频源文件
处理媒体文件时,您在操作系统中识别的文件(.mp4
、.webm
等)称为容器。一个容器包含一个或多个数据流。在大多数情况下,这是指视频和音频流。
您可以使用编解码器压缩每个流。例如,video.webm
可以是 WebM 容器,其中包含使用 VP9 压缩的视频流和使用 Vorbis 压缩的音频流。
了解容器和编解码器之间的区别很有帮助,因为它可以帮助您使用明显更少的带宽压缩媒体文件,从而缩短总体网页加载时间,并有望改善网页的 Largest Contentful Paint (LCP)。LCP 是一项以用户为中心的指标,也是三个核心网页指标之一。
压缩视频文件的一种方法需要使用 FFmpeg:
ffmpeg -i input.mov output.webm
上述命令虽然与使用 FFmpeg 时的基本一样,但会接受 input.mov
文件,并使用默认 FFmpeg 选项输出 output.webm
文件。上述命令会输出一个较小的视频文件,该文件适用于所有新型浏览器。通过调整视频或 FFmpeg 提供的音频选项,您可以进一步缩减视频的文件大小。例如,如果您要使用 <video>
元素替换 GIF,则应移除相应音轨:
ffmpeg -i input.mov -an output.webm
如果您想进一步调整,FFmpeg 在不使用可变比特率编码的情况下压缩视频时,提供了 -crf
标志。-crf
代表“恒定速率系数”。通过接受给定范围内的整数,可以调整压缩级别。
H.264 和 VP9 等编解码器支持 -crf
标志,但其使用方式取决于您所使用的编解码器。如需了解详情,请参阅以 H.264 格式对视频编码的恒定速率系数,以及使用 VP9 对视频进行编码时的恒定质量。
多种形式
使用视频文件时,如果浏览器不支持所有现代格式,那么指定多种格式可以作为后备选项。
<video>
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
</video>
由于所有现代浏览器都支持 H.264 编解码器,因此 MP4 可用作旧版浏览器的后备方案。WebM 版本可以使用较新的 AV1 编解码器(尚未得到广泛支持),也可以使用较早的 VP9 编解码器(比 AV1 支持更好,但通常不能像 AV1 那样压缩)。
poster
属性
视频的海报图片是使用 <video>
元素上的 poster
属性添加的,该属性会在开始播放前向用户提示视频内容可能是什么:
<video poster="poster.jpg">
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
</video>
自动播放
根据 HTTP Archive,网络上 20% 的视频包含 autoplay
属性。autoplay
在必须立即播放时使用,例如用作视频背景或替换动画 GIF。
GIF 动画可能会非常大,特别是当它有许多包含复杂细节的帧时。动画 GIF 会消耗数兆字节的数据并不罕见,这会大量消耗带宽,以更好地用于更关键的资源。您通常应该避免使用动画图片格式,因为 <video>
等效项对于此类媒体的效率要高得多。
如果您的网站要求自动播放视频,您可以直接在 <video>
元素上使用 autoplay
属性:
<!-- This will automatically play a video, but
it will loop continuously and be muted: -->
<video autoplay muted loop playsinline>
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
</video>
通过结合使用 poster
属性与 Intersection Observer API,您可以将页面配置为仅在视频位于视口内时下载。poster
图片可能是低画质的图片占位符,例如视频的第一帧。视频显示在视口中后,浏览器就会开始下载视频。这可以缩短初始视口内内容的加载时间。但其缺点是,为 autoplay
使用 poster
图片时,您的用户收到的图片只会短暂显示,直到视频加载完毕并开始播放。
用户启动的播放
通常,一旦 HTML 解析器发现 <video>
元素,浏览器就会开始下载视频文件。如果您有 <video>
元素在用户发起播放时播放,那么您可能需要等到用户与其互动之后,才开始下载视频。
您可以使用 <video>
元素的 preload
属性来影响为视频资源下载的内容:
- 设置
preload="none"
可告知浏览器不应预加载任何视频内容。 - 设置
preload="metadata"
仅提取视频元数据,例如视频时长,可能还有一些其他粗略信息。
如果您要加载用户需要开始播放的视频,则最好设置 preload="none"
。
在这种情况下,您可以通过添加 poster
图片来改善用户体验。这可以向用户提供关于视频内容的一些背景信息。此外,如果海报图片是您的 LCP 元素,您可以使用 <link rel="preload">
提示和 fetchpriority="high"
来提高 poster
图片的优先级:
<link rel="preload" as="image" href="poster.jpg" fetchpriority="high">
嵌入
考虑到高效优化和提供视频内容非常复杂,有必要将此问题分流给 YouTube 或 Vimeo 等专用视频服务。这些服务会为您优化视频的传送过程,但嵌入来自第三方服务的视频可能会对性能产生自身的影响,因为嵌入的视频播放器通常会提供大量额外的资源,例如 JavaScript。
鉴于这种现实,第三方视频嵌入可能会显著影响网页性能。根据 HTTP Archive,YouTube 嵌入网站的主线程阻塞超过 1.7 秒。长时间阻塞主线程是一个严重的用户体验问题,可能会影响网页的 Interaction to Next Paint (INP)。不过,您可以在初始页面加载期间不立即加载嵌入内容,而是为嵌入创建一个占位符,并在用户与之互动时将其替换为实际的视频嵌入,从而做出妥协。
视频演示
知识测验
父 <video>
元素内 <source>
元素的顺序不会决定最终下载的视频资源。
<video>
元素的 poster
属性被视为 LCP 候选版本。
下一篇:优化网页字体
接下来介绍如何优化特定资源类型的是字体。优化网站字体是经常被忽视的事情,但这可能会对网站的整体加载速度以及 LCP 和累计布局偏移 (CLS) 等指标产生重大影响。