视频性能

在上一模块中，您学习了一些与图片相关的性能技巧。图片是 Web 上广泛使用的资源类型，如果不注意优化并考虑用户的视口，可能会消耗大量带宽。

但是，图片并非 Web 上常见的唯一媒体类型。视频是另一种常用的媒体类型，经常在网页上使用。在了解一些可能的优化方法之前，首先要了解 <video> 元素的工作原理。

视频源文件

在使用媒体文件时，您在操作系统上识别的文件（.mp4、.webm 等）称为容器。一个容器包含一个或多个流。在大多数情况下，这将是视频流和音频流。

您可以使用编解码器压缩每个流。例如，一个 video.webm 可以是一个 WebM 容器，其中包含一个使用 VP9 压缩的视频流，以及一个使用 Vorbis 压缩的音频流。

了解容器和编解码器之间的区别很有帮助，因为它有助于您使用明显更少的带宽来压缩媒体文件，从而缩短整体页面加载时间，并有可能提高页面的最大内容渲染 (LCP)，这是一个以用户为中心的指标，也是三个Core Web Vitals 之一。

压缩视频文件的一种方法是使用 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 的数据，Web 上 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 秒。长时间阻塞主线程是一个严重的用户体验问题，可能会影响页面的交互到下次绘制 (INP)。但是，您可以采取折衷方案，不在初始页面加载期间立即加载嵌入，而是为嵌入创建一个占位符，当用户与之交互时，该占位符将被实际的视频嵌入替换。

视频演示

测试您的知识

父 <video> 元素内部 <source> 元素的顺序不决定最终下载哪个视频资源。

正确。
再试一次。
错误。
正确！

<video> 元素的 poster 属性被视为 LCP 候选元素。

正确。
正确！
错误。
再试一次。

接下来：优化 Web 字体

接下来，我们将在特定资源类型优化覆盖范围中介绍字体。优化您网站的字体通常被忽视，但会对您网站的整体加载速度以及 LCP 和累积布局偏移 (CLS) 等指标产生重大影响。