ウェブサイトのHTTP/2化

2015年の2月にHTTP/2の仕様が正式に承認されて、ヴェブサーバやブラウザのソフトウエア側も対応が進んでいるようなので実際に自分のウェブサイト(この「がとらぼ」のこと)もなんとか2015年内にHTTP/2化することに。

既に運用しているウェブサイトがSSL対応済みでウェブサーバのソフトウエアがNginxだと話は簡単。基本的にはNginxをHTTP/2有効でコンパイルし直してから設定ファイルのSSL用listenポートの行の最後にhttp2を追加するだけ。(下の設定例の8行目)

設定例
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
server {
    listen   80;
    server_name example.com;
    return 301 https://$server_name$request_uri;
}

server {
    listen 443 default_server ssl http2;
    server_name example.com;

    ssl_certificate         /usr/local/etc/nginx/ssl/example_com/server_merge.crt;
    ssl_certificate_key     /usr/local/etc/nginx/ssl/example_com/server.key;
    ssl_dhparam             /usr/local/etc/nginx/ssl/example_com/dhparams.pem;
    ssl_protocols           TLSv1.2 TLSv1.1 TLSv1;
    ssl_prefer_server_ciphers       on;
    ssl_ciphers             EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH;
    ssl_session_cache       shared:SSL:10m;
    ssl_session_timeout     10m;

    location / {
        root /usr/local/www/example_com;
        index index.html;
    }                                         
    access_log /var/log/access-example_com.log;
    error_log /var/log/error-example_com.log;
}

ハマったのはssl_ciphersでAESGCMを最初に付けて優先にしてやらないと何故かブラウザでページ表示ができないこと。あすのかぜさん、気付かせてくれて感謝。

ssl_ciphersは上の例が必要最小限でオススメだけど以下のようなのもアリ。

ssl_ciphers AESGCM:HIGH:!3DES:!aNULL:!DH:!DSS:!PSK:!SRP;

結果

HTTP/2化による変化はGTmetrixやWebPagetestでファイル転送状況のWaterfallを見ることで簡単に確認できる。

HTTP/1.1

HTTP/1.1
Waterfall Viewでは左から右にいくほど時間が経過することを示す。左の鍵マークが並んでいるリストが転送されたファイル。15番と47番以降は外部サイトなので無視。
それぞれのファイルの転送開始部分を見ると左上から右下に並んでいる。つまりファイルをチョロチョロと小出しで送っているのがわかる。

HTTP/2

HTTP/2
HTTP/2化したら複数ファイルが同時に転送開始になっている。(10〜27, 28〜40番とか)
ファイルを幾つか纏めてドベッドベッと送るおかげでページの表示にかかる時間が(微妙に)短縮されている。
45番以降は外部サイトなので無視で。

おそらく1ページにたくさんの画像があるなど転送するファイル数が多いほどページが速く表示される効果を実感できるかと。
ただし、HTTP/2では最初の1ファイルの転送が遅い傾向があって、ページ表示が速くなった実感がないのは何故？WebPagetest側が完全に対応してないのかな。
(スミマセン、上の2つのWaterfall View画像では偶然にも最初の1ファイルの転送時間がほぼ同じでした)



がと