instant.pageでprefetchを効率化する
instant.pageはjavascriptを利用したウェブサイト高速化技術の一つです。実際にはサーバーや通信回線を高性能化させたりしているものではないのでウェブサイトそのものが高速化しているわけではないのですが、ページ先読み（prefetch）のタイミングを工夫することで体感的にページ表示が早くなったように感じられるようにすることができます。
具体的には、リンクにマウスオーバーした瞬間にリンク先を先読みします。ウェブサイトの読み込みが100ms遅れるとコンバージョンが1%下がるということはネット通販業界では以前からよく知られており、ネット各社はサイトの高速化に余念がありませんでした。
リンクの先にマウスのポインタが来た状態で65msが経過すると50%の確率でユーザーがこのリンクをクリックすることから、このinstant.pageはリンクにマウスオーバーした瞬間からリンク先を先読みしはじめます。この先読みに300msがかかります。スマートフォンでもリンクの先に指をおいてから指を離す（クリックが完了する）までに平均90msがかかっていますが、リンクに指が触れた瞬間から先読みを開始することでこの時間をかせぐことができるというわけです。
instant.pageについての詳しいことはネット上に各種情報が出ているのでそちらをご覧ください。このページでリンクにマウスオーバーした瞬間からクリック完了までの時間を測定することもできます。
instant.page公式ページ
instant.page以外の選択肢
instant.pageの他にもこのような先読み（prefetch）のスクリプトには、PJAXをつかって<body>タグ内を書き換えるという先駆的なシステムだったInstantClick、GoogleなどがサポートしているQuicklink、ややマイナーだが一部で人気があるFlying Pagesなどがあります。
InstantClickはPJAXを使ってtitleタグとbodyタグ内を書き換えるという仕組みは爆速で高機能ですが、SEO的にどうなのかという疑問は残ります。またhead内のmetaタグなどは書き換えてくれませんのでOGP情報なども遷移前のページの情報のままになってしまいます（SEOを気にしなくても良い個人用サイトならInstantClickがベストかも知れません）。
設置の簡単さではinstant.pageが最もおすすめできると思いますので、これを使ってみることにします。なお、AMPではjavascriptが読み込めないので使えません。AMP対応していないサイトでの使用をおすすめします。
pukiwikiにinstant.pageを設置する
instant.pageの設置自体は非常に簡単です。pukiwikiの場合はskinの中のpukiwiki.skin.phpファイルを開いて、いちばん下の</body>の直前にjavascriptの読み込みリンクを貼るだけです。公式サイトのリンクを使ってもよいのですが、公式サイトにあるスクリプトはmin化されていません。自分でmin化しておいてもよいでしょう。
<script src="instantpage.min.js" type="module" defer></script>
CDNを使用することもできます。なお、CDNを使った場合はtype="module" deferを追加するのを忘れないようにしましょう。
<script src="https://cdn.jsdelivr.net/npm/[email protected]/instantpage.min.js" type="module" defer></script>
これだけでinstant.pageは有効になるのですが、これだけではpukiwikiで活用するにはやや不十分です。実はinstant.pageはデフォルトではクエリを含むリンク（つまり/?page=xxxxなどの変数を含むリンク）は先読み対象から除外されています。しかしpukiwikiの場合はlibファイルをかなり改変していない場合はトップページを除くほとんどのページでクエリ変数を含んでしまうので、instant.pageが効くページがほとんどなくなってしまうのです。そこで、設定の変更が必要になります。
クエリ変数を含むリンクや外部サイトへの先読みをオンにする
instant.page - Pages not preloaded
https://instant.page/blacklist
このページを見ると、body内のすべてのクエリ変数を含むリンクでもinstant.pageを有効化したいなら<body>タグにdata-instant-allow-query-stringのattributeを付けよと記載されています。したがって、<body>を<body data-instant-allow-query-string>にするということです。もし特定のリンクだけを対象にしたい場合は<a>タグにdata-instantを個別に付けるという対応も可能ですし、特定のリンクだけを対象から除外したい場合は<a>にdata-no-instantを付けます。
<body data-instant-allow-query-string>
外部ドメインへのリンクもデフォルトでは先読みの対象外とされていますが、data-instantとdata-no-instantで個別に先読みの有無を指定できます。たとえばメインサイトと予約受付ページで別ドメインになっている場合などは予約受付ページへのリンクを個別にdata-instantで先読み対象に含めておく利用法などが考えられます。
<a href="xxxx" data-no-instant>xxxx</a>
ただし、adsenseなどアフィリエイトリンクに対する先読みはリンク広告規約の違反と判断される可能性があるのでご注意ください。
その他の設定
以下はpukiwkiには直接関係はありませんが、instant.pageには様々な設定項目があります。
先読みの強さ（Intensity）を設定する
https://instant.page/intensity
マウスオーバー開始から先読みまでのタイムラグに設定
マウスオーバーした瞬間に読み始めるとマウスポインタがリンクの上を「通過しただけ」で先読みするようになるので通信量の無駄が生じ、サーバーにも負荷がかかります。これを避けるために一定時間マウスポインタがマウスオーバーした状態が続いた時点で先読みを開始するという遅延させた先読みトリガーを設定することもできます。
bodyにdata-instant-intensity="150"のようなattributeを作成すると150ms遅れて先読みを開始します。
<body data-instant-intensity="150">
トリガーをマウスオーバーではなくマウスクリック押下の瞬間にする
デフォルトでは先読みはマウスオーバーの瞬間からとなっていますが、これでは先読みしすぎるという場合には<body>にdata-instant-intensity="mousedown"のattributeをつけるとマウスオーバーの瞬間ではなくマウス右クリックの押下の瞬間を先読みのトリガーとすることができます。先読みのアドバンテージは300msから80msに減ってしまいますが、クリック押下からクリックリリースまでにもまだ80msのタイムラグがあるのでいくらか効果がありますし、無駄な先読みアクセスによる通信量などは抑えることができます。
<body data-instant-intensity="mousedown">
なお、マウスクリック押下の瞬間に先読みを始める設定に関してはバージョン5.0と5.1の間で若干の仕様変更がされているようです。
リンクが画面に入った瞬間に先読みを始める
逆に先読みのトリガーを強める方法としては、マウスオーバーしなくても画面（viewport）にリンクが入った時点で先読みを始めるという方法もあります。bodyにdata-instant-intensity="viewport"のattributeを付けます。画面の小さなスマートフォンでは特に効率が良くなりますが、1画面にリンクがたくさんある（たとえばサイトマップなど）ページを開くと膨大な先読み数が生じるのでサーバーに負荷がかかったり通信量の無駄が生じるので注意が必要です。
<body data-instant-intensity="viewport">
賢く使ってサイトユーザー体験の向上を
prefetchはしすぎてもSEO的にもウェブサイト的にも効果が下がります。prefetchを使っているといえばGoogleやAmazon、そして日本経済新聞の電子版などが有名ですが、Amazonや日経新聞もdns-prefetchなどでDNS解決を先行させることに絞るなど控えめな使い方ですし、Googleもユーザーが最もクリックすることが多いトップ検索結果にしぼって先読みを有効化しています。
サーバーやユーザー端末に負荷をかけてしまっては先読みによる時間短縮が台無しになってしまいますので、サイトの訪問者が最もクリックする確率が高いであろうリンクに絞って有効化してゆくことがサイトユーザー体験の向上のキーポイントになります。
この記事に対するコメント
このページには、まだコメントはありません。
更新日：2020-07-27 閲覧数：1890 views.