この Codelab では、アニメーション GIF を動画に置き換えてパフォーマンスを改善します。
最初に測定
まず、ウェブサイトのパフォーマンスを測定します。
- サイトをプレビューするには、[アプリを表示] を押してから、全画面表示 を押します。
- Ctrl+Shift+J キー(Mac の場合は Command+Option+J キー)を押して DevTools を開きます。
- [Lighthouse] タブをクリックします。
- [カテゴリ] リストで [パフォーマンス] チェックボックスがオンになっていることを確認します。
- [Generate report] ボタンをクリックします。
完了すると、Lighthouse の「アニメーション コンテンツに動画形式を使用する」の監査で、GIF が問題として報告されました。
FFmpeg を入手する
GIF を動画に変換する方法はいくつかあります。このガイドでは FFmpeg を使用します。これはすでに Glitch VM にインストールされています。必要に応じて、こちらの手順でローカルマシンにインストールすることもできます。
コンソールを開く
FFmpeg がインストールされ、動作していることを再度確認します。
- [Remix to Edit] をクリックしてプロジェクトを編集可能にします。
- [ターミナル] をクリックします(注: [ターミナル] ボタンが表示されない場合は、全画面表示オプションを使用する必要があります)。
- コンソールで、次のコマンドを実行します。
which ffmpeg
ファイルパスが返されます。
/usr/bin/ffmpeg
GIF を動画に変更
- コンソールで
cd 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
これは、-i
フラグで示される cat-herd.gif の入力を FFmpeg に受け取り、cat-herd.mp4 という動画に変換するように指示します。実行には 1 秒ほどかかります。コマンドが終了すると、再度 ls
を入力すると、次の 2 つのファイルが表示されます。
$ 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 は 3.7M、MP4 バージョンは 551K、WebM バージョンはわずか 341K です。これはかなりの節約です。
HTML を更新して GIF 効果を再現
アニメーション GIF には、動画を複製する必要のある 3 つの重要な特徴があります。
- 自動的に再生されます。
- 通常は継続的にループします(ただし、ループを防ぐことができます)。
- 何もない。
幸いなことに、<video>
要素を使用すると、これらの動作を再現できます。
index.html
ファイルで、<img>
の行を次の内容に置き換えます。
<img src="/images/cat-herd.gif" alt="Cowboys herding cats.">
<video autoplay loop muted playsinline></video>
これらの属性を使用した <video>
要素は、アニメーション GIF に期待されるすべての動作として、自動再生、無限ループ、音声なし再生、インライン再生(全画面ではない)を行います。🎉
ソースを指定する
あとは、動画ソースを指定するだけです。<video>
要素には、サポートしている形式に応じて、ブラウザで選択できるさまざまな動画ファイルを指す 1 つ以上の <source>
子要素が必要です。<video>
を、飼い主の動画にリンクする <source>
要素で更新します。
<video autoplay loop muted playsinline>
<source src="/images/cat-herd.webm" type="video/webm">
<source src="/images/cat-herd.mp4" type="video/mp4">
</video>
プレビュー
- サイトをプレビューするには、[アプリを表示] を押してから、全画面表示 を押します。
見た目は変わりません。ここまでは順調です。
Lighthouse で確認する
公開中のサイトを開いた状態で、次の操作を行います。
- Ctrl+Shift+J キー(Mac の場合は Command+Option+J キー)を押して DevTools を開きます。
- [Lighthouse] タブをクリックします。
- [カテゴリ] リストで [パフォーマンス] チェックボックスがオンになっていることを確認します。
- [Generate report] ボタンをクリックします。
「アニメーション コンテンツに動画フォーマットを使用する」の監査に合格しているはずです。おめでとうございます!💪