BT

InfoQ ホームページ ニュース FacebookのBigPipe: ページロード時間の最適化

FacebookのBigPipe: ページロード時間の最適化

ブックマーク

原文(投稿日:2010/07/16)へのリンク

FacebookのリサーチサイエンティストであるChanghao Jiang氏は、Facebookのサイトを「2倍高速化」するのに貢献しているというBigPipeと呼ばれるテクニックについて説明している。BigPipeはいくつかあるイノベーションのうちのひとつで、性能向上を実現するために使われている「秘密兵器」だ。「BigPipeはほとんどのブラウザにおいて、ユーザが体感する遅延を半分に削減する」という。ただしFirefox 3.6は例外で、遅延は約50ms、約22%削減されるにとどまる。

BigPipeとそれに関連するイノベーションに至る動機を次のように語っている。

最近のWebサイトは10年前と比べて、飛躍的にダイナミックでインタラクティブになっています。従来のページ配信モデルでは、現在のインターネットの速度要件についていけません。

 

ハードウェア(パイプラインおよびスカラーマイクロプロセッサ)から着想を得て、FacebookチームはPHPとJavaScriptを使って(既存のWebサーバやブラウザを変更する必要なしに)「既存のWeb配信プロセスの抜本的な再設計」を実現した。この再設計は、ページ配信プロセスを8つの異なるステップに分割すること(各ステップは"pagelet"と呼ばれる)と、そのいくつかは並列に実行可能であることに関係している。最初のページリクエストに対して、

HTML headタグとbodyタグの最初の部分を含む、閉じられていないHTMLドキュメントが返されます。headタグには、後で受信されたpageletレスポンスを解釈するためのBigPipeのJavaScriptライブラリが含まれています。bodyタグには、ページの論理構造とpageletのプレースフォルダを指定するテンプレートが含まれています。

それから、JSONでエンコードされたオブジェクト(pagelet)が作られる。これには「そのpageletに必要なすべてのCSS、JavaScriptリソース、そのHTMLコンテント、そして、いくつかのメタデータ」が含まれている。

複雑なWebページのロード時間遅延の増加というのは新しい問題ではないし、性能向上のために一種のパイプラインを利用するのも新しいわけではない。Aaron Hopkins氏はDie.netにおいてページロード時間の最適化について解説している。ここには従来のページリクエストのライフサイクルの他にも、ページロード遅延に影響を及ぼすおそれのある数々の要因が挙げられている。Aaron氏の記事で興味深いポイントがひとつある。

IE、Firefox、SafariはHTTPパイプライン機能をデフォルトで無効にしています。Operaは私の知る限り、それを有効にしている唯一のブラウザです。パイプラインが無効だということは、各リクエストはレスポンスを受信してそのコネクションを自由にしてからでないと、次のリクエストを送れないということです。これは許容されているコネクション数を分け合っているユーザにとって、平均的なラウンドトリップ(ping)時間分の遅延をもたらします。また、サーバがHTTPキープアライブを無効にしていると、TCPスリーウェイハンドシェイクのために余計なラウンドトリップが発生して遅延が倍増します。

Jiang氏は、BigPipeはブラウザ固有のパイプライン機能を利用しているとは述べておらず、既存のサーバやブラウザを変更する必要はないと言っていることから、それを利用していないことをほのめかしている。ブラウザが変化しても、すなわちHTML 5の実装が広まっても、BigPipeが引き続き使えるのかどうかは、興味深いところだろう。

小松健作氏は次のようなデモを作った(The Zingerによる報告)。

... HTML5 Web SocketとXML HTTPリクエストにおけるデータフローを比較してみました。実行してみると、結果は驚くべきものでした。なんと、565ms対31444ms ! Web Socketは55倍も高速でした。理由のひとつには不要なヘッダトラフィックがほとんどなかったことがあります。

デモには一般的には「危険」だと見なされているHTTPパイプラインが使われている。

でも、これはHTTPパイプラインではありません。ネットワークトラフィックはHTTPリクエスト/レスポンスではなく、WebSocketフレームでできています。これはアプリケーションの開発者によって明確にコントロールされており、HTTP/1.1パイプラインの問題の影響を受けません。WebSocketはいつでも送受信することができ、プログラマによって直接コントロールされ、プロキシの干渉を受けません。したがって、パイプライン機能は安全であり、無効にすべきではありません。

小松氏のデモは、Facebookのイノベーション、HTTPパイプラインの懸念、HTML5、特にWebSocketの将来性との間にある関係性と、最終的にそれらがWebサイトの性能向上とユーザが体感する遅延の最小化にどんな影響を及ぼすかの集大成となっている。

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

BT

あなたのプロファイルは最新ですか?プロフィールを確認してアップデートしてください。

Eメールを変更すると確認のメールが配信されます。

会社名:
役職:
組織規模:
国:
都道府県:
新しいメールアドレスに確認用のメールを送信します。このポップアップ画面は自動的に閉じられます。