ページの重さの重要性

3年前、私がYouTubeのウェブ開発者だった頃、シニア・エンジニアの一人が、動画再生ページがあまりにも重すぎると不満を言い出しました。ページの容量は1.2MBにも膨れ上がっており、何十件ものリクエストを行っていました。

そのエンジニアは、「『Quake』のクローンの総容量が100KB未満に収まるのなら、このことで言い訳はできない!」と言い放ったのです。私は彼と同意でしたし、新たに見つかったこの課題に心を動かされたので、YouTubeの再生ページの容量を100KB以下に削減するという目標を掲げることに決めました。その夜、サンブルーノから自宅に帰るシャトルの中で、私はプロトタイプのコードを書きました。私は機能を絞りに絞って、基本的なマストヘッド、ビデオプレーヤー、5つの関連ビデオ、共有ボタン、フラグ機能、そしてAJAX経由でのコメント10件の読み込みを残すことにしました。プロジェクトにはコードネームとして「Feather(フェザー)」と名付けました。

機能をこれだけ限定してもなお、ページの重さは250KBに達していました。コードを詳しく調べると、私たちが使っていた最適化ツール(クロージャ・コンパイラ)では、ページで実際に使われることのないコードが取り除かれないことに気づきました(それを望むのは、いかなるツールにであろうと、現状では無い物ねだりでしょうが)。コードをさらに削減する唯一の方法は、CSS、Javascript、画像スプライトを自ら手作業で最適化することでした。苦節3日後、私はよりスリムなソリューションに到達しました。もっとも、容量は依然として100KB未満には収まりませんでした。ちょうどHTML5動画プレーヤーを書き終えたところだったので、はるかに重いFlashプレーヤーの代わりにプラグインしました。そして、ドーン!容量は98KB、リクエスト数は14件のみ。私は基本的なモニタリング機能を使いつつコードをスレッド化し、トラフィックのごく一部にオプトインを設定しました。

1週間のデータ収集の後、成果が数字となって出てきました。…そしてそれは不可解なものでした。Featherの下では、ページの平均レイテンシが増加していたのです。ページの総重量とリクエスト数を以前の10分の1に減らしたのに、どういうわけかFeatherでは動画の読み込みに以前よりも時間がかかるという数字が出ていたのです。ありえないことでした。統計データを詳しく調べ、ブラウザテストを繰り返しましたが、何一つ辻褄が合いませんでした。自分の世界観が完全に打ち砕かれ、このプロジェクトを諦めようとしたとき、同僚がその答えを見つけました。地域です。

データを地理的にプロットし、地域別の総数と比較したところ、東南アジア、南米、アフリカ、さらにはシベリアの遠隔地からのトラフィックが突出して増加していました。さらに調査を進めると、これらの地域では、Featherでの平均ページ読み込み時間がなんと2分以上(!)だったということが判明しました。つまり、通常の動画ページが1メガバイトを超えていた頃は、読み込みに20分以上(!)もかかっていたということです。このペナルティのような待ち時間の間には、動画ストリームの最初の1フレームすら表示されません。それだけに、これらの地域では、何を見ようにも時間がかかりすぎるので、YouTubeの利用そのものができなかったのです。Featherの下では、動画の最初のフレームが表示されるのに2分以上かかるとはいえ、動画の再生が実質的に可能になりました。この1週間で、Featherをめぐる口コミがこれらの地域で広まり、その結果、私たちの統計データに大きな偏りが生じました。それまでYouTubeを利用できなかった大勢の人々が、突然利用を始めたためです。

Featherを通じて、私は他地域のインターネット事情について貴重な教訓を得ました。私たちの多くは幸運にも広帯域の地域に住んでいますが、今もなお世界の大部分はそうではありません。クライアント側のコードを小さく軽量に保つことで、あなたの製品をまったく新しい市場に開放することができるのです。

無料のimgixアカウントを作成する

Stay up to date with our blog for the latest imgix news, features, and posts.