HTTP/2

HTTP/2 とは

HTTP/2 は、2015 年に標準化された HTTP プロトコルのメジャーバージョンで、HTTP/1.1 の性能限界 (Head-of-Line Blocking、多数の TCP 接続) を解消する。Google の SPDY プロトコルがベースになっている。

HTTP/1.1 の問題

HTTP/1.1 の問題を図で示す。

HTTP/1.1: 1 つの TCP 接続で 1 リクエストずつ (直列)
  [リクエスト1] → [レスポンス1] → [リクエスト2] → [レスポンス2]

  ブラウザは 6 本の TCP 接続を並列に開いて回避 → 接続コストが高い

HTTP/2 の改善

HTTP/2 の改善を図で示す。

HTTP/2: 1 つの TCP 接続で複数リクエストを多重化 (並列)
  ストリーム1: [リクエスト1] → [レスポンス1]
  ストリーム2: [リクエスト2] → [レスポンス2]  ← 同時に処理
  ストリーム3: [リクエスト3] → [レスポンス3]

機能	HTTP/1.1	HTTP/2
多重化	❌ (1 接続 1 リクエスト)	✅ (1 接続で並列)
ヘッダー圧縮	❌	✅ (HPACK)
バイナリフレーム	❌ (テキスト)	✅ (バイナリ)
サーバープッシュ	❌	✅ (非推奨化)
必要な TCP 接続数	6 本	1 本

HTTP/3 (QUIC)

HTTP/3 (QUIC) を以下にまとめる。

観点	HTTP/2	HTTP/3
トランスポート	TCP	QUIC (UDP ベース)
HoL Blocking	TCP レベルで発生	ストリームごとに独立
接続確立	TCP + TLS (2〜3 RTT)	0-RTT (再接続時)
対応状況	ほぼ全ブラウザ	主要ブラウザ対応済み

CloudFront での HTTP/2 / HTTP/3

CloudFront はデフォルトで HTTP/2 をサポートし、HTTP/3 もオプションで有効化できる。

フロントエンド開発への影響

HTTP/2 の多重化により、HTTP/1.1 時代の最適化テクニックが不要になった。

テクニック	HTTP/1.1	HTTP/2
CSS スプライト	必要 (リクエスト数削減)	不要
ファイル結合	必要	不要 (個別ファイルの方がキャッシュ効率が良い)
ドメインシャーディング	必要 (接続数制限の回避)	逆効果 (多重化が使えない)
インライン化	有効	不要

実務での活用方法は関連書籍にも詳しい。