パラレルダウンロードについて、更にもうひとつ。今度は、JsやCssなどのテキスト系外部ファイルだけでなく、画像なども含めた全ての外部ファイルに関する話題です。
今、皆さんが管理しているページは、画像やFlashなども含めた「外部ファイル」を幾つくらい必要としているでしょうか？
私が今、チューニングを求められているページは、1ページ表示しようとしただけで、もろもろ含めて150以上のファイルをダウンロードしてしまいます。
当然、css spriteなどでファイル数そのものを減らすことを考えなければいけませんが、それでも限界がある数です。
なるべく多くのファイルを、同時並行でダウンロードしてきて欲しい。こんな場合に考えなければいけないのが、です。
ホストごとのダウンロード数 – Parallelize downloads across hostnames
ブラウザがひとつのホストとの間に同時にはれるセッション数は、2から多くても6程度です。（正確には、例によってUA Profiler参照）
これは技術的な限界ではなく、HTTP1.1で策定された取り決めです。攻撃まがいの行為を防ぐなどの目的で、ひとつのホストと同時に接続要求できるのは「2」までとされましたが、現在はハードウェアの性能やネットワークの帯域が向上したことで、もう少し多くの接続が許されるようになってきています。
現在の主流ブラウザを「6」とすれば、それでも6つのファイルしか同時にダウンロードすることは出来ないということになります。
前述のページであれば、どんなに効率が良くても25回(150/6)分のロード時間が必要になってしまいます。
これを増やすために、セッション数の制限があるのは「あるホストと」であることに注目してみましょう。
例えば”example.com”というサーバにあるページを表示する場合、”example.com/img”のような場所に画像を置くことが多いかと思います。
しかしその場合、前述のように同時にはれるセッションは多くて6つまでです。仮に30のファイルが必要だとすれば、第5陣まで取得しなければなりません。
では、この画像類が”img1.example.com”,”img2.example.com”…というような、複数のホストに振り分けられていれば、どうでしょう。
img1に6ファイル、img2にも6ファイルと同時にとりにいけば、30ファイルを同時並行で一斉にダウンロードすることも可能です。
このような「トリック」を使うことは、サイトの高速化に非常に重要です。
ホストは、必ずしも物理的/IP的に異なるものである必要はありません。実体として同一の、ヴァーチャルホストなどであったとしても、ブラウザは名前が異なれば別々のホストとして認識します。
以下はGoogle Mapsでのタイルレイヤー画像のダウンロード状況を示してくれたグラフです。
赤枠で囲ったあたりだけでも10以上のファイルが、複数のホストから同時にダウンロードされていることが分かるでしょう。
但し、だからといって闇雲に増やせば良いというわけではありません。
ホストとの接続には新たなTCP接続のための初期化や、名前解決のためのDNS Lookupなどの処理が必要になります。更に同時にあまりにも多くのファイルダウンロードが実行されれば、今度はクライアント端末のCPUなどが高負荷になりすぎる可能性もあります。
Googleによれば、経験則上でホストの数は2～5くらいとしておくのが良いようです。
注意点が2点あります。
まず、JavaScriptファイルは多くのブラウザでパラレルダウンロードが出来ない件。
このため、複数のホストにJsファイルを分散することは無意味です。ここでは、前回で説明したようにスタイル等との指定順に配慮したり、外部ファイルをひとつに結合することが、より重要です。
次に、あるファイルは、同じサーバから再度取得されるようにしなければならないということ。
例えばランダムに、ある時は a.gif を img3 で取得し、同ファイルを次は img2 に取得しにいくようにするようなことは、決してやってはいけません。初回で見たようなブラウザキャッシュを有効活用できなくなってしまいます。
最後に、このトリックを用いると、静的画像のcookieヘッダの利用を制限することも容易になります。
これについては、また別途。
Related posts:
- [Web] Google Page Speedでサイトを高速化(3)
- [Web] Google Page Speedでサイトを高速化(2)
- [Web] Google Page Speedでサイトを高速化(1)
- [Web] Google Page Speedでサイトを高速化
