WebPerformance

ファーストビュー上のアニメーションGIFはMP4に変換して使うことを検討する

投稿日:2021年10月12日 更新日:

1. はじめに

ファーストビュー(Webページにアクセスした際、スクロールしない状態で表示される範囲)にアニメーションGIFを表示している場合は、MP4 に変換することで LCP 指標 (Core Web Vitals の1つ) を改善できる可能性があります。

LCP (Largest Contentful Paint) は、Webページの読み込み&表示の速さを表す指標です(Google 検索のランキング要因の1つ)。もう少し具体的に言うと、ファーストビュー上の要素の中から一番大きな要素(対象となる要素の種類は決まっています)を選ばれ、その要素が描画されるまでの時間を元に算出されます。

2. どういうことか?

ファーストビュー上のアニメーションGIFが LCP の対象に選ばれた場合、このGIF画像ファイルがダウンロードされて描画されるまでの時間が LCP を決定します。画像ファイルは LCP の対象です。

Chrome DevTools [Performance]パネルで解析した結果

一方、このアニメーションGIFファイルを MP4ファイルに変換し、<video> タグを使って表示する場合、このMP4ファイルは LCP の対象にはなりません。「<video> タグで指定した動画ファイルは今のところ LCP の対象にならない」からです。この場合、代わりに LCP として選ばれた要素にもよりますが、LCP は改善する可能性があります。

※ 但し、<video>タグの poster 属性を使って、動画ダウンロード中に表示する画像ファイルを指定する場合は、その画像ファイルが LCP の対象になる可能性があるため注意が必要です。

Chrome DevTools [Performance]パネルで解析した結果

ちなみに MP4ファイルをアニメーションGIFのように表示したい場合は、<video>タグの autoplay, loop, muted, playsinline 属性を指定します。

<video autoplay loop muted playsinline width="320" height="240">
    <source src="foobar.mp4" type="video/mp4">
</video>
videoタグの属性(抜粋)
属性 説明
autoplay 論理型の属性です。この属性が指定された場合、データの読み込みが完了し、再生可能な状態た時点で即座にコンテンツの再生が始まります。
loop 論理型の属性です。指定された場合、ブラウザーは映像の末尾に達すると、自動的に先頭に戻。
muted 論理型の属性で、映像に含まれる音声の既定の設定を示します。この属性を設定すると、初期消音になります。既定値は false であり、映像再生時に音声も再生することを表します。
playsinline 論理属性で、映像を「インライン」で再生する、すなわち要素の再生領域内で再生するかを指す。この属性がないことが、映像を常に全画面で再生するという意味ではないことに注意してくださtd>

(引用元: <video>: 動画埋め込み要素 – HTML: HyperText Markup Language | MDN

3. おわりに

「ファーストビューにアニメーションGIFが表示される」場合には、かなり有効だと思いますので、一度検討することをお勧めします。

参考

📂-WebPerformance
-

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Web Vitals

Lighthouse が指摘する「Serves images with low resolution」について

Lighthouse が指摘する「Serves images with low resolution」について。

Web Vitals

async script をより早く実行させる

async script をより早く実行させる方法を紹介します。

Web Vitals

PageSpeed Insightsによる「スクロール パフォーマンスを高める受動的なリスナーが使用されていません」について

PageSpeed Insights などで指摘される「スクロール パフォーマンスを高める受動的なリスナーが使用されていません」についてです。

Web Vitals

Webページの高速化とSEOの関係

Webページの高速化とSEOの関係について書きます。