0%

DevelopWEB開発・運用ノウハウ

Posted:2018.05.17

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

ウェブサイトを閲覧する時には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を実際に使用するためのサーバー設定

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

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

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

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

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】