preconnect

prebrowsing シリーズ、今回は preconnect.

TFO でも少し触れたが、これは dns-prefetch と似た感じで、
実際の TCP コネクションを先に貼っておくというもの。

HTTP に必要な DNS + 3WH
HTTPS に必要な DNS + 3WH + TLS

実装されてれば、これらを丸っと削減できる。これは結構でかい。

使いどころとしては、まだ実際の URL まではわからないが、ドメインレベルではわかっている場合に、先に繋いでおくのに利用できる。

もし接続するホストだけでなく URL までわかっているなら、 prefetch や prerender などを使うことができる。

API

API は resouce-hints に定義されている。
Link タグか、 Link ヘッダに書く。

<link rel="preconnect" href="//example.com">
<link rel="preconnect" href="//example.com" crossorigin>