Speculation Rules APIを安全に試す｜prerender失敗をDevToolsで調べる

Speculation Rules APIのprerender成功・失敗をDevToolsで確認するアイキャッチ Webパフォーマンス・先読み
カテゴリー
Webパフォーマンス・先読み
公開日
2026.09.26

はじめに

Speculation Rules APIは、次に開きそうな文書をprefetchまたはprerenderできます。prerenderは取得だけでなく非表示状態でページを構築するため、遷移時に即座に表示できる可能性があります。

一方、対象ページが先に実行されるため、アクセス解析、購入、既読化、音声再生などの副作用を通常表示と同じタイミングで行うと問題になります。この記事では2ページの最小例を作り、Chrome DevToolsで成否を確認します。

必要環境とファイルの準備

HTMLとJavaScriptの基本が分かる人向けの検証です。Chrome、テキストエディター、ローカル配信用のPython 3を用意します。ここでは、同じフォルダーにindex.htmlとnext.htmlの2ファイルをUTF-8で保存します。拡張子が.html.txtにならないよう注意してください。

最小のルール

次をindex.htmlとして保存します。

<!doctype html>
<html lang="ja">
<meta charset="utf-8">
<title>Speculation Rules start</title>
<a href="/next.html">次のページ</a>

<script type="speculationrules">
{
  "prerender": [{
    "urls": ["/next.html"],
    "tag": "next-page-test"
  }]
}
</script>
</html>

source: "list"は現在の構文ではurlsから判断できるため不要です。JSONなのでコメント、末尾カンマ、単一引用符は使えません。

対象ページの副作用を遅らせる

次をnext.htmlとして保存します。activationは、先に裏側で作られていたページが実際の遷移先として表示されることです。その後にだけ処理します。

<!doctype html>
<html lang="ja">
<meta charset="utf-8">
<title>Speculation Rules target</title>
<h1>次のページ</h1>
<p id="result">実表示を待っています</p>
<script>
function startAfterActivation() {
  document.querySelector("#result").textContent = "実表示後の処理を開始";
  console.log("実表示後の処理を開始");
  // この例では表示とログだけ。外部への送信や更新は行わない。
}

if (document.prerendering) {
  document.addEventListener(
    "prerenderingchange",
    startAfterActivation,
    { once: true },
  );
} else {
  startAfterActivation();
}
</script>
</html>

ページ構築に必要な読取まで全部止める必要はありません。利用者が遷移していないのに外部状態を変える処理を分離します。サーバー側もGETで購入や削除を行わない設計が前提です。

なお、activationは音声の自動再生許可を意味しません。音声再生などにユーザー操作が必要な場合は、別途再生ボタンを用意します。

ローカルサーバーで開く

2ファイルを保存したフォルダーでターミナルを開き、Windowsでは次を実行します。

py -m http.server 41730 --bind 127.0.0.1

macOS・Linuxではpyの代わりにpython3を使います。Pythonコマンドが見つからない場合は、Python 3の導入とコマンド名を確認してください。ポートが使用中なら別の番号を選び、ブラウザ側のURLも同じ番号にします。

Chromeのアドレスバーへhttp://127.0.0.1:41730/を入力します。ファイルをダブルクリックしたfile:の画面では検証しません。「次のページ」リンクが表示されれば起動できています。サーバー停止はターミナルでCtrl+Cです。このサーバーはローカル検証用で、本番公開には使いません。

DevToolsで候補を確認する

  1. 起点ページでDevToolsを開く
  2. Applicationパネルを開く
  3. Background services内の「Speculative loads」を選ぶ
  4. Speculationsでrule setと候補URLを見る
  5. prerendering中、ready、failureなどの状態と失敗理由を見る

prefetchはNetworkパネルでも確認しやすい一方、prerenderは別rendererで動くため、起点ページのNetworkパネルだけでは判断できません。Speculative loadsを基準にします。

対象ページをデバッグする

DevToolsの上部にprerender対象を選ぶUIが表示される場合、対象rendererへ切り替えてElements、Console、Networkを確認します。通常ページのConsoleだけを見て「コードが動いていない」と判断しないでください。

遷移後は、prerenderされたページがactivationされたか、途中で破棄され通常navigationになったかを確認します。

const navigation = performance.getEntriesByType("navigation")[0];
console.log({
  activationStart: navigation?.activationStart,
  prerendered: (navigation?.activationStart ?? 0) > 0,
});

activationStartはPerformanceNavigationTimingの値です。値が0より大きい場合、prerenderからactivationされた判断材料になります。

上のコードは「次のページ」へ遷移した後、DevToolsのConsoleで実行します。起点の候補がReadyになり、クリック後のページでSuccessと正のactivationStartを確認できれば、この遷移でprerenderが採用されています。表示後のdocument.prerenderingがfalseでも正常です。「現在は先読み中でない」という意味であり、先読みされなかった証拠ではありません。

よくある失敗

  • JSON構文エラー
  • 対象URLが404、redirect、認証要求
  • Cross-origin prerenderの要件を満たさない
  • 対象ページがダウンロードや利用できないAPIを開始する
  • ブラウザの節約設定、拡張機能、リソース制約で中止
  • ruleのeagernessとユーザー操作が候補条件を満たさない
  • CSPのscript-srcがinline speculationrulesを許可しない

prerenderはヒントであり実行保証ではありません。失敗時も通常navigationが正しく動くことが必須です。

document ruleで対象を広げる

多数のリンクを列挙する代わりにdocument ruleを使えます。

<script type="speculationrules">
{
  "prerender": [{
    "where": { "href_matches": "/articles/*" },
    "eagerness": "moderate",
    "tag": "article-links"
  }]
}
</script>

広いルールは通信・CPU・メモリを余分に使う可能性があります。まず少数URLで効果と副作用を検証し、実際の遷移確率が高い範囲だけに広げます。

SPAでの注意

Speculation Rulesはブラウザが行う文書navigation向けです。SPA内のroute変更は通常、同じ文書内でデータとDOMを更新するため、そのroute自体をprerenderする仕組みではありません。SPAの初期文書を前ページからprerenderすることはできますが、内部routeのデータ先読みはアプリ側で別に設計します。

動作確認

  • rule setにJSONエラーがない
  • 対象URLと除外URLが意図通り
  • activation前に分析・更新・音声などが走らない
  • activation後に処理が1回だけ始まる
  • prerenderが中止されても通常遷移できる
  • ログイン済み／未ログイン、PC／モバイル幅で確認する
  • 通信量とCore Web Vitalsを実環境で比較する

トラブル対処

  • 候補がない：Speculative loadsでJSON構文、URL、CSP、リンク条件を確認します。
  • readyにならない：failure reasonを基準にredirect、認証、cross-origin要件を確認します。
  • activationStartが0：通常navigationです。prerender成功と取り違えず失敗理由を調べます。
  • DevToolsによってprerenderが無効と表示される：自動操作やデバッグ接続の影響を切り分けます。接続を外した通常のChromeタブで起点ページを開き直し、候補がReadyになってからリンクをクリックします。失敗理由を確認せず、記事のコードが原因と決めつけないでください。

まとめ

Speculation Rules APIは、記述しただけでは効果を証明できません。document.prerenderingで副作用を遅らせ、DevToolsのSpeculative loadsで候補、失敗、activationを確認します。通常遷移を壊さず、実測で効果があるページだけへ適用します。

参考リンク

タイトルとURLをコピーしました