概要

恒例のウェブサイト盆栽の時間だよ。今日もまた、誰からも求められていない、ぼくだけが楽しい、自分のウェブサイトのお手入れをしよう。それがウェブサイト盆栽である。

前回のリリースノートはこれ↓

HTTP/2 対応したよ!

ほら! 対応前 (HTTP/1.1) と対応あと (HTTP/2) の Network tab を見比べると、接続数が大変エコになっているね!!
うん、分かんないよね。ぼくも分かんないので調べて整理するぜ。

HTTP/2 を理解しよう Q&A

ざっくりまとめるよ。 「素人質問で恐縮ですが」 はご遠慮ください。

  • HTTP ってなんだよ : Chrome がリクエストを送って、サーバがレスポンスを返す仕組みのことよ。
  • 1.1 ってなんだよ : Chrome とサーバの接続の中で、ひとつずつリクエスト、レスポンスをやりとりするよ。やりとりするリク、レスが多くなったら接続をいくつも作って同時に取得するよ。タイヘンだね。
  • 2 ってなんだよ : Chrome とサーバの接続の中に、複数のリク、レスを含められるよ。ギュッて詰め込むというより、バラバラにして、先に返せるモノからレスポンスしてくれる感じ。人間だったらスイッチコストが半端なくてイヤだけど Chrome さんは処理できるよ。

この変化を見て取れるのが、画像のこの部分だよ↓。

  • もともと (HTTP/1.1)
    • 図が10段になっており、これはみろりHPのトップページを表示するために全部で10接続作っていることを示す。
    • みろりHPサーバ宛の Connection ID が全部で6種類あるので、10接続のうちの6接続がみろりHP用だ。 (ほかの4接続は外部サービスね。みろりHPは外部サービスもちょっと使っているから。)

  • 対応あと (HTTP/2)
    • みろりHPサーバ宛の Connection ID が1種類だけになっている。めちゃエコ。
    • 図が5段になっており、しかもなんかカラフルになっている。もともとみろりHP宛の6接続に散っていたリクエスト、レスポンスがひとつの接続にまとまったことを示す。

スマートだね!

  • 接続が減るとなにがいいの : そこまでは知らん! なんかエコだろ! (今回はそこまで興味が続かなかった)
  • HTTP/2 にしちゃったら古い HTTP/1.1 の人はアクセスできなくなっちゃうんじゃね : 実際の HTTP/2 対応っていうのはサーバアプリ nginx の設定をこうする↓だけだ。見ての通り HTTP/2 を増やしただけなので、デフォルトである HTTP/1.1 は使えるままだぜ。
# これを
listen 443 ssl;

# こうする
listen 443 ssl http2;

おしまい

あぁ〜、盆栽チョキチョキ楽しいんじゃあ〜。