【入門編】HTTP/2マルチプレクシング(多重化)の仕組み – HTTPプロトコル・通信規格実践ガイド

「HTTP/1.1の渋滞」を解消せよ！HTTP/2マルチプレクシングの魔法を解き明かす

こんにちは！ネットワークの世界へようこそ。インフラエンジニアとして日々パケットの海を渡り歩いていると、たまに「なぜWebサイトの読み込みは、こんなに奥が深いんだろう？」と思うことがあります。

今日は、現代のWebの高速化を支える縁の下の力持ち、「HTTP/2のマルチプレクシング」についてお話しします。難しそうな名前ですが、安心して一歩ずつ紐解いていきましょう。

—

HTTP/2の話をする前に、まずは前任者である「HTTP/1.1」の苦悩を知る必要があります。

HTTP/1.1の世界では、ブラウザはサーバーに対して「お願い」を一つずつしか完了できませんでした。

これを「郵便配達」に例えてみましょう。
あなたはサーバーという郵便局に、10通の小包（画像やCSSファイルなど）の配達をお願いしました。HTTP/1.1のルールではこうです。

1. 「小包Aをください」と頼む。
2. 配達員さんがAを持ってくるまで、あなたは門の前で待機。
3. Aが届いたら、次は「小包Bをください」と頼む。

…これ、すごく非効率ですよね？もし小包Aが巨大で配達に時間がかかっていたら、後ろのBやCは門の外でずっと待たされることになります。これをネットワーク用語で「Head-of-Line Blocking（先頭のブロック）」と呼びます。一つの遅延が、全体の渋滞を引き起こしてしまうんです。

—

そこで登場したのが、HTTP/2の「マルチプレクシング（多重化）」です。

これは先ほどの郵便配達の例えを劇的に変えます。
HTTP/2では、「一本の大きな道路（TCP接続）」を使いつつ、そこに「小さな仕切り板（ストリーム）」をたくさん作って、複数の荷物を同時に、しかもバラバラの順番で運んでしまうんです。

もし、あるファイルがすごく大きくても、他のファイルがそれを待つ必要はありません。空いたスペースに別の荷物を詰め込んで、どんどん送り出せばいいのですから。

—

「でも、バラバラに送ったら中身が混ざっちゃわないの？」という疑問が湧きますよね。ここが一番のポイントです。

HTTP/2では、送る荷物（データ）の一つ一つに「タグ（ストリームID）」を付けます。「これは荷物Aの断片ですよ」「これは荷物Bの断片ですよ」という名札のようなものです。

サーバーは荷物を細かく刻んでIDを貼り、高速道路へ放出します。ブラウザ側は、届いた荷物を見て「ああ、これはIDが1だからAのパーツだな、こっちはIDが2だからBだな」と、パズルのように組み立て直すんです。

まるで、バラバラの色のレゴブロックを同時に箱に入れて送っても、受取人が色ごとに仕分けして元の形に組み立て直すようなイメージですね！

—

「本当にマルチプレクシングされているのかな？」と気になったとき、Chromeのデベロッパーツール（F12）を覗いてみてください。

「Network」タブを開き、右クリックで「Protocol」列を表示させると、そこには `h2` という文字が見えるはずです。

HTTP/2は通常、SSL/TLS（HTTPS）上で動きます。NginxなどのサーバーでHTTP/2を有効にする設定は、驚くほどシンプルです。

server {
listen 443 ssl http2; # ここに http2 と書くだけで有効化されます
server_name example.com;

ssl_certificate /path/to/cert.pem;
ssl_certificate_key /path/to/key.pem;

location / {
# ここでリクエストを処理します
root /var/www/html;
}
}

※注：近年のNginxでは、`listen 443 ssl;` と書くだけで自動的にHTTP/2が使われる設定が多いですが、明示的に書くことで「ここから魔法が始まる」と意識できますよね。

—

HTTP/2のマルチプレクシングは、「限られた回線をいかに賢く使い切るか」という先人たちの工夫の結晶です。

難しく聞こえるネットワーク用語も、こうして身の回りの仕組みに置き換えてみると、少しだけ親近感がわきませんか？

次にブラウザでWebサイトを開いたとき、あなたのPCの裏側で、無数の「IDタグ付きパケット」が目にも止まらぬ速さで駆け巡っている様子を想像してみてください。そう考えると、Webサイトを表示するという何気ない動作も、少しドラマチックに見えてくるはずですよ！

それでは、また次回の記事でお会いしましょう！Happy Hacking!