こんにちは。VOYAGE GROUPの駒崎です。
ECナビ のエンジニアをやっています。つい先日入社しました。
使用ツール
SPDY自体、Googleで開発したプロトコルだけあり、
Chromeが良いスコアの一方、
なぜかHTTPが遅い結果になっていますが、試行回数が少ないため誤差の範囲と考えました。
その他
SPDYを導入したからといって一概に速度向上に繋がるわけではないこともわかったので、
サーバ側に導入する際はターゲットやサイト構成をよく検討する必要がありそうです。
ECナビ のエンジニアをやっています。つい先日入社しました。
この間(4ヶ月遅れですが)「WEB+DB PRESS Vol.75」にSPDYの記事が掲載されていたので、
現状、体感速度にどの程度効果が出るのか検証してみました。
SPDYって?という方は、
wikipedia さんに詳しく記載されていますので興味がある方はご参照ください。
試してみること
HTTPサーバ、HTTPSサーバ、HTTPSサーバ(SPDY)
それぞれのサーバに画像コンテンツが大量にあるページを用意し、
各ブラウザでアクセスした平均ロード時間を比べてみます。
各ブラウザでアクセスした平均ロード時間を比べてみます。
SSL証明書がオレオレ証明書のため、ブラウザでの計測は手動です。(´・ω・`)
サーバ
- CentOS 6.4(国内VPS)
- nginx 1.5.6 --with-http_spdy_module (SPDY/2)
使用ツール
- Chrome 31
- Firefox 25
- Safari 6
- Spdycat(Spdylay同梱のCUIツール)
まず準備
nginxをサクッとインストールして、
HTTP、HTTPS、HTTPS(SPDY)サーバをそれぞれ違うポートで立ち上げます。
ドキュメントルートは同じディレクトリを指すようにします。
SPDYを有効にするためには、nginx.conf で listenディレクティブにssl spdy を設定します。
こんな感じ。
server {
listen 9999 ssl spdy;
次にSpdycatを使って、nginxがSPDY対応出来たか確認します。
Macなら brew install spdylay で簡単にインストール出来ます。
普通のWebサーバ
% spdycat -v3 https://ほげほげ:9999/
[ 0.051] NPN select next protocol: the remote server offers:
* http/1.1
NPN selected the protocol: spdy/3
SPDY対応サーバ
% spdycat -v3 https://ほげほげ:9998/
[ 0.048] NPN select next protocol: the remote server offers:
* spdy/2
* http/1.1
NPN selected the protocol: spdy/3
spdy/2が利用可能になってますね。
検証用Webページとして、
ドキュメントルートにmod_spdyデモサイトから拝借した画像196を含むページを設置します。
今のデモサイトには画像が50個しかないのですが、データは196個残っているのでそれもお借りしました。
いよいよ実験です。
測定結果
Chrome | Firefox | Safari | |
HTTP | 1.140 | 2.234 | 2.928 |
HTTPS | 1.372 | 6.312 | 2.618 |
SPDY | 0.4896 | 7.492 | 2.908 |
それぞれ5回の平均ロード時間(sec)です。
評価
傾向がブラウザごとに大きく違ってしまい、
サーバ側の評価はしづらい結果となってしまいましたので、
ブラウザごとの評価をしてみます。
ブラウザごとの評価をしてみます。
Chrome
SPDY自体、Googleで開発したプロトコルだけあり、
SPDY対応サーバではHTTP、HTTPSサーバと比べて倍近いロード速度になりました。
体感速度はだいぶ向上すると思います。
Firefox
Chromeが良いスコアの一方、
FirefoxはSPDY対応サーバに対してロード速度が悪化してしまいました。
Version11からSPDYに対応しているはずなのですが…。
Version11からSPDYに対応しているはずなのですが…。
5回しか試していないとはいえ、明らかな差が出ているように見えます。
ただ、Google画像検索(SPDY対応)で
network.http.spdy.enabled(.v2, .v3)のtrue/falseを切り替えて
それぞれロード時間を計測したところでは有意な差は見られませんでした。
ページ構成やサーバサイドの実装に依って差が出ているのかもしれません。
Safari
なぜかHTTPが遅い結果になっていますが、試行回数が少ないため誤差の範囲と考えました。
SafariはSPDY対応していないため、大きな違いはありませんでした。
その他
IEは計測出来ないのですが、IE10以前はSPDY未対応のため、
Safari同様の結果になるのでは?と予想しています。
Operaは時間の関係で調べませんでした。
おわり
上記の結果からは、
SPDY対応ブラウザでも体感速度に大きく違いがあることがわかりました。
Googleのサービスを使うならChromeを使うのが一番ですね。
Googleのサービスを使うならChromeを使うのが一番ですね。
SPDYを導入したからといって一概に速度向上に繋がるわけではないこともわかったので、
サーバ側に導入する際はターゲットやサイト構成をよく検討する必要がありそうです。
また、SafariがSPDY対応した時は、
SPDYの最新バージョンでもう一度計測してみたいと思います。
参考サイト