Resource Hints

Webページにおける先読みについて. ユーザがWebページを閲覧している影(バックグラウンド)でこっそりと必要なリソースを読み込むための仕様の一が"Resource Hints"(以後ヒントと記す)です.

ヒントの種類

ヒントには次の5つがあります.

dns-prefetch : DNS解決を先に行いたい場合 (Ajaxなんかに便利)
preconnect : サーバへ事前に接続しておきたい場合 (オリジンが別の時に重宝)
prefetch : リソースを先にキャッシュしておきたい場合 (いわゆるプリロード)
prerender : レンダリングを事前に行いたい場合 (処理が重いので慎重に)
subresource : 優先してキャッシュに読み込ませたいリソースがある場合

メモ

subresourceは現段階でChromeのみ対応しています. preconnectは事前にTCPハンドシェイクまで完了させます. preconnectは比較的新しい仕様ですが,最新のブラウザならば概ね対応している印象です. ただし,あくまでもブラウザへ"ヒント"を伝えるだけなので,必ず先読みが行われる保証はありません. 悪しからず.

ヒントの使い方

ヒントはlinkタグで記述します.

<link rel="dns-prefetch" href="hostname.com" />
<link rel="preconnect" href="hostname.com" />
<link rel="prefetch" href="image.jpg" />
<link rel="prerender" href="nextpage.html" />
<link rel="subresource" href="script.js" />

rel属性にヒント名を,href属性にリソースのURIを書きます. ヒントによってはオプションを記述できますが,ここでは割愛します(http://www.w3.org/TR/resource-hints/を参照). インラインでHTMLに記述するのも良いですが,以下のJavaScriptにより動的に読み込ませるとよりスマートなWebページに仕上がるでしょう.

var hint = document.createElement("link");
hint.setAttribute("rel", "prerender");
hint.setAttribute("href", "products.html");
document.getElementsByTagName("head")[0].appendChild(hint);

ヒントは上手く使えばWebページのパフォーマンス向上に繋がる仕様です. 例えば,多くのユーザがホームページを見た後に商品説明のページを閲覧しているとします. ホームページを表示した時にバックグラウンドで商品説明ページに必要な画像やファイルなどをキャッシュしておくことで,商品説明ページへリンクした時には既に必要な物が揃っているのでレイアウトを行う(レンダリングする)だけで済むようになるわけです. 先にレンダリングまで行えるprerenderもありますが,処理が重くなるため使い所に注意が必要です.

おまけ: ブラウザの助け

Webページの作者はヒントによりリソースを事前に読み込ませることが出来るわけですが,ユーザが最初に訪れるページを先読みすることはどう頑張っても不可能です. しかし心配はいりません. 最近のブラウザはとても親切に設計されているからです. ここではChromeを例に説明します. Chromeはユーザが良く訪れるサイトを覚えているため,Chromeは起動するとそれらサイトのDNS解決を事前に行ったり,TCP接続も準備してくれます. 更に,高頻度で訪れるサイトに関しては事前にレンダリングまで行ってくれるのです. この予測(Prediction)の様子はChromeのアドレスバーに"chrome://predictors/"と入力することで知ることが出来ます. アドレスバーに入力された文字に対し,過去のユーザの動きから可能性のあるアドレスを予測する様子が表形式で表示されます. このスライドにも書いてありました. 以下訳(括弧書きは訳注)"端的に言えばChromeは多くのことをやっている. ただ(ヒントを使うことで)それを助けることが出来る"と. トップページはブラウザに任せて,出来ることだけをやりましょう.

http://www.w3.org/TR/resource-hints/

1450294008105368945 https://www.storange.jp/2015/10/resource-hints.html https://www.storange.jp/2015/10/resource-hints.html Resource Hints 2015-10-19T19:30:00+09:00 https://www.storange.jp/2015/10/resource-hints.html Hideyuki Tabata Hideyuki Tabata

200 200

72 72