リンク先のページを高速表示させるには？先読み指定ざっくりまとめ

リンクの移動先のページを高速表示させたい時に使える「先読み」指定。

ここで言う「先読み」とは、リンク先のページとの接続を先に済ませておいたり、ページのリソースを先に読み込んでおいたりして、移動先のページを少しでも素早く表示するための指定です。

ここでは、そんな「先読み」指定のいくつかを、自分用のメモを兼ねてざっくりとまとめています。

難しい事はおいといて、とりあえず効果と書き方だけ確認したいとき向けです！

詳しくは知りたい場合は、こちらの記事が参考になると思います。

参考: ページを1秒以内に表示するための最新技術、そしてSEOの未来（Web担当者Forum）

まずはページのパフォーマンスを確認する

1つのウェブページを表示するまでには、見えないところでいくつかの動作があります。

おおまかに「接続→取得→描画」といった流れで、それぞれの動作で効果のある「先読み指定」も違います。

どの動作で時間がかかっているか調べるには、Chromeのデベロッパーツールが便利です。

英語なのでちょっととっつきにくいですが、ページ表示のパフォーマンスを確認する事ができます。

パフォーマンスを確認したいページを開いて、Chromeのデベロッパーツールを開いて「Performance」タブをクリック。

※私は「Online」タブと勘違いして探し回っていたのでご注意を！

再読み込みアイコンをクリックするとパフォーマンスの計測が始まります。

ここでどの動作を改善したいかを確認しておくと、ぴったりの「先読み指定」も判断しやすいと思います。

先読み指定まとめ

ここで紹介している指定は、以下の4つの「pre」コードです。

preconnect（事前接続）
dns-prefetch（preresolve/事前解決）
prefetch（事前取得）
prerender（事前描画）

移動先のページではなく、そのページ内で必要になるファイルを先読みしておく「preload（事前ダウンロード）」も、ついでにまとめてあります。

書く場所は、全て「head」内。

なるべく上の方に書いておくと、その分少しだけ早く「先読み」できるようです。

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">

PC向け外部サービスも

ここまでは自分でHTMLファイルに「先読み指定」を書く方法を見てきましたが、「先読み指定」をカンタンに実装できるサービスもあります。

「instant」は、リンクに「カーソル乗った時点で」ページをプリロードする事で、表示速度を上げるサービスです。

スマートフォンではタップなので効果は少ないかも知れませんが、パソコンユーザーの多いサイトでは効果的かも知れません。

参考： instant

下記のHTMLスニペットを「/body」タグの直前に設置するだけで対応できる手軽さが魅力です。

<script src="//instant.page/2.0.0" type="module" integrity="sha384-D7B5eODAUd397+f4zNFAVlnDNDtO1ppV8rPnfygILQXhqu3cUndgHvlcJR2Bhig8"></script>