ブラウザ対応状況

• 対応ブラウザ: Chrome、Edge、Opera (Speculation Rules APIをサポートするブラウザ)
• 対応状況の確認: MDN Web Docs - Speculation Rules API] の prefetch key 行を参照

前提条件

• KaizenPlatformのJavaScriptコードが対象ページに実装されていること
• リンク先読み機能が有効化されていること
• 設定条件に合致するリンクが存在すること

設定手順

機能の有効化

1. サイドバーの「サイト改善」から「リンク先読み」を選択します。

   

2. 「リンク先読み機能を有効にする」チェックボックスをオンにします。

   

3. 下記の設定項目を入力後、「保存する」ボタンをクリックします。

注意: デフォルトでは無効になっています。有効化する前に、以下の設定項目を適切に構成してください。誤設定により不要なページや状態変更系URL（例: /logout）を先読みしてしまうと副作用が発生する場合があります。

設定項目

対象ページURL（正規表現）

リンク先読み機能を適用するページのURLパターンを正規表現で指定します。

• 完全なURL（スキーム、ホスト、パス、クエリパラメータ、フラグメントを含む）に対してマッチングが行われます。
  • 例: ^https://example\.com/products/.*$
• 指定パターンに合致しないページでは、リンク先読み機能は動作しません。

先読みを有効にするリンクパターン（ホワイトリスト）

先読みを許可するリンクのURLパターンをワイルドカード形式で指定します。

• /から始まる文字列でURLのパス部分を指定します。
• クエリパラメータ（?以降）やフラグメント（#以降）は評価対象外です。
• 任意の文字列にマッチするワイルドカード*が使用可能です。
  • 例: /products/*, /category/*/items*.html
• 後述のブラックリストのいずれにも該当せず、かつこのホワイトリストのいずれかに該当するリンク先が先読みの対象となります。

先読みを無効にするリンクパターン（ブラックリスト）

先読みを禁止するリンクのURLパターンをワイルドカード形式で指定します。

• ホワイトリストと同様の形式で指定します。
  • 例: /logout*, /admin/*, /api/*
• ブラックリストのいずれか一つでも該当するリンクは対象外となります。
• ホワイトリストとブラックリストの両方に該当する場合、ブラックリストが優先されます。

リンク先読み機能の詳細について（エンジニア向け）

機能の仕組み

この機能は Chrome 等のブラウザに搭載された Speculation Rules API を利用して実現されています。「対象ページURL（正規表現）」に該当するページへのアクセス時に <script type="speculationrules"> タグを動的に埋め込みます。

Chrome をお使いの場合、このタグが埋め込まれたページで DevTools を開いて「Application」タブ→「Speculation loads」→「Speculations」から、対象となるリンク先や先読み状況を確認できます。

先読みが発動する条件

対象要素とトリガー

• デスクトップ: <a> タグや <area> タグにマウスカーソルを重ねた（ホバーした）際に発動します。
• モバイル: リンクをタップした瞬間に先読みが開始され、指を離すと先読みしたキャッシュを使用してページ遷移します。

注意事項

• キーボードの Tab キーでフォーカスした場合は発動しません。
• <form> タグや <link> タグなどは現在対象外です。

先読みされるリンクについて

対象となるリンク

• <a> タグや <area> タグの href 属性で指定されたURLが先読みされます。
• 設定されたホワイトリストのいずれかにマッチするURLのみが対象となります。
• target=_blank 等の別タブで開くリンクについても先読みの対象となります。

対象外となるケース

• href 属性が javascript: や mailto: などの特殊なスキームの場合。
• 設定されたブラックリストのいずれかに該当するURLの場合。

注意事項

• マウスホバー時点で href 属性に記載されたURLが先読みされますので、onclick 等で後から遷移先を変更している場合には効果がありません。
• onclick 属性や ping 属性の動作には影響しません。

リンクパターンの設定について

パス指定の推奨方法

• 推奨: / から始まる絶対パスで指定してください（例: /products/*）
• 非推奨: 相対パスでの指定（全ページで共通設定のため困難）
• 非推奨: 別ホストの指定（制約が大きいため）

ワイルドカード使用方法

• * は0個以上の任意の文字にマッチします。
• パターンは完全一致で評価されます。
  • 例: /example*.htm は /example.htm にマッチしますが、/example.html にはマッチしません。

キャッシュの動作について

Cookie の扱い

• 先読みリクエスト送信時には通常通り Cookie が送信され、レスポンス時には set-cookie による cookie の更新もその時点で行われます。
• リンク先が別ホストの場合、その別ホストで Cookie が未発行の場合のみ先読みされます。

キャッシュの有効範囲と期限

• スコープ: タブごとに独立（他のタブのキャッシュは使用されません）
• 有効期限: 300秒（5分間）固定
• 容量制限: 同時に2つのページまでキャッシュ可能（タブごとに2ページまで）

キャッシュのクリア条件

• ページ遷移が発生した時点でクリアされます。
• SPAのように実際のページ遷移を行わずURLだけ更新する場合はクリアされません。

重複リクエストの防止

• 同一の href 属性を持つリンクは重複してリクエストされません。
• ただし、クエリパラメータやフラグメントが異なる場合は別々にリクエストしてキャッシュされます。

エラーハンドリング

• 2xx以外のステータスコードが返された場合はキャッシュされません。
• エラーが発生したURLは、同一タブ内では再度ホバーしても先読みされません。

キャッシュ制御ヘッダーについて

• レスポンスヘッダーの Cache-Control: no-cache 等のキャッシュ制御は無視されます。
• Vary: Cookie ヘッダーが設定されていても、Cookie変更後でもキャッシュが使用されます。

JavaScript APIとの関係

• fetch() API などのJavaScriptによるアクセスでは、先読みキャッシュは使用されません。
• 同一URLがキャッシュされていても、通常通りリクエストが送信されます。

不具合を起こす可能性のあるリンクについて