在此 Codelab 中,通过将动画 GIF 替换为视频来提升性能。
先衡量
首先,衡量网站的表现:
- 如需预览网站,请按 View App(查看应用)。然后按 Fullscreen(全屏)。
- 按 `Control+Shift+J`(在 Mac 上为 `Command+Option+J`)打开 DevTools。
- 点击 Lighthouse 标签页。
- 确保在类别列表中选中效果复选框。
- 点击生成报告按钮。
完成后,您应该会看到 Lighthouse 在“使用视频格式呈现动画内容”审核中将 GIF 标记为问题。
获取 FFmpeg
您可以通过多种方式将 GIF 转换为视频;本指南使用的是 FFmpeg。该工具已安装在 Glitch VM 中,您也可以根据需要按照这些说明在本地计算机上安装该工具。
打开控制台
仔细检查 FFmpeg 是否已安装并正常运行:
- 点击 Remix to Edit 即可修改项目。
- 点击终端(注意:如果系统未显示“终端”按钮,您可能需要使用“全屏”选项)。
- 在控制台中,运行以下命令:
which ffmpeg
您应该会收到一个文件路径:
/usr/bin/ffmpeg
将 GIF 转换为视频
- 在控制台中,运行
cd images
以进入 images 目录。 - 运行
ls
以查看内容。
您应该会看到与以下类似的内容:
$ ls
cat-herd.gif
- 在控制台中,运行以下命令:
ffmpeg -i cat-herd.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p cat-herd.mp4
这会指示 FFmpeg 接受 cat-herd.gif 的输入(由 -i
标志表示),并将其转换为名为 cat-herd.mp4 的视频。此命令应该需要一秒钟的时间才能运行完毕。命令完成后,您应该可以再次输入 ls
,并看到以下两个文件:
$ ls
cat-herd.gif cat-herd.mp4
创建 WebM 视频
虽然 MP4 自 1999 年就已问世,但 WebM 相对而言是新生代,最初发布于 2010 年。WebM 视频可能比 MP4 视频小得多,因此同时生成这两种视频很有意义。幸运的是,<video>
元素可让您添加多个来源,因此,如果浏览器不支持 WebM,则可以回退到 MP4。
- 在控制台中,运行以下命令:
ffmpeg -i cat-herd.gif -c vp9 -b:v 0 -crf 41 cat-herd.webm
- 如需检查文件大小,请运行以下命令:
ls -lh
您应该有 1 个 GIF 和 2 个视频:
$ ls -lh
total 4.5M
-rw-r--r-- 1 app app 3.7M May 26 00:02 cat-herd.gif
-rw-r--r-- 1 app app 551K May 31 17:45 cat-herd.mp4
-rw-r--r-- 1 app app 341K May 31 17:44 cat-herd.webm
请注意,原始 GIF 为 370 万字节,MP4 版本为 551, 000 字节,而 WebM 版本仅为 341, 000 字节。这笔节省可不小!
更新 HTML 以重新创建 GIF 效果
动画 GIF 具有视频需要复制的三个关键特征:
- 它们会自动播放。
- 它们会连续循环(通常如此,但也可以防止循环)。
- 它们是静音的。
幸运的是,您可以使用 <video>
元素重新创建这些行为。
- 在
index.html
文件中,将包含<img>
的行替换为:
<img src="/images/cat-herd.gif" alt="Cowboys herding cats.">
<video autoplay loop muted playsinline></video>
使用这些属性的 <video>
元素将自动播放、无限循环、不播放音频,并在内嵌(即非全屏)模式下播放,这些都是 GIF 动画应有的行为!🎉
指定来源
接下来只需指定视频来源即可。<video>
元素需要一个或多个 <source>
子元素,指向浏览器可以选择的不同视频文件(具体取决于格式支持)。使用指向猫群视频的 <source>
元素更新 <video>
:
<video autoplay loop muted playsinline>
<source src="/images/cat-herd.webm" type="video/webm">
<source src="/images/cat-herd.mp4" type="video/mp4">
</video>
预览
- 如需预览网站,请按 View App(查看应用)。然后按 Fullscreen(全屏)。
体验应该保持不变。目前为止,一切都好。
使用 Lighthouse 进行验证
打开正式版网站后,执行以下操作:
- 按 `Control+Shift+J`(在 Mac 上为 `Command+Option+J`)打开 DevTools。
- 点击 Lighthouse 标签页。
- 确保在类别列表中选中效果复选框。
- 点击生成报告按钮。
您应该会看到“使用视频格式呈现动画内容”审核现在已通过!棒极了!💪