ウェブサイト（ホームページ）の読み込み速度は、昨今ますます重要な指標となってきている。
スマートフォンの利用ユーザーは大幅に増え、自信のウェブサイトへのアクセスは半分以上がモバイル経由となっていることだろう（ERPのような業務ソフト以外は笑）。
総務省のデータによれば、10代から40代では80％程度以上がスマートフォンをインターネット接続端末として利用し、また保有率では90%近い。
なお、モバイルはPC端末と比較してウェブサイトの表示に時間がかかる。
しかし、多くのユーザーは最初のページが表示される（読み込まれる）までに3秒以上かかると53％が離脱するようだ。
ここまでで何が言いたいかというと、「ページの読み込み速度は速いほど良いよね」ということだ。
希望したアクションが瞬時に行われるほど、感じるストレスが小さいことは想像に容易い。
しかし、ウェブを構成する要素は数多くあるため、費用対効果を意識することが重要となる。
- 使用言語
- サーバー（インフラ）
- DNS
- フレームワーク
- データベース
- キャッシュ
- コードの記述形式
- 画像サイズ
- 画像の配信形式
- 遅延読み込み
- ページの遷移
などなど、簡単にリスト化しただけでもキリがない。
インフラや言語を変更するのはとてつもないコストがかかる。
最近では、ページ間の移動を非同期に行うテクノロジーがトレンドだが、pjaxやBarbaを利用するのも、プログラムの組み直しが必要となる。
非同期画面遷移とは、タップするとページを読み込まず、ヌルっと入れ替わるようなもの。
良いのはわかったけど、すぐ、簡単に、コストをかけずできる方法がないのだろうか。
ということで、この記事では「超簡単にページ遷移を高速化する方法」について解説する。
instant.pageとは
利用するのは『instant.page』というもの。
ウェブのページ読み込み自体を早くするわけではないが、ページ間の遷移を高速化するというのが正しい。
具体的な仕組みはこうだ。
ユーザーはあるページからあるページへ移動する時、必ずそのURLをマウスでホバーしている。
URLをマウスホバーし、実際クリックするまでに時差があることはイメージできるはずだ。
そこで、マウスホバーをしてからページへ移動するまでの時差を使い、そのURL先のページ情報を先に読み込んでおけば、実際にクリックされたあとの表示時間は、必然的に短くなる。
より簡単に言えば、ユーザの行動を先回りしてチョコっとショートカットしておく感じ。笑
実際、デスクトップユーザーはリンクをクリックする前、そのリンクの上にマウスを置き、65ミリ秒間ホバーすると、2回のうち1回は、そのリンクをクリックする可能性がある。
なお、モバイルでは平均90ミリ秒。
instant.pageは、このロジックに基づきURLをプリロードしてくれる。
導入方法
導入方法は至って簡単であり、html表記の</body>直前に指定のスクリプトを挿入するだけ。
該当のスクリプトはinstant.pageから読み込まれるので、コードを記述する必要はない。
そして、読み込まれるスクリプトは1kBと非常に軽量のため、そのコードが読み込み速度を妨害することは無い。
以下のようにする（執筆時時点のバージョンで記述）。
.
.
.
<script src="//instant.page/5.1.0" type="module" integrity="sha384-by67kQnR+pyfy8yWP4kPO12fHKRLHZPfEsiSXR8u2IKcTdxD805MGUXBzVPnkLHw"></script>
</body>
</html>WordPressでいえば、footer.phpの</body>直前に入れれば良し。
Shopifyでいえば、theme.liquidの</body>直前に入れれば良い。
Google Tag Maneger（GTM）のスクリプトを挿入するようなものだ。
まとめ
同じようなものだと、Googleが公開している「Quicklink」というものもある。
どちらを利用するのも個人の好みだが、私は導入のラクさからinstant.pageを利用している。
もし、node.jsベースのウェブアプリケーションを構築しており、npm経由でインストールしたいのであれば、Quicklinkも良いだろう。
Quicklinkの導入方法は以下の通り。
<script src="https://cdnjs.cloudflare.com/ajax/libs/quicklink/2.0.0/quicklink.umd.js"></script>
<script>
window.addEventListener('load', () => {
quicklink.listen();
});
</script>
</body>instant.page、Quicklinkともに実際のスクリプトを確認したい場合は、各githubリポジトリを参照されたい。
