Speculation Rules がプリフェッチへの考えを変えた

この記事は Dries Buytaert 氏の公式ブログ「dri.es」の翻訳記事です。Driesブログの記事一覧よりすべての翻訳記事をご覧いただけます。

長年、プリフェッチには少し抵抗がありました。ウェブサイトを体感的に速くできる一方、訪問者が開くかもしれないページのために帯域、CPU、メモリ、バッテリーを使わせてしまいます。それはどこか無駄で、ひょっとするとちょっと失礼なことのように感じていたのです。

その抵抗感は、もっと深いところにある信念とも結びついています。プリフェッチは、サイトが遅いことのごまかしに使ってはいけない、ということです。不要なJavaScript、トラッキングスクリプト、サードパーティのウィジェット、重いフォント、サイズ超過のアセットに引きずられているサイトが多すぎます。そういう肥大化を隠すためにプリフェッチを使うべきではありません。プリフェッチを検討する前に、まずサイトを軽く速くすることが先決です。

数ヶ月前、HTTPヘッダーアナライザーをアップデートする作業の中で、Speculation-Rules HTTPヘッダーのサポートを追加しました。Speculation Rules APIについて調べていくうちに、自分のブログで試してみようという気持ちになりました。

仕組みはシンプルです。ページがブラウザに対して、どのリンクをプリフェッチしてよいか、またそのタイミングをJSONのルールセットで伝えます。このルールは <script type="speculationrules"> を使ってHTMLに直接埋め込むか、Speculation-Rules HTTPヘッダーで外部ファイルを参照する形で記述できます。

私のブログでは、すべての匿名ページリクエストのHTMLにルールを直接追加しました：

<script type="speculationrules">
{
  "prefetch": [{
    "where": {
      "and": [
        { "href_matches": "/*" },
        { "not": { "href_matches": "/search*" } }
      ]
    },
    "eagerness": "conservative"
  }]
}
</script>

このルールは、/search* 配下のパスを除く同一オリジンのリンクはプリフェッチしても安全だとブラウザに伝えるものです。

eagerness: conservative の設定では、pointerdown または touchstart のタイミングでプリフェッチが発火します。つまり、ユーザーがリンクをクリックまたはタップし始めた瞬間に限り、ブラウザがプリフェッチを開始します。リンクが表示されたタイミングやホバーしたタイミングで発火するような、より積極的なオプションも存在します。

旧来の <link rel="prefetch"> タグでも長年プリフェッチはサポートされていた、と指摘する方もいるかもしれません。そのとおりですが、私はそれをあまり好んでいませんでした。

従来のプリフェッチは、チェックアウトフローやセットアップウィザードの「次のステップ」のように、次に進むページが高い精度で予測できる場合には有効です。

しかし私のブログを含む多くのウェブサイトでは、訪問者が次に何をクリックするかは誰にもわかりません。スマートな予測をする工夫もできますが、それでも所詮は予測です。

そして予測が外れれば、訪問者は結局開かないページのために帯域、バッテリー、コンピューティングリソースを使わされてしまいます。これが何百万ものサイトと訪問者にわたって積み重なれば、投機的なリクエストの総量はかなりのものになります。

では、なぜSpeculation Rulesを導入したのか？私のサイトは静的サイトでなくても既に速い状態にありました。eagerness: conservative を使えば、ブラウザはユーザーがすでにアクションを起こし始めてから動き出します。その時点で、ナビゲーションはもはや漠然とした予測ではなく、ほぼ確実に起きるものです。

Speculation Rulesはバッテリーセーバーモードとデータセーバーモードも尊重します。デバイスのバッテリーが残り少ない場合、メモリが逼迫している場合、またはデータ通信量を節約したい場合は、プリフェッチはスキップされます。

それでも、ユーザーがクリックし始めてからプリフェッチする価値はあるのでしょうか？私はあると思います。eagerness: conservative では、ブラウザが得られるアドバンテージはわずかですが、ゼロよりはましです。

ブラウザはSpeculation Rulesがなくても独自に投機的ローディングを行いますが、それはアドレスバーに入力しているURLの候補のような、確度の高い遷移先に限られます。

一方、ページ上の任意のリンクを勝手にプリフェッチすることはしません。それには正当な理由があります。たとえば /logout をプリフェッチしてしまうと、ユーザーが気が変わってクリックや Enterキーの押下を完了しなくても、ログアウトさせてしまうことになりかねません。

だからこそ、Speculation Rulesが役立ちます。どのパスは安全にプリフェッチでき、どのパスは除外すべきかをブラウザに明示できるのです。

まとめると、Speculation Rulesが私の考えを変えたのは、プリフェッチをより責任ある形にしてくれるからです。プリフェッチしすぎない、早すぎるタイミングでプリフェッチしない、そしてユーザーの意図が明確になったときだけ安全なヒントをブラウザに与える——そういう設計が可能になりました。

By Dries Buytaert

この記事は 「Speculation Rules changed my mind about prefetching」（投稿日：2026-06-05）の翻訳記事です。