設置方法別の動画の読み込みスピード検証

• Web Create
• 2024.01.17

Webディレクターのもっちです。

5Gの登場からスマートフォンでも大容量通信が可能となり、WebサイトやECサイトでも動画を使用するケースが増えてきました。
今まではmp4等の動画ファイルをサーバにアップしてVideoタグで読み込んでいましたが、YouTubeやVimeoといった動画配信のプラットフォームの誕生により、より手軽に動画を使用しやすくなっています。

画像よりも動画の方がインパクトがある為、MVなどここぞというところに設置するとページにアクセスした方などに印象を与えやすいメリットがあります。
その反面、多用しすぎるとサイト自体が重くなってしまう諸刃の剣でもあります。

今回は様々な動画の設置方法があるなか、
・サーバにmp4を設置してVideoタグで読み込みに行く場合
・YouTubeにアップした場合
・Vimeoにアップした場合
の3パターンで動画の読み込みスピードの検証結果をお伝えしようと思います。

検証方法

今回4K 60fpsで8分ほどの動画を用意しました。
それを以下の方法で圧縮やアップロードして検証ページに埋め込み、PageSpeed Insightsで計測しました。

mp4の圧縮

今回元データ3.52GBだったファイルを630MBまで圧縮してサーバにアップしました。
このデータをVideoタグで読むこむように実装しています。

YouTubeへのアップロード

こちらは元データをそのまま4K動画としてYouTubeへアップロードしました。
アップロードした動画のIDを確認し、検証ページに埋め込んでいます。

Vimeoへのアップロード

こちらも元データをそのままVimeoへアップロードしました。
アップロードした埋め込みタグを確認し、検証ページに埋め込んでいます。

検証結果

結論からお伝えすると読み込みにそこまで差は発生しませんでした。
若干の差はもちろんありましたが、誤差の範囲内といったところです。

ただし、YouTubeの圧縮が971KBだったのに対し、Vimeoは317KBとなっており、vimeoの方が上手に圧縮してアップロードできている印象がありました。
※表示しているデバイスや通信環境によりVimeoでも表示に時間がかかる場合も多々ございます

まとめ

さて、いかがでしたでしょうか？
mp4でのアップは契約しているサーバの容量によりデータを圧迫する可能性があるため、読み込みに差がないのであれば、やはり動画配信プラットフォームをうまく活用することが今後必要になると感じました。

画像よりもよりインパクトが与えられる動画。
うまく活用して、流入やコンバージョンのアップに繋げられるようにしていきましょう！