Limited support 一部のブラウザのみ対応。使用時はサポート状況を確認すること。

Speculation rules

Experimental: これは実験的な機能です。

本番で使用する前にブラウザー互換性一覧表をチェックしてください。

speculationrules の値を <script> 要素の type 属性に設定すると、要素の本体に投機ルールが入っていることを示します。

投機ルールは JSON 構造の形式をとり、どのリソースがブラウザーによって先読みまたは先行描画されるべきかを決定します。これは投機ルール API の一部です。

メモ: 投機ルールは、 HTTP の Speculation-Rules ヘッダーで参照される外部テキストファイル内で、下記の JSON 表現を使用して定義することができます。 HTTP ヘッダーを指定することは、開発者が文書自体を直接修正できない場合に便利です。

メタデータ・スクリプト

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`http.headers.Speculation-Rules` 実験的	121	121		26.2	121	26.2
DOM API
`prerendering` 実験的 prerendering は Document インターフェイスの読み取り専用プロパティで、この文書が現在投機ルール API によって開始された事前レンダリングの過程にある場合に true を返します。	108	108			108
`prerenderingchange_event` 実験的 prerenderingchange イベントは、事前レンダリングされた文書がアクティブになった（ユーザーがページを閲覧した）ときに発生します。	108	108			108
`activationStart` 実験的 activationStart は読み取り専用プロパティで、文書がプリレンダリングを開始してからアクティブになるまでの時間を表します。	108	108			57
`destination (speculationrules)` 実験的 speculationrules`の値	121	121		26.2	121	26.2
その他
`html.elements.script.type.speculationrules` 実験的 speculationrules の値を要素の type 属性に設定すると、要素の本体に投機ルールが入っていることを示します。	109	109		26.2	109	26.2
`html.elements.script.type.speculationrules.eagerness` 実験的次の一連の文書ルールは、 eagerness を使用して、一致するリンクのセットごとにブラウザーが事前レンダリングを行うべきであることを示しています。	121	121		26.2	121	26.2
`html.elements.script.type.speculationrules.expects_no_vary_search` 実験的 expects_no_vary_search`キー	127	127			127
`html.elements.script.type.speculationrules.prefetch` 実験的プリフェッチ`キー	110	110		26.2	103	26.2
`html.elements.script.type.speculationrules.prerender` 実験的 prerender`キー	105	105			103
`html.elements.script.type.speculationrules.referrer_policy` 実験的 referrer_policy`キー	111	111		26.2	111	26.2
`html.elements.script.type.speculationrules.relative_to` 実験的 relative_to`キー	121	121		26.2	121	26.2
`html.elements.script.type.speculationrules.requires` 実験的 requires`キー	110	110			103
`html.elements.script.type.speculationrules.requires.anonymous-client-ip-when-cross-origin` 実験的 anonymous-client-ip-when-cross-origin`値	110				103
`html.elements.script.type.speculationrules.source_optional` 実験的 source`キーは任意である。	122	122		26.2	122	26.2
`html.elements.script.type.speculationrules.tag` 実験的タグ`キー	136	136		26.2	136	26.2
`html.elements.script.type.speculationrules.target_hint` 実験的 target_hint`キー	138	138			138
`html.elements.script.type.speculationrules.urls` 実験的 urls`キー	109	109		26.2	103	26.2
`html.elements.script.type.speculationrules.where` 実験的ドキュメントソースルールには "where" プロパティが含まれ、これは文書内のどのリンクが一致するかを定義する基準を含むオブジェクトです。実際には、 "where" オブジェクトは、推測ルールが適用されるかどうかを確認するためにページ上のすべてのリンクに対して実行されるテストを表します。	121	121		26.2	121	26.2
`http.headers.Content-Security-Policy.script-src.inline-speculation-rules` 実験的インライン・スペキュレーション・ルール `inline-speculation-rules` ソース表現	110	110		26.2	110	26.2
`http.headers.Sec-Purpose.speculationrules` 実験的 <スクリプトタイプ="speculationrules">`のプリフェッチのための`Sec-Purpose`。	110	110		26.2	110	26.2
`http.headers.Sec-Speculation-Tags` 実験的 HTTP Sec-Speculation-Tagsリクエストヘッダは、推測の原因となった推測ルールの 1つ以上のタグ値を含む。これによりサーバーは、どのルールが推測を引き起こしたかを特定し、潜在的にブロックすることができる。	136	136		26.2	136	26.2
`http.headers.Supports-Loading-Mode` 実験的 HTTP Supports-Loading-Mode 応答ヘッダーを使用すると、応答は、そうでなければロードに失敗する新規の高リスクコンテキストにロードされることをオプトインできます。	109	109			109
`http.headers.Supports-Loading-Mode.credentialed-prerender` 実験的 credentialed-prerender`ディレクティブ	109	109			109
`http.headers.Supports-Loading-Mode.fenced-frame` 実験的 fenced-frame` ディレクティブ	117	117			117

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

HTML

<script type="speculationrules">
{
  "prerender": [{ "where": { "href_matches": "/articles/*" } }],
  "prefetch": [{ "urls": ["/next-page"] }]
}
</script>

ライブデモ

Speculation strategy

Show how rules can tell the browser which navigations are good candidates for prefetch or prerender.

プレビュー全画面表示

Where it helps

Speculation rules work best on predictable navigation paths such as search results or article lists.

プレビュー全画面表示

Guardrails

Speculative loading consumes bandwidth and memory, so use it selectively.

プレビュー全画面表示

実務での使いどころ

Speculation rules の活用

Experimental: これは実験的な機能です。

注意点

一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。

対応ブラウザ

基本構文

ライブデモ

Speculation strategy

Where it helps

Guardrails

実務での使いどころ

Speculation rules の活用

注意点

アクセシビリティ

参考リンク