【Webパフォーマンス】prefetchとprenderの改良

prefetchとprerender というブラウザが今後必要としそうなリソースを推測してフェッチする仕組みをChromeが改良しようとしているという記事を読んだ

web.dev

prefetch

prefetchは例えば以下のような記述をしておくと、次の画面で必要そうなページやソースを、埋め込んだページの処理に影響を与えることなくアイドル状態のときにフェッチしてくれる

<link rel="prefetch" href="/results/" as="document">

prerender

prerenderは例えば以下のような記述をしておくと、ブラウザは次のページを事前にレンダリングするように指示される

<link rel="prerender" href="/next-page/">

問題点

これらでよく問題にあげられるのは、ユーザーにとっては見る気がないかもしれないリソースもフェッチしていること

このリソースのプリフェッチは余分なバイトを消費するので、大量のメモリが必要になったり、ユーザーが通信量を抑えたい（データセーバーモード）設定をしている場合はそれを考慮しなければならない

そのため、プリフェッチの推測ロジックは重要であり、現在も開発が進められている

サードパーティライブラリ

ヒューリスティックを使用して実行時にプリフェッチする必要があるリソースを決定するquicklinkやguess.jsなどのサードパーティライブラリがある

Quicklinkは、Intersection Observer APIを使用して、ビューポートにあるリンクを判別し、ユーザーが低速接続を使用していない場合で、ブラウザーがアイドル状態のときにそれらをプリフェッチするライブラリ

Guess.jsは、GoogleAnalyticsまたは同様の分析プロバイダーによって生成されたレポートに基づいて予測プリフェッチを実装するライブラリ

Chromeはこれらと同様なことをブラウザでできるように実験、開発中とのこと

Speculation RulesAPI

現在、いくつか提案されている解決策のうち、Speculation Rules APIというのがある

Speculation Rules API使用すると、開発者は指定された基準に一致するページを推測してprefetchまたはprerenderするためのアクセス許可をブラウザーに示すことができる

具体的には以下のようにjson形式でルールを記述する

<script type="speculationrules">
   {
     "prerender": [
       {
         "source": "list",
         "urls": ["/page/2"],
         "score": 0.5
       },
       {
         "source": "document",
         "if_href_matches": ["https://*.wikipedia.org/**"],
         "if_not_selector_matches": [".restricted-section *"],
         "score": 0.1
       }
     ]
   }
</script>

外部リソースでもよいし、scriptタグでもよいがこれを動的につくることができるので、よりよい推測ロジックを通してつくられたルールをブラウザに伝えることができる

まだ、この機能はChromeのフラグをonにしないと利用できないが、将来こういう機能でprefetch、prerenderが行われるかもしれないということがわかった

prefetchに関連した問題

Next.jsのメインコンテンツのレンダリングより先にプリフェッチが走って邪魔になるということが起きるそう

prefetch のトリガーになるタイミングも気をつけないといけない

@takepepeさんの記事が参考になる zenn.dev