前のモジュールでは、スペースに関連するパフォーマンス手法について学習しました。 これはウェブで広く使用されているリソースタイプで、 帯域幅がかなり大きくなることがあります。 考慮する必要があります
しかし、ウェブ上でよく見られるメディアタイプは画像だけではありません。動画は
ウェブページでよく使用されるもう 1 つの一般的なメディアタイプです。Google Cloud オペレーションスイートの
<video> がどのように使用されるかを理解することが重要です。
機能します。
動画のソースファイル
メディア ファイルを操作するときは、オペレーティング システム上で認識されている
（.mp4、.webm など）はコンテナと呼ばれます。コンテナには 1 つのコンテナが
または複数のストリーム。ほとんどの場合、これは動画と音声のストリームになります。
コーデックを使用して各ストリームを圧縮できます。たとえば、video.webm は次のようになります。
VP9 で圧縮された動画ストリームと音声を含む WebM コンテナ
Vorbis で圧縮されたストリーム。
コンテナとコーデックの違いを理解することは有用です。 はるかに少ない帯域幅を使ってメディア ファイルを圧縮できる これによって全体的なページの読み込み時間が短縮され、 ページの 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 ほど圧縮されません。
<ph type="x-smartling-placeholder">poster 属性
<video> で poster 属性を使用して、動画のポスター画像を追加します。
要素があり、再生する前に動画コンテンツの内容をユーザーに知らせます。
開始:
<video poster="poster.jpg">
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
</video>
自動再生
HTTP Archive によると、ウェブ上の動画の 20% に
autoplay 属性。autoplay は、動画を再生する必要がある場合に使用されます。
たとえば、動画の背景として使用する場合や、
アニメーション GIF。
アニメーション GIF は、非常に大きなサイズになる場合があります。特に、
非常に複雑です。アニメーション GIF で複数の画像が使用されることは珍しくありません。
大量のデータが生成されて、帯域幅を大量に消費する可能性があります。
より重要なリソースにのみアクセスできます一般的には、アニメーション画像や
<video> に相当するものが、このタイプのメディアでははるかに効率的です。
動画の自動再生がウェブサイトの要件である場合は、
autoplay 属性を <video> 要素に直接追加する場合:
<!-- 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 要素である場合は、poster 画像の
<link rel="preload"> ヒントを使用して優先度を指定し、
fetchpriority="high":
<link rel="preload" as="image" href="poster.jpg" fetchpriority="high">
埋め込み
動画コンテンツの最適化と効率的な配信は あらゆる複雑な作業が伴うため 問題を専用動画サービスに任せることが理にかなっています YouTube や Vimeo ですこうしたサービスにより動画の配信が最適化されますが、 サードパーティ サービスから動画を埋め込むことは、 埋め込み動画プレーヤーでは多くの場合、 などのリソースが含まれます。
この事実を考慮すると、サードパーティの動画の埋め込みはページに重大な影響を与える可能性があります 向上しますHTTP Archive によると、YouTube の埋め込みはメインスレッドをブロックする ウェブサイトの中央値は 1.7 秒以上メインスレッドをブロックする 深刻なユーザー エクスペリエンスの問題であり、 ページの Interaction to Next Paint（INP） を参照してください。ただし、 は、最初のページ読み込みですぐに埋め込みを読み込まないことで、代わりに 埋め込み用のプレースホルダを作成し、実際の埋め込み動画に置き換える ユーザーが操作したとき。
<ph type="x-smartling-placeholder">動画デモ
理解度テスト
内部の <source> 要素の順序は
親 <video> 要素は決定しない
最終的にダウンロードされる動画リソースが決まります。
<video> 要素の poster 属性
LCP 候補になります
次のステップ: ウェブフォントを最適化する
特定のリソースタイプの最適化については、次はフォントについて説明します。 ウェブサイトのフォントの最適化は見落とされがちですが、 サイト全体の読み込み速度に大きく影響します LCP と Cumulative Layout Shift（CLS）です。