はじめに
この記事では、videoタグを用いて、大量のmp4ファイルを読み込みつつ、
サイトの読み込み速度を改善させる方法について考察しています。
（約50秒の動画ファイルを、25個設置しています。）
実装編
videoタグのpreload属性を使用し、動画の読み込み設定を行えるようです。
| 値 | 特徴 |
|---|---|
| auto | 初期値（ファイルを事前に取得） |
| metadata | ファイルのサイズや再生時間など、メタデータのみを取得 |
| none | 事前のファイル取得を禁止 |
noneを使用することで、動画ファイルの事前読み込みを禁止できます。
（→動画のファイル容量が大きくても、ページ読み込み時の遅延を防ぐことができます。）
//preload属性を設定する
<video src="hoge" preload="none"></video>
計測方法について
サイトの速度検索について、以下のサイトがメジャーのようです。
・page speed insights
ただ、今回はローカル環境で手軽に計測を行いたかったため、デベロッパーツールで測定を行いました。
デベロッパーツールでの計測方法について
1) デベロッパーツールより、Networkのタブに切り替える。
2) 右下にFinishと表示されている項目をチェックする。
この部分を確認することで、そのページの読み込み時間の計測を行うことができます。
※より正確に計測を行うためには、赤ワクの箇所よりキャッシュの削除を行って下さい。
結果
約50秒の動画を、25個設置した場合のページ速度を計測しています。
1) auto（初期値）の場合
動画ファイルの合計が約60MBくらいあり、読み込みが完了するまでに約7秒ほどかかりました。
2) none（事前のファイル取得を禁止）の場合
事前のファイル読み込みを禁止したことで約200kbまで減り、読み込みも約0.4秒ほどにまで抑えられています。
（autoと比べたときに、約17倍も早く読み込めています。）
終わりに
1つ懸念点があるとすれば、preload="none"を設定してしまうと、サムネイルが真っ暗になってしまうようです。
poster属性を設定することでサムネイルで使用する画像を指定することができるので、そちらを検討しても良いかも知れません。
//poster属性を設定する
<video src="hoge" preload="none" poster="hoge"></video>