ラボラジアン 1. はじめに
ファーストビュー（Webページにアクセスした際、スクロールしない状態で表示される範囲）にアニメーションGIFを表示している場合は、MP4 に変換することで LCP 指標 (Core Web Vitals の1つ) を改善できる可能性があります。
※ LCP (Largest Contentful Paint) は、Webページの読み込み＆表示の速さを表す指標です（Google 検索のランキング要因の1つ）。もう少し具体的に言うと、ファーストビュー上の要素の中から一番大きな要素（対象となる要素の種類は決まっています）を選ばれ、その要素が描画されるまでの時間を元に算出されます。
2. どういうことか？
ファーストビュー上のアニメーションGIFが LCP の対象に選ばれた場合、このGIF画像ファイルがダウンロードされて描画されるまでの時間が LCP を決定します。画像ファイルは LCP の対象です。
一方、このアニメーションGIFファイルを MP4ファイルに変換し、<video> タグを使って表示する場合、このMP4ファイルは LCP の対象にはなりません。「<video> タグで指定した動画ファイルは今のところ LCP の対象にならない」からです。この場合、代わりに LCP として選ばれた要素にもよりますが、LCP は改善する可能性があります。
※ 但し、<video>タグの poster 属性を使って、動画ダウンロード中に表示する画像ファイルを指定する場合は、その画像ファイルが LCP の対象になる可能性があるため注意が必要です。
ちなみに MP4ファイルをアニメーションGIFのように表示したい場合は、<video>タグの autoplay, loop, muted, playsinline 属性を指定します。
<video autoplay loop muted playsinline width="320" height="240">
<source src="foobar.mp4" type="video/mp4">
</video>
| 属性 | 説明 |
|---|---|
| autoplay | 論理型の属性です。この属性が指定された場合、データの読み込みが完了し、再生可能な状態た時点で即座にコンテンツの再生が始まります。 |
| loop | 論理型の属性です。指定された場合、ブラウザーは映像の末尾に達すると、自動的に先頭に戻。 |
| muted | 論理型の属性で、映像に含まれる音声の既定の設定を示します。この属性を設定すると、初期消音になります。既定値は false であり、映像再生時に音声も再生することを表します。 |
| playsinline | 論理属性で、映像を「インライン」で再生する、すなわち要素の再生領域内で再生するかを指す。この属性がないことが、映像を常に全画面で再生するという意味ではないことに注意してくださtd> |
（引用元： <video>: 動画埋め込み要素 – HTML: HyperText Markup Language | MDN）
3. おわりに
「ファーストビューにアニメーションGIFが表示される」場合には、かなり有効だと思いますので、一度検討することをお勧めします。
