記事一覧:2010年06月03日

コンテンツのロードを高速化するHTML5の「link prefetching」機能

 keyboardyによると、HTML5にはlink prefetching機能があり、指定したコンテンツをあらかじめfetchしておく機能があるそうだ。

 fetchするコンテンツはLINKタグで指定する。たとえば、次のようなLINK要素をHTML内に記述しておくと、ロード時に「page2.html」がfetchされる。

<link rel="next" href="page2.html">

 また、次のように明示的にprefetchを指定することもできる。

<link rel="prefetch" href="/img/img.jpg">

 この機能はすでにFirefoxでは実装済みで、OperaやChrome、Safariでもすぐにサポートされるのでは、とのこと。Internet Explorerでは2020年代まで利用できないかも;-) だそうだ。

 ちなみにMozillaのlink prefetchingに関するドキュメントによると、HTTPヘッダーでも次のようにしてprefetchするコンテンツを指定できる。

Link: </images/big.jpeg>; rel=prefetch

 さらに、METAタグでも指定できる。

<meta http-equiv="Link" content="</images/big.jpeg>; rel=prefetch">

 また、 Firefoxの場合、http://で始まるURLのみに対応し、https://はセキュリティ関連の理由のためprefetchされない。また、FTPなどもprefetch対象外。prefetchはブラウザがidle状態で、たとえばコンテンツのローディングやダウンロードが行われている間は行われないそうだ。あとはユーザー設定でFirefoxのprefetchを無効にできるとか、prefetchリクエストは「X-moz: prefetch」ヘッダー付きで送信されるとか色々あるが、その辺は上記のドキュメントを参照。