HTTP/2のブラウザ速度調査

※本記事は、オウンドメディア向けに書いた備忘録記事ですが、いつ消されるか分からないため、記事救済の為、転機しております。 HTTP/2で爆速。ブラウザ表示速度が驚異的に速くなる実験結果 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つの接続に制限されています。これは６車線の高速道路に料金所が１つしかないため、常に渋滞を起こしているのと同じです。 例えば、HTTP/1.1の環境では、Javascriptの呼び出し回数やページ内の画像数が多い場合など6セッションずつしか処理がされないため、読み込み完了する時間が無意味に遅くなっているページが多々見られます。 当社のWEBサイトをChromeブラウザで見てデバッグツールで確認した所、確かに6個ずつのTCPに分かれていることが確認できます。上が終わらないことには次が始まらない状態です。 パケット数のオーバーヘッドは常々問題になっていて、Googleなどは、ページ内のUIで使用するアイコンなどを１つのファイルにして切り抜きをして表示をするなど工夫を繰り返してきました。 HTTP/2では100以上の並列接続が可能になりますので、使える帯域は効率よくすべて使えるようになります。

ネットワーク通信の比較

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

HTTP/1.1

HTTP/2

見るからに、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

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

HTTP/2

比較

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の方がダントツに速くなっていることが判ります。 今回はオレオレ証明書でテストしましたが、本番サーバーでも、この設定にすると、サイト速度も劇的に向上することがわかりました。 あと、ネットワークログの図から分かる通り、「通常表示」は、６個ずつの段々表示になっているのに大して、「HTTP/2」では、一括して全てのパケットが走っているのが見て分かります。 ※早い理由はこれですね。