動画のパフォーマンス

前のモジュールでは、画像に関連するパフォーマンス手法をいくつか学びました。画像とは、ウェブ上で広く使用されているリソースタイプで、画像を最適化してユーザーのビューポートを考慮に入れないと、大量の帯域幅を消費する可能性があります。

しかし、ウェブ上で一般的に見られるメディアタイプは画像だけではありません。動画も、ウェブページでよく使用される一般的なメディアタイプです。可能な最適化について確認する前に、まず <video> 要素の仕組みを理解することが重要です。

動画ソースファイル

メディア ファイルを操作する場合、オペレーティング システム（.mp4、.webm など）で認識されるファイルはコンテナと呼ばれます。コンテナには 1 つ以上のストリームが含まれます。ほとんどの場合、これは動画と音声のストリームになります。

コーデックを使用して各ストリームを圧縮できます。たとえば、video.webm は、VP9 を使用して圧縮された動画ストリームと Vorbis を使用して圧縮された音声ストリームを含む WebM コンテナです。

コンテナとコーデックの違いを理解しておくと、メディア ファイルを圧縮する際の帯域幅を大幅に節約できるため、全体的なページの読み込み時間が短縮されるだけでなく、ページの Largest Contentful Paint（LCP）（ユーザー中心の指標であり、Core Web Vitals の 3 つのうちの 1 つ）が改善される可能性があります。

動画ファイルを圧縮する方法の 1 つは、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 アーカイブによると、ウェブ全体の動画の 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 アーカイブによると、YouTube の埋め込みは、中央値のウェブサイトでメインスレッドを 1.7 秒以上ブロックしています。メインスレッドを長時間ブロックすると、ユーザー エクスペリエンスに深刻な問題が生じ、ページの Interaction to Next Paint（INP）に影響を与える可能性があります。ただし、最初のページ読み込み時に埋め込みをすぐに読み込むのではなく、ユーザーが操作したときに実際の動画の埋め込みに置き換えられるプレースホルダを作成することで、妥協する可能性があります。

動画デモ

理解度テスト

親 <video> 要素内の <source> 要素の順序によって、最終的にダウンロードされる動画リソースが決まるわけではありません。

正しい
もう一度お試しください。
誤り
正解です。

<video> 要素の poster 属性は LCP の候補と見なされます。

正しい
正解です。
誤り
もう一度お試しください。

次のトピック: ウェブフォントを最適化する

特定のリソースタイプの最適化に関する次の記事は、フォントです。ウェブサイトのフォントの最適化は見過ごされがちなことですが、ウェブサイトの全体的な読み込み速度や、LCP や Cumulative Layout Shift（CLS）などの指標に大きな影響を与える可能性があります。