本記事は、こちらの記事を参考にまとめています。
Prefetchとは
ユーザーが次に訪問するページを開発者がわかっている場合、次のページの準備しておいたら早くない？みたいな。前もって準備できるものはしておく、そうすれば処理早いよね、要は先読みするってこと。
ここでは、先読みする3つの方法があります。
- DNS Prefetching
- Link Prefetching
- Page Prefetching / Prerendering
DNS Prefetching
DNSとは、ホスト名をIPアドレスに変換するプロトコル。いわゆる名前解決と呼ばれる仕組み。例えば、ページの中にFacebook/Twitterウィジェット、google analyticsなど、外部URLからリソースを取得する要素がある場合、ブラウザはdocumentの上部から解釈し、外部URLを見つけた時点で外部URLへリクエストを送ります。この時に、前もって名前解決を済ませておけば、どこにリクエストするのかがわかっているから処理するのが早いよね、ってこと。
対応していないブラウザはdns-prefetchの記述は無視されるため、記述していても害はない。
<link rel="dns-prefetch" href="//somewidget.example.com">
Link Prefetching
ユーザーが次に訪問する可能性が高いページを開発者がわかっている場合、リソースを前もって取得しておくことができる。ただし、JSやCSSなどキャッシュ可能なリソースに限られる。
現在ページのリソースをダウンロードしている最中に、指定した次のページで使用するリソースもダウンロードされるため、現在ページのリソースの表示速度に影響するかは要調査。
<link rel="prefetch" href="//example.com/future-image.jpg">
Page Prefetching / Prerendering
指定したページのCSSを読み込み、JSを実行、ページ全体の不可視バージョンを作成する。効果の程は要調査。
<link rel="prerender" href="//example.com/future-page.html">
参考サイト
https://www.sitepoint.com/lightning-fast-websites-prefetching/
https://www.suzukikenichi.com/blog/dns-prefetching/