Webパフォーマンス入門: 動画の最適化

動画をパフォーマンスの障害にしないために

2017年8月29日
著者: Kameerath Kareem
翻訳: 小川 純平

この記事は米 Catchpoint Systems 社のブログ記事 Web Performance 101: Video Optimization の翻訳です。
Spelldata は、Catchpoint の日本代理店です。
この記事は、Catchpoint の許可を得て、翻訳しています。

Webページのコンテンツには、リッチテキストのHTML、画像、動画、その他のメディアが混在しています。
マルチメディアコンテンツは全体のページサイズを大きく増加させ、Webページのパフォーマンスに対して直に影響します。

これは動画を埋め込むことがベストプラクティスに反するということではありません。
どのような種類のページコンテンツであっても、あらゆるパフォーマンス上の問題を克服するように調整できるのです。
Webページの最適化は、十分なデジタル体験を保証するための、大切なステップであり、動画を見過ごしてしまっては、このステップは不十分なものとなってしまいます。

動画フォーマットの現状

動画コンテンツはユーザ体験とコンバージョン率を引き上げます。
Webページのデザインにおいて、高解像度の動画は一般的なものとなり、これはWebページを重くします。
現在は様々な動画フォーマットがあり、それぞれのフォーマットは、それぞれの仕様と制限があります。

一般的にWebページで使われる動画ファイルの形式としては、WMV、FLV、MOV、WebM、MP4などがあります。
MP4とWebM(※訳注)は最も人気のあるフォーマットで、動画の品質が他のファイル形式よりも良いため、YouTubeやVimeoなど、様々な動画共有プラットフォームで利用されています。
他にも、サイズが比較的小さく、ほとんどのブラウザでサポートされているなどの利点があります。

※訳注 … WebMは、Googleが開発したオープンでロイヤリティフリーな動画コンテンツフォーマット
WebM - Wikipedia

Webサイトにおけるリッチなマルチメディアコンテンツに関して妥協することなく、最高のデジタル体験を提供することを目指すのであれば、考慮すべき主要な観点として、以下の2つが挙げられます。

• 動画コンテンツを最適化し、高品質な動画を、ページの速度に対しての影響を最小に抑えて提供できるようにする
• ページデザインを最適化し、マルチメディアコンテンツを埋め込み表示することで、ユーザ体験を向上させられるようにする

動画コンテンツを最適化する

動画は必ずしもWebページパフォーマンスの向上の障害になるわけではなく、ページのパフォーマンスが完璧になるように、ページ中のメディアコンテンツを調整する方法はいくつかあります。
以下に、動画ファイルを最適化する方法をいくつか示します。

ファイルサイズ

動画の最適化において最も基本的なステップは、より楽にダウンロードと再生ができるように、ファイルサイズを小さくすることです。
動画のファイルサイズはビットレートと、付随するメタデータに依存します。

データ圧縮は、動画の品質を失うことなくファイルサイズを減らす、1つのテクニックです。
ffMpeg、HandBrake、MpegStreamclipなどの圧縮ツールがあります。
これらのツールは、ピクセルデータの保存方式を再構成し、出力される動画を最適化し軽量化します。

ファイルフォーマット — HTML5の動画形式に変換する

ファイルフォーマットの変換によって、動画ファイルサイズを減らすことに役立つ場合があります。
異なる動画ファイル形式は、異なるデータ保存方式を採用しており、それ故にMP4動画よりもWebM動画の方が軽いのです。

動画ファイルによって増加するページのバイト数に加え、ブラウザ対応についても考慮しなければなりません。
ブラウザは、存在するフォーマットのうちのいくつかしかサポートしていないでしょうから、外部プラグインを必要とするような動画をページに組み込むことは避けなければなりません。

最近のブラウザは、MP4、WebM、Ogg VideoのようなHTML5 Videoのフォーマットをサポートしています。
ですから、これらのうちのどれかのフォーマットに動画を変換し、最適化とWebページへの組み込みが簡単になるようにすることをお勧めします。

CDNを使う

CDNは、動画のストリーミング配信で、ユーザが瞬時に再生できるようにするために使われます。
ユーザは動画のダウンロードとバッファを待つ必要はありません。OVP(Online Video Platform)プロバイダは、動画の最適化を行い、ユーザにシームレスな動画ストリーミングを行うサービスを提供します。

CDNは異なるキャッシュのテクニックを採用し、呼びだされたメディアが素早く配信されるようにしており、また、多くのCDNでは、人気のある動画コンテンツはキャッシュされるようにしています。
CDNによって提供されるインフラと、様々な地域の網羅によって、ユーザは様々なデバイスから、どこからでも、動画の品質やWebページのパフォーマンスを損なうことなく、動画にアクセスすることができるのです。

ストリーミング

昔ながらの方法では、メディアファイルはユーザのシステムにダウンロード・コピーしてから再生されるもので、この方法ではたいていレイテンシが発生し、品質も落ちていました。
メディアコンテンツを、サーバから、ブラウザ上のメディアプレイヤーに、直接「流す」(stream)ことができるように、ストリーミングが導入されました。

いくつかの新技術は、ストリーミングのためにAdaptive Bitrate Streaming over HTTPを活用しています。
これらの中には、MPEG-DASH、HTTP Live Streaming(HLS)、HTTP Dynamic Streaming(HDS)などを含みます。
これらのプロトコルは全て、通常のHTTPサーバから動画を配信するために設計されており、メディア配信専用サーバを冗長化するためのものです。

動画のストリームは、異なるビットレートの小さなチャンクに分解され、それらはすぐに再生することが可能です。
動画ファイルを閲覧しようとするデバイスは、利用可能な帯域上にあるデータストリームを必要に応じて取り出します。

動画に合わせてページデザインを最適化する

フォーマットと動画コンテンツのデータ配信に加えて、Webページデザインを、ユーザ体験を阻害しないように最適化することも重要です。
Webサイトのデザインの際に考慮すべきポイントを以下に示します。

モバイル端末に最適化する

ページ上の動画コンテンツは、端末によって画面解像度やサイズが異なる、モバイル端末に最適化されていなければなりません。
動画はWebサイトのレスポンシブデザインにあわせて、調節されなければなりません。
端末の向きも検出し、動画を適切に表示するべきです。

動画サイズと配置

ページに埋め込まれた動画のサイズは、動画のフォーマットやファイルサイズと同じく重要です。
HTMLやCSSを使って、動画の幅と高さを正確に指定することで、ブラウザは必要なだけの帯域を割り当てることができ、不要なオーバーヘッドを回避することができます。

動画の読込を遅らせる

自動再生されるように設定された動画は、ページに対して、再生に必要なファイルとリソースを追加で要求しますので、これによりページに大きな速度低下が発生します。
最初のページの読込が完了するまで、動画の読込を遅らせることで、帯域を消費せず、その分ページの読込が早くなります。

ページに埋め込むべきか否か

Webデザインは、今までになく、よりクリエイティブな、そして流動的なものになっています。
マルチメディアコンテンツはユーザの関心を引くには必須のものとなり、Webサイトのコンバージョン率を引き上げるものになりました。
ユニークなデジタル体験も提供します。

ですから、そのデメリットに比べて、動画をWebページに埋め込むべき理由は多くあります。
ページデザインを最適化し、正しい動画フォーマットを選択し、メディア配信プロバイダを活用して、動画の処理を効率的に行えば、パフォーマンスコストはかかりません。