HTTP/2で爆速。ブラウザ表示速度が驚異的に速くなる実験結果

HTTP/2で爆速。ブラウザ表示速度が驚異的に速くなる実験結果

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

Webの標準プロトコルであるHTTP通信が策定されたのが1991年(HTTP/0.9)。そこから1997年のHTTP/1.1(現状仕様)まではあっという間に決まりました。その後Webが当たり前のように使われるようになって、ブラウザも進化しましたがHTTPの仕様は1997年のままでした。

それが、やっと現状の技術に即した標準プロトコルHTTP/2に移行しようとしています。

HTTP/2の1つの売りは帯域の効率的利用です。

サーバーサイドでは、コンテンツデータのダウンロードに圧縮技術を使うことが当たり前になってますが、HTTP/2レスポンスヘッダもHPACKという圧縮技術が使われ、すべてのデータが高速化されることを前提としています。

HTTP/1.1の問題点

HTML Head of line Blocking

ブラウザにおける制限で、1度のTCP通信が4〜6つの接続に制限されています。これは6車線の高速道路に料金所が1つしかないため、常に渋滞を起こしているのと同じです。

例えば、HTTP/1.1の環境では、Javascriptの呼び出し回数やページ内の画像数が多い場合など6セッションずつしか処理がされないため、読み込み完了する時間が無意味に遅くなっているページが多々見られます。

当社のWEBサイトをChromeブラウザで見てデバッグツールで確認した所、確かに6個ずつのTCPに分かれていることが確認できます。上が終わらないことには次が始まらない状態です。

image07

パケット数のオーバーヘッドは常々問題になっていて、Googleなどは、ページ内のUIで使用するアイコンなどを1つのファイルにして切り抜きをして表示をするなど工夫を繰り返してきました。

HTTP/2では100以上の並列接続が可能になりますので、使える帯域は効率よくすべて使えるようになります。

ネットワーク通信の比較

HTTP/1.1はヘッダ情報がサーバー毎に任意設定という点が、通信効率を悪くしている原因らしいです。
HTTP/2においては、データ整理がされていて、おまけに圧縮がかかっているので、ヘッダ読み込みに時間が掛かることもなくなりそうです。

デバッグツールの画像で比べてみると・・・

HTTP/1.1

image05

HTTP/2

image08

見るからに、HTTP/2の方がヘッダボリュームがすくないですね。
ちなみに、HTMLソース読み込み速度も
HTTP/1.1 = 486msに対して、HTTP/2 = 7ms
という驚異的スピードです。

HTTP/2とSPDYのブラウザ対応状況

http://caniuse.com/#feat=spdy

上記URLで確認した所、全てのブラウザの最新バージョンで対応が完了しているのがわかります。
時代はHTTP/2を受け入れ準備が完了しているという事ですね。

HTTP/2の構築方法

世の中、ApacheとIISとNginxがほとんどのWEBサーバーモジュールとして使われていますが、どれも今現在において、HTTP/2に対応できていません。

とりあえず、手っ取り早く構築するために「Nghttp2」をセットしてみたいと思います。

まずは、OSとして「CentOS7」を用意。※OS、の構築手順は省きます。

Nghttp2のインストール

まずは必要なライブラリ関連のインストール

$ yum -y install libev-devel
$ yum -y install zlib-devel
$ yum -y install openssl-devel

モジュールのダウンロードからインストール。
https://github.com/tatsuhiro-t/nghttp2/releases/latest
このサイトでバージョンを確認。
※現時点でのバージョンは v1.3.4でした。

$ wget https://github.com/tatsuhiro-t/nghttp2/releases/download/v1.3.4/nghttp2-1.3.4.tar.gz
$ tar zxvf nghttp2-1.3.4.tar.gz
$ cd nghttp2-1.3.4
$ autoreconf -i
$ automake
$ autoconf
$ ./configure
$ make
$ sudo make install

SSL証明書の作成(今回は自己証明書)

# 秘密鍵の作成
$ openssl genrsa 2048 > server.key

