Resource Hintsとは？
下記4つのAPIから構成される。IEについては10以降にはなるが、大体のブラウザでサポートされている。
- DNS-Prefetch
- Preconnect
- Prefetch
- Prerender
詳しくはResource Hints参照。
DNS-Prefetch
ソーシャルボタンの設置やCDNの利用など、外部サイトからリソースを読み込む場合、「DNSルックアップ（ドメインをIPアドレスに変換すること）」が複数発生します。下記のように指定することで、あらかじめドメインの名前解決を行うことが可能です。
<link rel="dns-prefetch" href="//example.com">
参考
DNSプリフェッチにより実際に高速化された例など、下記サイトにかなり詳しく書いてあります。
ソーシャルメディアの読み込みはDNSプリフェッチのまとめ設定がお得 | ゆっくりと…
<head>内でまとめて設定しておくと良いと思います（下記scriptは参考サイト参照）。
(function(document) {
var servers = [
/* evernote */
"static.evernote.com"
/* pocket */
,"d7x5nblzs94me.cloudfront.net"
,"widgets.getpocket.com"
/* mixi */
,"img.mixi.net"
,"static.mixi.jp"
,"plugins.mixi.jp"
/* google analytics, google +1 */
,"oauth.googleusercontent.com"
,"ssl.gstatic.com"
,"accounts.google.com"
,"apis.google.com"
,"www.google-analytics.com"
/* facebook */
,"www.facebook.com"
,"s-static.ak.facebook.com"
,"static.ak.fbcdn.net"
,"static.ak.facebook.com"
,"connect.facebook.net"
/* twitter */
,"twitter.com"
,"cdn.api.twitter.com"
,"p.twitter.com"
,"platform.twitter.com"
/* hatena */
,"cdn-ak.b.st-hatena.com"
,"cdn.api.b.hatena.ne.jp"
,"b.st-hatena.com"
/* zenback */
,"web-jp.ad-v.jp"
,"w.zenback.jp"
], i, e, link = document.createDocumentFragment();
for (i = servers.length-1; i >= 0; i--) {
e = document.createElement('link');
e.setAttribute('rel', 'dns-prefetch');
e.setAttribute('href', '//' + servers[i]);
link.appendChild(e);
}
document.getElementsByTagName('head')[0].appendChild(link);
}(document));
Preconnect
DNSの名前解決に加え、TCPコネクションまで貼っておく。
<link rel="preconnect" href="//example.com">
<link rel="preconnect" href="//cdn.example.com" crossorigin>
Prefetch
あらかじめ取得したいリソースが静的にアクセス可能な場合、Prefetchを使うことでキャッシュに格納させ、リソースの読み込みを高速にします。
<link rel="prefetch" href="//example.com/next-page.html" as="html" crossorigin="use-credentials">
<link rel="prefetch" href="/library.js" as="script">
Prerender
linkタグのrel属性でURLを指定することで、Webページを事前に読み込ませ、次ページを高速に表示します。
<link rel="prerender" href="//example.com/next-page.html">
※ちなみに1ページしか指定できません
確認方法について
Chromeの開発者ツールが開いていると動作しないので閉じます。
事前レンダリングが実際に行われているかは、Chromeで「chrome://net-internals/#prerender」と打つことで確認が可能。
事前レンダリング DEMO
※画像はキャッシュされないようにしています
また、Chromeのメニューから「その他のツール」→「タスク マネージャ」でも確認ができます。
どんなケースで使えるの？
ユーザーが次に移動すると考えられるページURLを指定すると良い。
・フォームの入力画面→確認画面
・ブログの一覧・詳細→トップページ
などなど。バックグラウンドで事前取得するとは言え、JavaScriptを実行する訳ではないので、Googleアナリティクスで開いていない次ページをPV計上、などはされないので安心。
デメリットは？
・バックグラウンド（別タブ）で処理しているため、ネットワーク帯域を消費する。
・読み込み時にアニメーションするようなページの場合、開くとアニメーションが終わっている可能性がある。
・スマホユーザーのデータ使用量を無駄に消費する可能性がある。
大手の事例
ここで終わってもつまらないので、大手サイトの利用例を見てみましょう。
<link rel="dns-prefetch" href="https://pbs.twimg.com">
<link rel="dns-prefetch" href="https://t.co">
<link rel="preload" href="https://abs.twimg.com/k/ja/init.ja.640d0656a56931310909.js" as="script">
<link rel="preload" href="https://abs.twimg.com/k/ja/16.commons.ja.747d52f46f99a6a58506.js" as="script">
<link rel="preload" href="https://abs.twimg.com/k/ja/7.pages_home.ja.6c89e737b2894bdc15cd.js" as="script">
<link rel="preload" href="https://www.facebook.com/rsrc.php/v3/yf/r/JS-dyZdNSwf.css" as="style" crossorigin="anonymous" />
<meta http-equiv="x-dns-prefetch-control" content="on">
<meta http-equiv='x-dns-prefetch-control' content='on'>
<link rel='dns-prefetch' href='//images-fe.ssl-images-amazon.com'>
<link rel='dns-prefetch' href='//m.media-amazon.com'>
<link rel='dns-prefetch' href='//completion.amazon.com'>
<link rel="dns-prefetch" href="https://a0.awsstatic.com" />
<link rel="dns-prefetch" href="//d0.awsstatic.com" />
<link rel="dns-prefetch" href="//d1.awsstatic.com" />
DNS-Prefetchは各社よく使っていますね。<meta http-equiv='x-dns-prefetch-control' content='on'>はブラウザにDNS Preftchを有効化させる指定です。
Prerenderについては、Googleでサイト名を検索した時くらいしか見つけられませんでした。大体の場合で指定したサイトが一位に表示され、そのサイトを事前レンダリングしておくのは理にかなっていることと思います。
参考リンク
プリレンダリングとプリフェッチのサポート (Windows)
resouce hintsとpreloadを使ってリソースの取得を最適化する | 69log