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
-
タグ: AIと経営, コラム, デジタルとリアル, 事業戦略, 人材育成, 企業ストーリー, 働き方, 創業秘話, 社内企画, 社長インタビュー, 経営理念, 給与制度
給与水準を高くする理由は?IT経営者でなければ何をしたい?【甲斐社長に聞く 第2回】|株式会社イー・エージェンシー公式note -
株式会社KEYMEMORY様:さぶみっと!レコメンドご利用事例
-
タグ: CVランキング, ECマーケティング, Shopify, Shopifyアプリ連携, ecサイト構築, refactory, さぶみっと!レコメンド, コラム, レコメンドエンジン, 売上向上, 導入事例, 販売代理店
株式会社refactory様『さぶみっと!レコメンド』をShopify上に国内初導入&販売代理店契約を締結 -
タグ: エンジニア募集, オウンドメディア, コラム, ビジネス職, リモートワーク, レコメンドエンジン, 中途採用, 働きやすい環境, 採用強化, 社内文化, 翻訳ツール
【オープン社内報 2025年7月号】イー・エージェンシー プレミアムニュース -
タグ: エンジニア採用, キャリア採用, コミュニケーション, コラム, ブログ, リモートワーク, ワーケーション, 文化, 環境
2025年7月の募集職種一覧!ビジネス職を中心に採用強化中!|株式会社イー・エージェンシー公式note -
タグ: BIツール, GMP, Google Cloud, Looker Studio, Looker Studio Pro, コラム, データ分析, データ可視化, レポート自動化, 生成ai
【比較表あり】有料版Looker Studio Proと無料版の違いを徹底解説!導入で気をつけるべき3つのポイント