nginxにSPDYを導入して、Webページを高速化する方法│株式会社イー・エージェンシーグループ

head

SPDY(スピーディ)はGoogleがWebページの読み込みの高速化を目指して提唱している通信プロトコルのひとつです。
Googleのみならず、Twitter、FacebookやLINEでも採用されたことで話題になりました。

そのSPDYをnginxに導入する手順を紹介します。
導入後、本当にWebページの読み込みが早くなるのか検証してみます。

SPDYのデモ動画

HTTPSとSPDYの読み込みの速さの違いを6秒の動画で紹介しています。

参考URL

Facebook endorses Google’s SPDY networking protocol （FacebookでSPDYを採用）
Adopting SPDY in Line – Part 1: An Overview （LINEでSPDYを採用）
Twitter、Google提案のSPDYプロトコルを導入

試験環境

Hosting：Amazon EC2
AMI: amzn-ami-pv-2012.09.0.x86_64-ebs
Zone: us-east-1b
Type: m1.small

OpenSSL 1.0.1をインストール

nginxでSPDYを使うためには、OpenSSLのバージョン1.0.1以上が必要です。
IUS Community Projectのyumリポジトリが利用できます。

必要な外部リポジトリを登録します。

# rpm -Uvh http://dl.iuscommunity.org/pub/ius/stable/Redhat/6/x86_64/epel-release-6-5.noarch.rpm
# rpm -Uvh http://dl.iuscommunity.org/pub/ius/stable/Redhat/6/x86_64/ius-release-1.0-10.ius.el6.noarch.rpm
# yum install yum-plugin-replace

yumでopensslをリプレースします。

# yum replace openssl --replace-with=openssl10 --enablerepo=ius-testing 
# yum install openssl10-devel --enablerepo=ius-testing

opensslのバージョンを確認します。

# openssl
OpenSSL> version
OpenSSL 1.0.1c-fips 10 May 2012
OpenSSL> quit

OpenSSLの準備ができました。

nginxとSPDYモジュールをインストール

nginxのインストールに必要なライブラリをインストールしておきます。

# yum install gcc patch pcre-devel gd-devel

nginxをソースからインストールします。

# wget http://nginx.org/download/nginx-1.3.11.tar.gz
# tar xvfz nginx-1.3.11.tar.gz
# cd nginx-1.3.11

SPDYモジュールのパッチをダウンロードして、パッチを適用します。

# wget http://nginx.org/patches/spdy/patch.spdy.txt
# patch -p1 < patch.spdy.txt

configureを実行します。

# ./configure --with-http_ssl_module --with-http_spdy_module

makeを実行します。

# make
# make install

nginxの設定ファイルnginx.confを編集します。

SSLの一行目に、listen 443 ssl spdy default_server;を追記して、SSL証明書を設定しました。

# vi /usr/local/nginx/conf/nginx.conf


    # HTTPS server
    # 
    server {
        listen 443 ssl spdy default_server;
        server_name  xxxx.com;
        ssl                  on;
        ssl_certificate      /xxxx/certificate.crt;
        ssl_certificate_key  /xxxx/certificatekey.key;
        ssl_session_timeout  5m;

        ssl_protocols  SSLv2 SSLv3 TLSv1;
        ssl_ciphers  HIGH:!aNULL:!MD5;
        ssl_prefer_server_ciphers   on;

        location / {
            root   html;
            index  index.html index.htm;
        }
    }

nginxを起動します。

# /usr/local/nginx/sbin/nginx

WebサイトがSPDY対応しているかどうか確認できるSPDY indicatorというブラウザのアドオンがあります。

このSPDY indicatorをブラウザに入れておきましょう。

Google Chrome：SPDY indicator
Firefox： SPDY indicator

ブラウザでSSLサイト（https://で始まるURL）にアクセスしてみましょう。

firefox

緑のイナズマが走りました。
簡単ですね！

検証

実際にWebページの読み込みが早くなっているかどうかを調べました。
このデモページのHTMLと画像ファイルを、Amazon EC2（us-east-1b）に設置してブラウザの読み込み速度を測っています。
keep-aliveは有効としています。
ブラウザはGoogle Chromeです。

httpsで検証

5回試行した結果
flag_aws_https

index.htmlの詳細
flag_https_index

SPDYで検証

5回試行した結果
flag_aws_spdy

index.htmlの詳細
flag_spdy_index

SPDYは、全てのファイルを読み込む時間（onload）が5秒ほど短縮されている事がわかります。
SSLとWaitingが高速化されて、Receivingが増えていますね。

まとめ

SPDYを導入することによって大量の画像ファイルなどがあるWebページでは、読み込み速度の改善が見込めるでしょう。
ただし、nginxのデフォルトページで試したのですが、ほとんど画像ファイルを載せていないサイトでは、逆に読み込みが遅くなってしまう事象がありました。
自身のWebサイトがシンプルな構成だったら、SPDYは必要ないかもしれません。
「SPDYには相性がある」という事ですね。
SPDYの導入はお手軽にできるので、いろいろ試してみてください。