「先読み」とは、リンク先のページとの接続を先に済ませておいたり、ページのリソースを先に読み込んでおいたりして、移動先のページを少しでも素早く表示するための指定である。
先読み指定は、以下の4つの「pre」コードが用意されている。
いずれも<head>内に記述し、なるべく上の方に書いておくと、その分少しだけ早く「先読み」できる。
- preconnect（事前接続）
- dns-prefetch（preresolve/事前解決）
- prefetch（事前取得）
- prerender（事前描画）
preconnect（事前接続）
「クライアントとサーバーの間のDNS解決」「TCPのハンドシェイク開始」「TLSトンネルのネゴシエーション」といった ネットワーク接続に必要な動作を「先に済ませておく」指定。
Chromeの「Performance」で「idle（待ち時間）」が長い時に効果的で、1つ指定するだけで0.5秒前後も短縮できる事もある。
「idle（待ち時間）」対策に、ひとまず指定しておくのがオススメ。
<link rel="preconnect" href="https://example.com">dns-prefetch（preresolve/事前解決）
「preconnect（事前接続）」の効果のなかで、「DNSの解決のみ」を先に済ませておく場合の書き方。
<link rel="dns-prefetch" href="example.com">prefetch（事前取得）
ページを表示するためのリソースを、先にダウンロードするための指定。
次にユーザーが表示するであろうページのCSSを読み込んだり、HTMLをダウンロードしておく事ができる。
<link rel="prefetch" href="nextpage.html">prerender（事前描画）※モバイル未対応
次のページを非表示タブに「先に読み込ませておく」指定。
非表示タブですでにページを描画できている状態のため、ユーザーがそのURLのリンクをクリックすると、瞬速でページを表示できる。ユーザーがそのページに行かなければ、自動的にメモリから削除される。
リンク先ページの高速表示として超強力な「先読み指定」だが、ほとんどのモバイルブラウザで未対応である。
「prerender（事前描画）」は、1ページあたり1つだけしか使用できない。
<link rel="prerender" href="nextpage.html">preload
リンク先ではなく「そのページ内で」必要になるものを「先読み」させる指定。
重めのフォントファイルや画像ファイルなどを「早めに読み込んでおいてね」と指定しておくと、少しだけ高速化できる。
<link rel="preload" href="css/css1.css" as="style">
<link rel="preload" href="js/js1.css" as="script">