YouTube 動画再生ページの最適化に関する私のストーリー

3 年前、私がまだ YouTube で Web プログラマーとして働いていたとき、先輩エンジニアがビデオを再生するページが大きすぎると不満を言いました。 このページのサイズは、数十のリクエストを含めて 1.2MB に拡大しました。 このエンジニアは公に宣言しました、「Quake が私たちのページを 100KB でクローンできるのであれば、私たちがそのサイズに到達できない理由はないでしょう! なぜなら、私も彼の意見に同意しており、私も新しいタスクを探しているからです。」はこの挑戦を受け入れ、 YouTube のビデオ再生ページのサイズを 100KB 未満に削減することを決定しました 。その夜、サンフランシスコから帰る電車の中で、私は基本的なプロトタイプを書きました。ページ上の機能の数を、タイトル、ビデオ プレーヤー、5 つの関連ビデオ、共有ボタン、フラグ ツール、および 10 個のコメントに制限することにしました。これらはすべて AJAX 経由で読み込まれます。このタスクに「Feather」という名前を付けました。

このように機能が制限されていても、ページ サイズは依然として 250KB に達します。コードを詳しく調べたところ、最適化ツール (クロージャー コンパイル ツールなど) が、実際には使用されていないこのページのコードをクリーンアップできていないことがわかりました (おそらく、これらのツールのせいではありません。どのツールもこれを行うことはできません)。この場合）。コードをさらに削減する唯一の方法は、CSS、JavaScript、画像を手動で最適化することです。 3 日間の懸命な作業の結果、ページはかなりスリムになりましたが、それでも 100 KB を下回ることはありませんでした。ちょうど HTML5 ビデオ プレーヤーを作成し終えたところだったので、それをかさばる Flash プレーヤーの代わりに使用することにしました。 バン！ 98KB、リクエストはわずか 14 件です。 このページの基本的な監視を設定した後、少人数のグループに公開しました。

データ収集から 1 週間後、データが利用可能になりましたが、私は混乱しています。実際、Feather 下のページの全体的な平均レイテンシは増加しました。全体的なページ サイズとページ リクエストの数を減らしましたが、データによると、Feather ビデオ再生ページの読み込みに時間がかかることがわかりました。これは不可能です。データをさらに深く掘り下げて、ブラウザーで試行錯誤した結果、何も得られませんでした。私はこのバージョンについてはほぼ諦めていましたが、この時点で同僚が 地理的要因 という謎を発見しました。

データの地理情報をマークし、すべての情報を地域ごとに比較すると、東南アジア、南米、アフリカ、さらにはシベリアなどの地域でトラフィックが非対称的に増加していることがわかりました。さらに調査を進めると、これらの地域では Feather Edition の平均ページ読み込み時間が 2 分を超えていることが判明しました。 これは、約 1 MB の通常のビデオの読み込みに 20 分かかることを意味します。人々はビデオどころか、このページを待っているだけでとても苦しんでいます。しかし、この辺を見てみると、以前はYouTubeが全く見れなくて、長時間待っても何も見られなかったのです。フェザーバージョンでは、ビデオの最初のフレームを見るまでに 2 分待つ必要がありますが、実際には何があっても見ることができます。 Feather Edition は先週この地域で非常に人気があったため、私たちのデータは完全に Feather Edition によって偏っていました。以前は YouTube を見ることができなかった多くの人が、突然見られるようになりました。

Feather の開発を通じて、私は世界の他の地域のネットワークの状態についての貴重な洞察を学びました。私たちの多くは幸運にも高速ブロードバンドのある場所に住んでいますが、そうでない地域がまだ多くあります。クライアント側のコードを小さく軽量化することで、新しい市場を完全に開拓できます。

[この記事の英語原文リンク: Page Weight Matters]