動画のパフォーマンス

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

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

動画のソースファイル

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

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

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

動画ファイルを圧縮する方法の 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 は Constant Rate Factor の略です。これは、指定された範囲内の整数を受け入れることで圧縮レベルを調整する設定です。

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 要素である場合は、fetchpriority="high" とともに <link rel="preload"> ヒントを使用して 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）などの指標に大きな影響を与える可能性があります。