VPSサーバーをHTTP/2に対応させてサイトの高速化を目指す

サーバー構築2018.5.17

最終更新日：2018.8.18 Update!!

ウェブサイトを閲覧する時にはHTTP（HTTPS）通信が使われますが、このHTTPにもバージョンがあるのをご存知でしょうか。HTTP/2はHTTPのバージョンにおける次世代の規格になるのですが、現在はウェブサーバーやブラウザの性能が上がってきていることもあり、対応しているウェブサイトも多いのではないでしょうか。そこで今回はウェブサーバーをHTTP/2に対応させてウェブサイトの高速化を目指していきたいと思います。当サイトはVPSサーバーを使っているため、なかなか手付かずの状態でしたが、遅ればせながら対応しましたので備忘録としても残しておきたいと思います。

HTTP/2のメリットについて

HTTP/2の最大のメリットとしてはやはりウェブサイトの表示速度が高速になることではないでしょうか。近年はモバイルデバイスが普及してきたこともあり、ページの表示速度が重要視されるようになってきました。 HTTP/2はストリームと呼ばれるこれまでとは異なる新しい概念が採用されており、サーバーとクライアント間のHTTP・HTTPS通信を効率化させる仕様になっています。これまでのHTTPではリクエストに対してのレスポンスが順番に行われていましたが、この仕様になり、同時に複数のリクエストとレスポンスができるようになりました。 ただし、現在のところブラウザの対応状況などの問題で、実質はhttpでHTTP/2を利用できないようで、SSLに対応させておく必要があるとのことです。

ウェブサーバーをHTTP/2に対応させる

では実際にウェブサーバーをHTTP/2に対応させる設定を行なっていきます。今回はウェブサーバーにNginxを使っている前提で進めていきます。ただし、ウェブサーバーや環境によってはアップデートなどの対応が必要になる場合もあります。ですので、まずは現在使っているOpenSSLとNginxについて確認していきます。まずは、OpenSSLのバージョンを確認していきます。HTTP/2に対応させるためにはOpenSSLがALPN対応している必要があるようで、バージョンが1.0.2以上の必要があります。対応していないバージョンの場合は適宜アップデートを行います。

$ openssl version
 OpenSSL 1.0.2k-fips 26 Jan 2017

OpenSSLのバージョンが対応しているものであれば、続いてNginxの方も確認していきます。バージョンやモジュールによってHTTP/2に対応していないこともありますので、まずは現在使っているNginxの詳細を確認していきます。

$ nginx -V
 nginx version: nginx/1.13.12
 built by gcc 4.8.5 20150623 (Red Hat 4.8.5-16) (GCC) 
 built with OpenSSL 1.0.2k-fips 26 Jan 2017
 TLS SNI support enabled
 configure arguments: …………--with-http_v2_module

まずは、built with OpenSSL〜のところで、先ほど確認したOpenSSLのバージョンと合っていて対応しているかどうかを確認します。そして対応しているモジュールの一覧の中に「--with-http_v2_module」があるかどうかを確認します。無い場合はHTTP/2に対応できないので適宜モジュールをインストールする必要があります。ここまでクリアできれば、いよいよNginxをHTTP/2に対応させる設定を行なってきます。と言ってもこの状態であれば、設定ファイルに一部追記するだけなので簡単に完了します。Nginxの設定ファイルを開いて下記の箇所に「http2」を追記します。バーチャルホストの場合はそれぞれ設定します。

server {
     listen 443 ssl;

↓

server {
     listen 443 http2 ssl;

編集が終わると設定を反映させるためにNginxの再起動を忘れずに行います。

$ nginx -s reload

HTTP/2通信に対応しているかの確認方法

これでHTTP/2にウェブサーバーを対応させることができましたが、実際にHTTP/2通信がされているかをブラウザで確認していきます。いくつか方法がありますが、やりやすいもので大丈夫です。 1. ブラウザのデベロッパーツールでレスポンスヘッダを確認 まずはデベロッパーツールでウェブサイトのレスポンスヘッダを確認する方法です。HTTPのバージョンが「HTTP/2.0」や「h2」と表示されていればOKです。 サーバーをHTTP/2に対応させてサイトの高速化を目指す

2. ブラウザ拡張機能「HTTP/2 and SPDY indicator」を使う Google ChromeやFirefoxなどで提供されているアドオンの「HTTP/2 and SPDY indicator」を使うとサイトがHTTP/2に対応しているかを簡単に調べることができます。【HTTP/2 and SPDY indicator】（Chrome ウェブストア） https://chrome.google.com/webstore/detail/http2-and-spdy-indicator/mpbpobfflnpcgagjijhmgnchggcjblin?hl=ja 【HTTP/2 Indicator】（Firefox 向けアドオン） https://addons.mozilla.org/ja/firefox/addon/http2-indicator/ どちらも使い方は同じですが、アドオンを追加した後、有効化に設定します。サイトがHTTP/2に対応している場合は青色の稲妻マークが点灯します。サーバーをHTTP/2に対応させてサイトの高速化を目指す

3. Webサービス「HTTP/2 Test」を使う HTTP/2に対応しているかを調べることができるWebサービスもあります。下記サイトにアクセスし、対象のURLを入れると結果が表示されます。ここではALPNに対応しているかも教えてくれます。【HTTP/2 Test】 https://tools.keycdn.com/http2-test サーバーをHTTP/2に対応させてサイトの高速化を目指す