モダンなブラウザは将来必要になるであろうDNS解決やコンテンツのダウンロードを先読み（prefetch)する機能があります。実際に必要になる前に先読みのヒントをブラウザに渡すことによって、DNSルックアップやファイルのダウンロードにかかるユーザの待ち時間を減らし、快適に閲覧してもらえるわけです。
プリフェッチの種類
プリフェッチには次のようなものがあります。
- dns-prefetch – ドメインの名前解決
- prefetch – リソース（ファイル）をキャッシュする
- subresource – より優先的なprefetch
- prerender – バックグラウンドでレンダリングまでする
基本的な使い方
方法1 LINK要素をHEAD要素に含める
<link rel=”prefetch” href=”//example.com/big-image.jpg”>
rel属性に”prefetch”や”prerender”などを指定し、href属性にも先読みしたいリソースのurlを指定したLINK要素を<head>に含めます。なお、LINK要素は必ずHEAD内に置かなければならないそうです。
注記
<link> タグは head 要素内にのみ置けます。ただし、<link> は複数置くことができます。
方法2 HTTPのheaderにLinkを含める
Link: </images/big.jpeg>; rel=prefetch
また、ほかのHTTP headerと同じくmeta要素をheadに含めても良さそうです。
<meta HTTP-EQUIV=”Link” CONTENT=”</images/big.jpeg>; rel=prefetch”>
prefetchのメリット・デメリット
Some rights reserved by transCam
メリット
コンテンツロード待ち時間の減少により、ユーザ体験が向上します。例えば2013年の上位1000サイトの平均ページサイズは1246KBでした。これは2010年のほぼ倍にあたります。このようにページがよりリッチになっていくなかで、特にモバイルのような回線環境では、prefetchによるキャッシュの恩恵は大きいのではないでしょうか。
The average web page has almost doubled in size since 2010より
デメリット
Some rights reserved by andrewfhart
prefetchでリソースをダウンロードする場合、当然、ユーザの帯域を食い合うことになります。ブラウザはprefetchの優先度を低く扱い、ほかの（現在のレンダリングに必要な）ダウンロードが終わってからprefetchのダウンロードを始めますが、ひょっとしたら別のソフトウェアが既に帯域を利用しているかもしません。prefetchにより大きな帯域を消費すると、他のソフトウェアの動作に影響が出るかもしれません。
一方、別のアプリケーションがネットワークを使っている場合は、Mozilla のリンクの先読みはその他のアプリケーションと回線容量を奪い合います。将来的には、ネットワークのアイドル時間を監視するオペレーティングシステムのサービスを利用して、この問題を解決したいと思っています
もちろん、prefetchなど以外にもアクセス解析コードなど現在のレンダリングに（直接）関係ない通信は普通に利用されているわけですが。
Some rights reserved by Irita Kirsbluma
また、モバイルなど通信量によって制限がある回線では、勝手に先読みするprefetchはユーザにとって迷惑になるかもしれません。無駄な通信にならないように、どのリソースが将来必要になるのか、しっかりと考慮しなければなりませんね。
画像 slavik_V