Resource Hints

リソースの先読みを行って、より快適なユーザー体験を提供するための機能。記事執筆時点では草案。

イメージとしてはこんな感じ(矢印の色に特に意味は無い):

HTMLのhead内のlinkで利用する方法と、HTTPヘッダーに記載する方法の2通りがある。

HTTPリクエストが発生するpreconnectより先では、合わせてCORScrossorigin属性が指定できる。

HTMLの場合

必要な個数のlinkを記載する。

HTTPリクエストの場合 chrome firefox opera safariedge ie android ios

必要な個数のLink HTTPヘッダーを記載すれば良いが、現状メジャーなブラウザで対応しているものが無い。

1つのLink HTTPヘッダーにカンマ(,)区切りで複数個指定ができる。こちらは現状、一部のブラウザが対応している。
カンマ区切りの例:

Link: <https://example.com>; rel=dns-prefetch, <https://dns.example.com>; rel=preconnect, <https://example.com/next-page.html>; rel=prerender

HTTPリクエストに記載する場合、HTMLと比べて以下のような制限がある。

キーワードの説明 firefox safari edge ie ios

dns-prefetch
ドメインの名前解決を早期に行う。
HTMLの場合:
<link rel="dns-prefetch" href="https://example.com">
HTTPの場合:
Link: <https://example.com>; rel=dns-prefetch
preconnect
名前解決に加えて、TCPハンドシェイク、必要に応じてTLSネゴシエーションを行う。
HTMLの場合:
<link rel="preconnect" href="//example.com">
<link rel="preconnect" href="//cdn.example.com" crossorigin>
HTTPの場合:
Link: <//example.com>; rel=preconnect
Link: <//cdn.example.com>; rel=preconnect; crossorigin
prefetch
リソースをダウンロードするけどレンダリングはしない。類似のものにpreloadがあるが、こちらはprefetchと比べて優先度が高いらしい。
HTMLの場合:
<link rel="prefetch" href="//example.com/next-page.html" as="html" crossorigin="use-credentials">
<link rel="prefetch" href="/library.js" as="script">
HTTPの場合:
Link: <//example.com/next-page.html>; rel=prefetch; as=html; crossorigin=use-credentials
Link: </library.js>; rel=prefetch; as=script
prerender
リソースのレンダリングまでしちゃう。対象がHTMLページならCSSも読み込むし、JavaScriptも実行する。
ただし、種類やプロパティの指定によりレンダリングしなかったり、メモリーを使い過ぎたりCPUを使いすぎたりする場合は、レンダリングしない事がある。
HTMLの場合:
<link rel="prerender" href="//example.com/next-page.html">
HTTPの場合:
Link: <https://example.com/next-page.html>; rel=prerender

JavaScriptでの動的な追加と削除

JavaScriptを用いて、以下のように動的な追加・変更・削除が可能。

var hint = document.createElement("link");
hint.rel = "prefetch";
hint.as = "html";
hint.href = "/article/part3.html";
document.head.appendChild(hint);

追加した時点で対応する処理が行われ(例えばこの場合は/article/part3.htmlファイルのプリフェッチが行われる)、変更した時点で処理内容が変更され、削除した時点で例えば大きな画像の読み込み等の処理は中断される。

指定可能なURL

絶対URLはもちろん、上述のようにスキーム無しのURLでも問題ないし、パス絶対URLでもパス相対URLでも可能。

参考

動作検証ブラウザ

Firefoxは一部対応していると書いてあるが、どうにも対応してるような挙動をしない...