Speculation Rules API 入門 - SPAでなくてもページ遷移を一瞬にする

ページ遷移を速くする、というと「SPA にしてクライアントサイドルーティングで…」という話になりがちです。でも、普通の複数ページサイト（MPA）でも、遷移をほぼ一瞬にする標準的な方法があります。それが Speculation Rules API です。

仕組みはシンプルで、「次に読まれそうなページを、ブラウザにあらかじめ取得・描画させておく」。ユーザーがリンクをクリックした時には、もう準備が終わっている——という先読みです。この記事では、prefetch と prerender の違い、先読みの積極度（eagerness）、安全に使うための落とし穴を整理します。

仕組み: speculationrules スクリプト

使い方は、<script type="speculationrules"> というJSON を埋め込むだけです。HTML に置けば、ブラウザがそのルールに従って先読みします。

<script type="speculationrules">
{
  "prerender": [{
    "urls": ["/next-article"]
  }]
}
</script>

JavaScript フレームワークは不要で、静的な HTML にもそのまま置けます。MPA でも効くのが嬉しい点です。

prefetch と prerender の違い

先読みには2段階あります。ここを取り違えると効果も副作用も変わります。

prefetch は「リソースだけ先に取る」、prerender は「裏でページを丸ごと立ち上げておく」。prerender のほうが体感は劇的ですが、裏でページが本当に動くぶんコストと副作用も大きくなります（後述）。

eagerness: どれだけ積極的に先読みするか

やみくもに全部先読みすると帯域もメモリも食います。そこでeagerness（積極度）で「いつ先読みするか」を制御します。

上の数値は主にデスクトップの目安で、モバイルではビューポート基準など挙動が異なります。immediate や eager は速いぶん無駄打ちが増え、conservative は確実だが先読みの猶予が短い、というトレードオフです。既定値はdocument rules は conservative、list rules は immediate です。

list rules と document rules

ルールの書き方は2種類あります。

list rules: URL を直接指定

「次はこれ」と分かっているページ（記事末尾の次の記事、購入フローの次の手順など）を明示します。

<script type="speculationrules">
{
  "prerender": [{
    "eagerness": "moderate",
    "urls": ["/checkout/step-2"]
  }]
}
</script>

document rules: セレクタ/パターンで対象を選ぶ

ページ内のリンクから、条件に合うものを動的に先読み対象にします。where と href_matches でパターン指定します。

<script type="speculationrules">
{
  "prerender": [{
    "where": { "href_matches": "/blog/*" },
    "eagerness": "moderate"
  }]
}
</script>

「ブログ記事リンクを、ホバーしたら先読み」のような運用がこれで書けます。ユーザーが触れそうなものだけ moderate で先読みする、という現実的なバランスが取りやすい書き方です。

落とし穴と注意点

体感は劇的ですが、prerender は「裏でページが本当に動く」ことを忘れると事故ります。

そのほかの注意点:

• リソースを消費する: 帯域・メモリを使う。Chrome は prerender の同時実行数に上限を設けている（immediate の list rules で最大10件、それ以外は2件など。prefetch は別枠で上限が異なる）
• 同一オリジンが基本: 既定では同一オリジン中心。クロスオリジン/クロスサイトには追加の条件がある
• あくまでヒント: prerender はプログレッシブエンハンスメントとして扱う。先読みされなくても普通に動く作りにしておく

ブラウザ対応

• Chrome 109以降 / Edge 109以降で prerender に対応
• Firefox は非対応、Safari はフラグ付き（要確認）

未対応ブラウザでは単に「先読みされない（＝普通の遷移）」だけなので、入れて損のない最適化です。対応ブラウザのユーザーだけが速くなります。

どこで効くか

• ブログ: 「次の記事」「関連記事」を moderate で先読み（このブログでも検討に値します）
• EC: 商品一覧→詳細、カート→購入フローの次ステップ
• LP: CTA の遷移先を先読みして、クリック後を一瞬に

View Transitions API と組み合わせると、「一瞬で表示＋なめらかな切り替え」というネイティブアプリ級の遷移体験になります。サーバー側のキャッシュ設計と合わせれば、先読みのコストも抑えられます。

まとめ

• Speculation Rules API は <script type="speculationrules"> の JSON で次のページを先読みする標準機能。SPA でなくても効く
• prefetch（リソースだけ）と prerender（裏で完全描画＝ほぼ一瞬）の2段階。prerender は体感最強だがコスト大
• eagerness（immediate / eager / moderate / conservative）で積極度を制御。既定は document=conservative、list=immediate
• list rules（URL直接）と document rules（where/href_matches でパターン指定）
• prerender は JS が走るのでアナリティクス二重計上に注意。同時実行上限・同一オリジン基本・あくまでヒント
• Chrome/Edge 対応、Firefox 非対応・Safari はフラグ付き（要確認）。入れて損のない最適化

「遷移を速くするには SPA」という思い込みを外してくれるのが Speculation Rules です。MPA のまま、HTML に数行足すだけで、クリック後の待ち時間を消せます。

参考リンク

• Prerender pages（Chrome for Developers）
• Speculation Rules（MDN）
• View Transitions API ガイド（当ブログ）
• CDN の Cache-Control / s-maxage 実践（当ブログ）
• Next.js App Router（当ブログ）