Speculation Rules ジェネレーター

このツールは、Speculation Rules APIのprefetchおよびprerender設定を構築します。ドキュメントの<head>用に最適化されたJSONを生成し、ナビゲーションのパフォーマンスを向上させます。

設定ガイド

有効なSpeculation Rulesを構築するには、このプロセスに従ってください。

ステップ 1: 戦略の選択

ブラウザが推測されたリソースをどのように処理するかを決定します：

Prefetch: レンダリングを行わずに、バックグラウンドでレスポンスボディをダウンロードします。メモリ使用量を低く抑える必要がある、確率の高いリソースに最適です。
Prerender: バックグラウンドのタブでページをダウンロードし、完全にレンダリングします（JavaScriptを含む）。ナビゲーション時に即座の遷移を提供します。
Prerender (Until Script): DOMとCSSをレンダリングしますが、ユーザーがページにナビゲートするまでJavaScriptの実行を一時停止します。レンダリング速度と計算コストの削減のバランスを取ります。

ステップ 2: トリガーの定義

ルールをアクティブにする条件を設定します：

Document: 現在のページのURLが定義されたパターンと一致したときにアクティブになります。
List: 現在のページのURLが、手動で提供されたリスト内に存在するときにアクティブになります。

ステップ 3: Eagernessの設定

フェッチのタイミングと優先順位を制御します：

Immediate: 最も高い優先順位です。ルールが解析されるとすぐにフェッチします。
Eager: immediateと同一です（現在はエイリアスとして機能します）。
Moderate: ポインターのホバー時（200ミリ秒後）、または明確なポインターダウンイベント時にトリガーされます。
Conservative: 低い優先順位です。ポインターダウン時、またはタッチ開始時にのみトリガーされます。

ステップ 4: 対象リソース

URLパターンまたはCSSセレクターを使用して、プリロードする特定のリンクをフィルタリングします：

Href Matches: これらのワイルドカードパターンに一致するURLを含めます（例: /product/* はproductディレクトリ内のすべてのリンクを対象とします）。
Href Does Not Match: これらのワイルドカードパターンに一致するURLを除外します。
Selector Matches: CSSセレクターで識別されるリンクを含めます（例: .nav-link はナビゲーション要素を対象とします）。
Selector Does Not Match: これらのCSSセレクターで識別されるリンクを除外します。
URLs: プリロードする正確なURLを指定します（Sourceが'List'に設定されている場合のみ必須です）。

実装

生成されたJSONをコピーし、サイトの<head>内の<script type="speculationrules">タグ内に配置します。確認するには、Chrome DevTools (Ctrl+Shift+I) を開き、Applicationパネルに移動して、サイドバーからSpeculation Rulesを選択します。

設定例

以下のパラメータは、すべての製品ページをprerenderします：

Mode: Prerender
Trigger: Document
Eagerness: Moderate
Href Matches: /product/*

このルールは、ユーザーが一致するページにアクセスしたときに、中程度の優先順位（ホバー/インタラクション）で/product/ディレクトリ内のURLをprerenderします。

Speculation Rules ジェネレーター

Speculation Rules Generator

Your Rules

Output