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)にアクセスしてみましょう。
緑のイナズマが走りました。
簡単ですね!
検証
実際にWebページの読み込みが早くなっているかどうかを調べました。
このデモページのHTMLと画像ファイルを、Amazon EC2(us-east-1b)に設置してブラウザの読み込み速度を測っています。
keep-aliveは有効としています。
ブラウザはGoogle Chromeです。
httpsで検証
5回試行した結果
index.htmlの詳細
SPDYで検証
5回試行した結果
index.htmlの詳細
SPDYは、全てのファイルを読み込む時間(onload)が5秒ほど短縮されている事がわかります。
SSLとWaitingが高速化されて、Receivingが増えていますね。
まとめ
SPDYを導入することによって大量の画像ファイルなどがあるWebページでは、読み込み速度の改善が見込めるでしょう。
ただし、nginxのデフォルトページで試したのですが、ほとんど画像ファイルを載せていないサイトでは、逆に読み込みが遅くなってしまう事象がありました。
自身のWebサイトがシンプルな構成だったら、SPDYは必要ないかもしれません。
「SPDYには相性がある」という事ですね。
SPDYの導入はお手軽にできるので、いろいろ試してみてください。
参考資料
CentOS 6 + OpenSSL 1.0.1 = SHA256 support
SPDYで複数のTCPコネクションをひとつにまとめるとはどういうことか
PICK UP
-
タグ: Webサイト多言語変換サービス, shutto翻訳, コラム, 事例紹介
株式会社明石工業様:shutto翻訳ご利用事例 -
タグ: Webサイト多言語変換サービス, shutto翻訳, コラム, 事例紹介
株式会社崎陽軒様:shutto翻訳ご利用事例 -
タグ: さぶみっと!メール配信, クラウドサービス, コラム, ニュース, 自社サービス
ITreview Grid Award 2025 Springにて「High Performer」を受賞しました!(メールマーケティングツールカテゴリー) -
タグ: eコマース, itreviewアワード, カゴ落ち対策, クラウドサービス, コラム, ニュース, 顧客満足度
ITreview Grid Award 2025 Springにてカゴ落ち対策カテゴリー部門で「High Performer」を受賞しました! -
タグ: Webサイト多言語変換サービス, shutto翻訳, インバウンド, コラム, ニュース, 顧客満足度
ITreview Grid Award 2025 Springにて、ウェブサイト翻訳ツール部門で「Leader」を5年連続で受賞しました! -
タグ: 2025年の崖, DX推進, GA4, Googleアナリティクス, IT人材育成, gmpプレミアムサロン, イー・エージェンシー, オンライン学習, コラム, データ活用, マーケティングDX, レガシーシステム, 企業変革, 社内教育, 自社DX戦略
「2025年の崖」を乗り越える!DX推進とIT人材の育成が鍵