ぼちぼち日記

おそらくプロトコルネタを書いていることが多いんじゃないかと思います。

個人のページでこっそりSPDYを使ってみたら

1. SPDYが食傷気味という方へ

先日の少々釣りタイトル気味で出したGmailの記事ですが、非常に多くの方に読んでいただきありがとうございました。SPDY ネタまたかよと食傷気味の方もいらっしゃるかと思いますが、しばらくお付き合い下さい。

2. Google Drive で静的Webページを公開できるようになった。

数日前、「」Google Driveで静的なWebページの公開が可能に という記事が出ました。 Google Drive は5GBまで無料のストレージサービスです。(別に私はGoogleの回し者ではなく、Dropboxも同様な機能を提供しています。）

さっそく試しにGoogle Drive の静的ページにアクセスしてみると、当然 https でSPDY の稲妻マークが光っています。http でアクセスすると https にリダイレクトされ基本SPDYでサービスが提供されています。GAEに続いて個人で手軽に利用できるGoogleのSPDY対応サービスがまた一つ増えたことになります。

3. 個人でこっそりSPDYを使う

この Google Drive で静的ページを公開すると、URLが https://googledrive.com/host/何か固有のID/ になります。ワンタイム的なデータのやり取りならこれでいいでしょうが、パーマネントなサイトとして使っていくのは少々辛いでしょう。やはりクラウドストレージは画像や動画等のリソース置き場として、

<div id="pict">
    <img class="pict" src="https://googledrive.com/host/0BwrBJRTua6kQZWVCQVIyQll5TnM/images/dy-0.jpg">
    <img class="pict" src="https://googledrive.com/host/0BwrBJRTua6kQZWVCQVIyQll5TnM/images/dy-1.jpg">
</div>

のように使うことになりますね。

こういう使い方をすると個人サイトなどでSPDYを使っているところはまずないので、非SPDYでアクセスしたページの一部がSPDY化されたハイブリッドな状態になります。

そういう状態を「こっそりSPDY」と名付けてみましょう。

実はこの「こっそりSPDY」は今に始まったことではなく、これまでもGoogle CDN から jquery などをhttpsで読み込んでいると「こっそりSPDY」状態が発生していました。ただ Google Drive を使うと「こっそりSPDY」化させるリソースを自分で好きなように置けるのが違います。

この「こっそりSPDY」は、サイトにアクセスしているユーザにわかるのでしょうか？

Chrome の SPDY Indicator では、稲妻マークが全く反応しません。 Firefoxの SPDY Indicator では、マウスをグレーの稲妻マークの上にのせると「SPDY is active for some sub-documents included in the top-level document」という吹き出しが出てきます。でもパッと見はわかりませんね。

おなじみの github でも同じ状況です。github自体はSSLでサイトにアクセスしますがSPDYに対応しておらず、アイコンを提供している gravatar のサイトがSPDY対応しています。これは gravatar の運営元が wordpress.com と同じ Automattic社であるため、 wordpress とインフラを共通化しているからじゃないかと想像します。

4. ベンチマークをしてみる。

このような「こっそりSPDY」サイトは、SPDYのメリットをどの程度受けることができるのでしょうか？
いろいろ理屈をこねても仕方がないので、ベンチマークをして実測値で比較してみましょう。

ベンチマークツールとしてChromeのBenchmarking Extensionを利用します。このツールは spdyあり/なし の２通りのベンチができるので便利です。ただし「こっそりSPDY」サイトに対してSPDY有のベンチマークを行うと、エラーでベンチができないため、Extensionのソースを一部改変してます。

ベンチするサイトとして、Google Drive を利用した「こっそりSPDY」サイトと「全部SPDY」サイトの２種類を用意しました。コンテンツは２つとも同じで、３０枚の画像のリンクと Navigation Timing APIによる読み込み時間の表示するJSが仕込んであります。（実際のサイトへのページのリンクは後述）１０回ページを読み込み、その読み込み時間の平均を測定しています。読み込み毎に Clear Connection/Clear Cache を有効にしています。

結果は以下の通り。

ページの読み込み平均時間は、

こっそりSPDY < 全部SPDY < こっそりSSL < 全部SSL

となりました。これを一番読み込みが速い「こっそりSPDY」を基準にしてグラフ化すると、

となります。結構な違いが出ますね。

ちなみにこの測定結果は比較的高速な回線上で行われています(Google DriveへのRTTが数msecとは驚き。）。実は数Mbps程度の比較的遅い回線では全く傾向が違いました(SPDYの方が遅い）。何回か繰り返しましたがベンチ途中でデータが詰まりベンチ結果が安定しませんでした。

5. 実際に「こっそりSPDY」を体感してみよう

ベンチはベンチ。 どの環境でも常にその値が出るわけではありません。環境に依存する部分が大きい可能性もあり、盲目的に信じるのは危険です。なので実際に皆さんの環境で体感できるページを作りました。
ページは30枚の画像とNavigation Timing APIで取得したページ読み込み時間のグラフが表示されています。*1 画像は適当なのがなかったので偶然東京駅で撮影した「幸せのドクターイエロー」を載せています*2。

Google Drive比較のためDropboxに画像を置いたページも用意しています。やっぱり海外のAWSからHTTPでもってきますのでハンディキャップが高いですね。

是非、SPDY対応のブラウザー(Chrome/Firefox/Opera等)でその違いを体感して下さい。

  1. http://html5.ohtsu.org/spdy_test_20130207/without_spdy/ Local 最高速
  2. http://html5.ohtsu.org/spdy_test_20130207/with_spdy/ こっそりSPDY(Google Drive)
  3. http://html5.ohtsu.org/spdy_test_20130207/with_dropbox/ こっそり HTTP(DropBox)
  4. https://googledrive.com/host/0BwrBJRTua6kQaUZsc0k4RFlrRTg/ 全部SPDY(Google Drive)

実際見比べてみると、各サイトで画像が表示されていく順番が違うのがわかるかと思います。
非SPDYに置かれた画像はある程度左から順番に表示されていきますが、SPDY対応している場合の画像は表示順バラバラです。これはSPDYではリクエストの多重化が行われているため、各画像の読み込みが、HTMLで書かれたコンテンツの順番（上から）に依存しないからです。

今月末には、もう少しいろんなことができるSPDYの比較体感サイトを公開する予定です、どうかお楽しみに。

*1:Navigation Timing API については、HTML5で Speed Test, Navigation Timing APIによる性能データ収集 を参考にして下さい。

*2:別に私は撮り鉄ではありませんので、あしからず。