# CSRの作成
$ openssl req -new -key server.key > server.csr
> Country Name (2 letter code) [XX]:JP
> State or Province Name (full name) []: *何もなし*
> Locality Name (eg, city) [Default City]: *何もなし*
> Organization Name (eg, company) [Default Company Ltd]: *何もなし*
> Organizational Unit Name (eg, section) []:*何もなし*
> Common Name (eg, your name or your server's hostname) []: *ドメイン*
> Email Address []: *何もなし*

> Please enter the following 'extra' attributes
> to be sent with your certificate request
> A challenge password []: *何もなし*
> An optional company name []: *何もなし*

# SSL証明書の作成
$ openssl x509 -days 3650 -req -signkey server.key < server.csr > server.crt

# 秘密鍵とSSL証明書を設置
$ mv -i server.key /etc/pki/tls/private/
$ mv -i server.csr /etc/pki/tls/certs/
# ユーザー作成
$ useradd -d /run/nghttp2 -s /sbin/nologin nghttp2

# 鍵のオーナーを変更
$ chown nghttp2:nghttp2 /etc/pki/tls/private/server.key
$ chown nghttp2:nghttp2 /etc/pki/tls/certs/server.crt

# 鍵の権限を変更
$ chmod 600 /etc/pki/tls/private/server.key
$ chmod 600 /etc/pki/tls/certs/server.crt

Nghttp2の設定

# 設定ファイル作成※新規作成
$ vi /etc/sysconfig/nghttpd

下記情報を登録

# worker スレッド数
WORKERS=1
 
# ドキュメントルート
HTDOCS=/var/www/html
 
# 待受ポート番号
PORT=8000
 
# サーバ秘密鍵
PRIVATE_KEY=/etc/pki/tls/private/server.key
 
# サーバ証明書
CERT=/etc/pki/tls/certs/server.crt

systemd設定

ファイル作成

$ vi /etc/systemd/system/nghttpd.service

下記データを登録

[Unit]
Description=nghttpd
After=network.target
 
[Service]
Type=simple
User=nghttp2
EnvironmentFile=-/etc/sysconfig/nghttpd
ExecStart=/usr/local/bin/nghttpd -n $WORKERS -d $HTDOCS $PORT $PRIVATE_KEY $CERT
 
[Install]
WantedBy=multi-user.target

設定反映

$ systemctl daemon-reload
$ /etc/init.d/nghttpd reload-----

確認

$ systemctl list-unit-files | grep nghttpd
--
> nghttpd.service                             disabled

起動処理

# サービスを起動
$ systemctl start nghttpd

# 自動起動設定
$ systemctl enable nghttpd

# 起動確認
$ ps aux | grep nghttpd

起動

$ /usr/local/bin/nghttpd -v 8080 /etc/pki/tls/private/server.key /etc/pki/tls/certs/server.crt

TCPチェック

作ったサーバーでショーケース・ティービーのホームページを擬似的に設置して、本番のHTTP/1.1とHTTP/2の速度比較をしてみました。

HTTP/1.1

image11

HTTP/2

image04

比較

DOMContentLoaded : (HTTP/1.1)1.67s (HTTP/2)1.02s
Load : (HTTP/1.1)2.24s(HTTP/2)1.70s
Finish : (HTTP/1.1)3.52s(HTTP/2)1.72s

結果

画像パスなどを変更している関係で、ファイル総数と容量、一部Not Foundなど若干違っていますが、それでもHTTP/2の方がダントツに速くなっていることが判ります。

今回はオレオレ証明書でテストしましたが、本番サーバーでも、この設定にすると、サイト速度も劇的に向上することがわかりました。

あと、ネットワークログの図から分かる通り、「通常表示」は、6個ずつの段々表示になっているのに大して、「HTTP/2」では、一括して全てのパケットが走っているのが見て分かります。
※早い理由はこれですね。

まだ、apacheやnginxが対応していない上に、centosも6系ではインストールが難しいのですぐに実践導入とはいきませんが、今後対応バージョンが出てくることで、間違いなく移行されていくことは明確です。

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

この記事を書いた人
アバター
下駄(弓削田)
Creativeに生きるRunner

【週刊bitWave】(メルマガ)始めました!

登録はこちらからメールアドレスを入力してお申込みください。

ご登録いただいたメールアドレスは 【週刊bitWave】の更新情報の配信にのみ使用します。

個人情報の取扱いに関しては、「プライバシーポリシー」をご確認ください。解除はいつでもこちらから行うことが可能です。

あなたにおすすめ