Ownedmedia ウェブ制作に役立つコンテンツを発信中!

サーバー構築 2018.05.17

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

Tags: ,,,,
最終更新日: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に対応させてサイトの高速化を目指す

サーバーを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に対応させてサイトの高速化を目指す

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

 

3. Webサービス「HTTP/2 Test」を使う

HTTP/2に対応しているかを調べることができるWebサービスもあります。下記サイトにアクセスし、対象のURLを入れると結果が表示されます。ここではALPNに対応しているかも教えてくれます。

【HTTP/2 Test】
https://tools.keycdn.com/http2-test

 

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

 

実際にHTTP/2に対応させてみたところ、体感的にも結構早くなっているのがわかりますね、サイト表示速度を見ると2秒弱ほど短縮されているという結果も出てきたので、やはり対応させるメリットはありますね。

 


 

いかがでしょうか、環境や準備が整っていればそこまで面倒な作業はないので、ぜひ対応されることをオススメします!

 

(参考)
HTTP/2を実際に使用するためのサーバー設定

この記事を書いた人

オガワ シンヤ

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?