HTTP/1.1とHTTP/2で複数画像のダウンロード速度を比較してみる

「SAVACAN」担当のMKです。

今回のブログではHTTP/1.1とHTTP/2で複数画像のダウンロード速度を比較してみましたので紹介したいと思います。

WEBサーバーのApacheとNginxで速度を検証しましたので、簡単ですがそれぞれのWEBサーバーの特徴を紹介します。Nginxの特徴については「 Nginxのlimit_req_moduleを使って自作のDoS攻撃対策をしてみた 」でも触れておりますので、Nginxに興味のある方は是非合わせてご覧ください。

本ブログはApacheとNginxのWEBサーバーの基本的な設定方法を理解している方向けの記事となっております。

Apacheの特徴とシェア

・駆動方式（preforkについて解説）
マルチプロセッシングモジュール（MPM）を採用したマルチプロセスのプロセス駆動アーキテクチャで、1リクエストに対して1プロセス立ち上がるため大量にリクエストがくるとメモリが大量に消費されてしまうという問題があります。
最近では、より効率よくリソースを活用できるイベント駆動方式が主流となってきました。

・向いているサイト
Apacheはphpなどのプログラムによる動的処理のようなCPUリソースを多く必要とするコンテンツの実行に適しています。
また多数のモジュールが用意されており、複雑な要件にも柔軟に対応できます。

・シェア
WEBサーバーの市場シェアを調査しているNetcraft社の7月のシェア情報ではアクティブサイトの19.69%となっています。

あわせて読みたい

July 2024 Web Server Survey | Netcraft In the July 2024 survey we received responses from 1,104,170,084 sites across 270,429,856 domains and 12,891,416 web-facing computers. This reflects an incr ...

・その他情報
1995年よりリリースされているため長い歴史があり、十分な研究が行われ豊富な情報があります。
ディレクトリ単位で様々な制御を実装できる「.htaccess」が利用できます。

Nginxの特徴とシェア

・駆動方式
シングルスレッドモデルのイベント駆動アーキテクチャで、1プロセスで複数のリクエストを並列処理することでメモリ消費を抑えることができます。イベント駆動によってC10K問題（クライアントが1万台に達するとWEBサーバーの性能に余裕があってもレスポンスが下がる問題）に対応しています。

・向いているサイト
同時接続処理能力に優れ、htmlや画像など比較的軽量な静的コンテンツの多いWEBサイトに適しています。

・シェア
Netcraft社の7月のシェア情報ではアクティブサイトの 20.50% となっており、Apacheより僅かに市場シェアが高い結果でした。

・その他情報
Apacheから遅れて2004年からリリースされているため初心者向けの情報がApacheより少ないです。
同時接続数でサーバーが過負荷になるリスクがApacheより少ないです。
PHPを運用する場合、単独で実行できないためPHP-FPMなど別のアプリケーションサーバーを必要とします。

HTTP/2とは何か

本ブログの本題であるHTTP/1.1とHTTP/2について大きな特徴を説明します。

HTTPとは
コンピュータやサーバーがデータを要求/送信する際に利用されるプロトコルです。
ほぼすべてのwebサイトがこのプロトコルを利用して提供されています。

HTTP/1.1の特徴
リクエストに対してレスポンスが返ってくるまで次のリクエストを送りません。リクエストの処理効率が悪いです。昨今のモダンブラウザでは同時接続数を増やす事で同時に処理できるリクエスト処理の多重化を図っています。

HTTP/2の特徴
1つの接続の中でストリームと呼ばれる仮想双方向シーケンスを構築する事で、複数のリクエスト/レスポンス処理の並行処理を可能とします。処理を多重化できるためブラウザの表示時間が短縮できる可能性があります。
また、ヘッダーを圧縮して送信する事で、送信データ量を削減します。

特徴だけ見比べると、順番に処理するHTTP/1.1より、並行処理するHTTP/2の方が早くなりそうな予感がします。

HTTP/2の設定

前提としてWEBサーバーが稼働状態にあるものとさせて頂きます。

ApacheやNginxのデフォルト設定では（何も設定しないと）クライアントとWEBサーバー間のプロトコルにHTTP/1.1を利用しますので、HTTP/2を利用するためにはまず設定をしましょう。

Apacheで設定

設定箇所はMPM設定ファイルとssl.confの2点になります。
設定してもHTTP/2で通信しない場合はHTTP/1.1で動かしていたときに /etc/httpd/conf.modules.d/10-h2.conf で mod_http2.so の読み込みをコメントアウトしていないかなど確認してみてください。

/etc/httpd/conf.modules.d/00-mpm.conf

コメントアウトする
#LoadModule mpm_prefork_module modules/mod_mpm_prefork.so
コメントアウト削除する
LoadModule mpm_event_module modules/mod_mpm_event.so

/etc/httpd/conf.d/ssl.conf

以下の1行を追加します。

##
## SSL Virtual Host Context
##

# HTTP/2通信を優先的に利用し対応していないブラウザではHTTP/1.1を利用
Protocols h2 http/1.1

以上でApacheの設定は完了です。

Nginxで設定

設定箇所はnginx.confの1点になります。

/etc/nginx/nginx.conf

# SSLの設定に http2 を追加
server {
    listen 443 ssl http2;

以上でNginxの設定は完了です。

画像ダウンロード速度検証

HTTP/2は並列処理で高速化する仕組みですので軽いファイルを大量に置いて確認してみます。
以下の速度は1ファイル3.18KBの画像(SAVACANロゴファイル)を100ファイル（合計318KB）同時に読み込むhtmlをGoogle Chromeで開いて10回速度を確認しました。

中央の値となったGoogle Chromeの開発画面のキャプチャを貼りますのでご確認ください。
わずかですがApacheでもNginxでもHTTP/2の方が高速に配信できています。

Apache HTTP/1.1

Apache HTTP/2

Nginx HTTP/1.1

Nginx HTTP/2

プロトコルの列にHTTP/1.1のときはhttp/1.1、HTTP/2のときはh2と載ります。
キャプチャ内のウォーターフォール部を見ると、HTTP/1.1では順次レスポンスを返していますが、HTTP/2では同時に処理が行われている事を確認できます。

HTTP/2は導入した方が良いのか

HTTP/2はWEBサイトの表示が効率化/高速化されるという触れ込みですが、すべてのサイトで必ずしも効果があるものではありません。

例えば、表示するコンテンツが少ないサイトや閲覧者が少ないサイトは、並列処理の恩恵が薄く、効果が見込めません。
また、閲覧者の回線状況にやサーバーリソースよってはHTTP/1.1の方が効率よく閲覧できる場合もあります。試しに300KB程度の画像を合計10MB分読み込む速度を確認したところHTTP/2よりHTTP/1.1の方が早くなりました。

以上の事から、下記のようなサイトでは効果が見込める可能性が高いです。

・1ページ内で沢山のコンテンツを提供しているサイト
・同時訪問者の多いサイト
・回線、サーバーリソースに余剰のあるサイト

まずは導入したいサイトがHTTP/2に適しているのか検討してみましょう！