Next.js/Nuxt.jsやGatsby.jsを代表として、モダンJavaScriptフレームワークにはSSG（Static Site Generation）機能が搭載されていますよね。
React、Vueなどで構築したソースを事前にサーバーサイドでビルドし、それを静的なファイルとして提供する手法です。ユーザーがページにアクセスしてからバックエンドでの処理を行う時間がなくなるため高速な処理が可能になります。
ですが、静的ファイルを提供するだけならHTML/CSS/JavaScriptを普通にコーディングして公開しているのと同じはずです。しかしSSGを利用したことがある方ならわかると思いますが明らかにSSG機能を利用したサイトの方がページ遷移が高速になります。これはなぜでしょうか？その理由を解明していきます。
HTML標準のprefetchを利用している
いくらモダンなフレームワークを利用していても、SSGのビルドを通った後のファイルはただのHTML/CSS/JavaScriptに過ぎません。よってWeb標準の何らかの機能が活用されていると考えられます。
その機能がprefetch機能です。linkタグを使って以下のように指定するとそのファイルを事前にダウンロードすることができます。
<link rel="prefetch" href="page_b/index.html" />
<link rel="prefetch" href="page_b/style.css" />
<link rel="prefetch" href="page_b/main.js" />
<link rel="prefetch" href="page_b/image.png" />上記のような指定があると、その時点でpage_bのファイルをダウンロードします。そのためpage_bへ遷移する時に本来発生したはずのダウンロード時間がなくなるため高速になるのです。
あるページから遷移する可能性が高いページのファイルを事前ダウロードする指定をするのが効果が高いと考えられます。
prefetchを自動化するライブラリ
そんなprefetchを自動化するライブラリも存在しており、有力なのはGoogle製のquicklinkでしょうか。
CDNからライブラリを読み込み初期化のコードを書くだけで簡単に利用できます。
<!-- CDN経由でquicklinkをダウンロード -->
<script src="dist/quicklink.umd.js"></script>
<!-- 初期化 -->
<script>
quicklink.listen();
</script>ただしライブラリではそのページ上にあるaタグのhrefを自動で拾っているだけのようで、HTMLファイルしかprefetchの対象になりません。
ページ遷移を高速化するには画像ファイルのような容量の大きいファイルをprefetchした方が効果が高いので、ライブラリだけでは意外と不十分かもしれません。
おすすめの使い方 | ページ読み込みの高速化≒ファーストビューの表示を高速化を目指す
以前preloadを使ってファーストビューの画像を優先的に読み込むテクニックを紹介したことがありますが、ファーストビューの表示を高速化することで人間の目にとってのページの高速化を実現するのが良い方法だと考えています。全てを高速にするのは難しい場合もありますからね。
そこで今回のprefetchでも同様に、遷移することが予想されるページのHTML/CSSファイルとファーストビューにある画像を事前ダウンロードするのがおすすめかなと思います。
<link rel="prefetch" href="page_b/index.html" />
<link rel="prefetch" href="page_b/style.css" />
<link rel="prefetch" href="page_b/firstview.png" />実際のサイト開発を考えると全ページにこれを指定するのはなかなか骨が折れますが、そういう方法があることは知っておいて損はないでしょう。例えば記事サイトのようなページの形式がある程度決まっている場合には比較的現実的な範囲で対応ができるかもしれません。
参考
コメント