Speculation Rules による瞬時のページ読み込み

新しい Speculation Rules API でページを瞬時に読み込み、Core Web Vitals を改善する方法を学びましょう

Arjen Karel - linkedin

Last update: 2026-02-07

Speculation Rules API で Core Web Vitals を即座に改善する

一部のページが瞬時に読み込まれるように感じたことはありませんか？それはおそらく、そのページが Speculation Rules を実装しているからです！

Speculation Rules API は、prefetch やさらには prerender を行うことで、マルチページアプリケーション（MPA）における将来のページ読み込み速度を向上させます。開発者は Speculation Rules を設定して、ブラウザに対してドキュメントを prefetch または prerender するよう指示し、より高速な（または瞬時の）ページ読み込みを実現できます。 Speculation Rules は、リソースの prefetch に使われていた `<link rel="prefetch">` や、非推奨となった Chrome 専用機能 `<link rel="prerender">` などの古い手法を置き換えます。

Speculation Rules はドキュメントレベルで動作するため、フルページナビゲーションを伴う MPA に適しています。主に API 呼び出しや部分的なコンテンツ更新を使用するシングルページアプリケーション（SPA）は、内部ルート変更に関してはこの API からあまり恩恵を受けません。ただし、Speculation Rules はランディングページからアプリケーションの初期状態を prerender することで SPA にも恩恵をもたらし、初期読み込み時間を相殺できる可能性があります。

Table of Contents!

Speculation Rules API で Core Web Vitals を即座に改善する
Speculation Rules クイックスタート
Speculation Rules の利点
Prefetch か Prerender か
適切な「Eagerness」の設定 - バランスの取り方
考慮事項 - 注意すべき点
Speculation Rules WordPress コード

Speculation Rules クイックスタート

Speculation Rules についてすでにご存知ですか？素晴らしい！すぐに始められるスニペットをご用意しました。適切なスニペットを選んでページの <head> に配置してください（preload を prefetch に変更したり、 eagerness を変更することもできます）！

<!-- 
   WordPress speculation rules by corewebvitals.io 
   prefetches all internal links
   skips links that match wp-login, wp-admin, wp content 
   skips links that have the nofollow attribute
   skips links that have a questy string for example: /search->
<script type="speculationrules">
{
    "prefetch": [{
        "source": "document",
        "where": {
            "and": [{ "href_matches": "\/*"},{ "not": {     "href_matches": [         "\/wp-login.php",         "\/wp-admin\/*",         "\/*\\?*",         "\/wp-content\/*",     ] }
                },{ "not": {     "selector_matches": "a[rel~=\\"nofollow\\"]" }
                }]
        },
        "eagerness": "moderate"
    }]
}
</script>

<!-- Data-preload triggered speculation rules by corewebvitals.io -->
<script type="speculationrules">
{
    "prefetch": [{
        "source": "document",
        "where": {
            "selector_matches": "a[data-preload]"
        },
        "eagerness": "moderate"
    }]
}
</script>

ヒント: Speculation Rules を素早く作成したい場合は、 Speculation Rules ジェネレーターをお試しください

Speculation Rules の利点

user experience (UX) の向上: コンテンツを予測してプリロードすることで、Speculation Rules は ほぼ瞬時のページ読み込みを実現し、ユーザーにシームレスなナビゲーション体験を提供します。これは、複雑さや JavaScript への依存なしに、従来のマルチページウェブサイトでもシングルページアプリケーションに匹敵するパフォーマンスを実現します。読み込み時間の短縮はブラウジング体験の向上を意味し、ユーザーエンゲージメントの増加やバウンス率の低下につながります。

SEO の優位性: ページ速度の向上は直接的なランキング要因であり、 Time to First Byte の改善は Largest Contentful Paint の改善につながるため、 Speculation Rules の実装は Core Web Vitals を改善し、ページスピードのボーナスをもたらすことは間違いありません。

複雑さの軽減：かつて、ほぼ瞬時のページ読み込みは SPA を使用するか、MPA 向けのカスタム prefetch ロジックを書くことでしか実現できませんでした。
多くのユースケースにおいて SPA の欠点は初期起動時間であり、JavaScript に大きく依存し MPA と比べて複雑さが増すため、かなりの時間がかかることがあります。Speculation Rules にはこれらの問題がありません。これにより、幅広いウェブサイト、特にコンテンツ重視のサイトで高速な読み込みが実現可能になります。
この API はまた、ロジックの多くをブラウザに委譲することで、どのページを prerender するかを決定するプロセスを簡素化します。これは、JavaScript に依存してこれらのチェックを行い、プリロードするページを注入していた従来の方法に比べて大幅な改善です。ブラウザは prerender するかどうかを決定する際に、モバイルデバイスのメモリ不足やバッテリーセーバーモードなどのユーザーコンテキストをネイティブに考慮できます。この動的な適応により、ユーザーリソースの節約が促進され、制約下でもよりスムーズな体験が確保されます。

その他の利点: Speculation-Rules HTTP ヘッダーにより、コンテンツ配信ネットワーク（CDN）を介したデプロイが容易になり、ドキュメントコンテンツを直接変更する必要がなくなります。Document Rules によるきめ細かな制御により、開発者は URL パターンや CSS セレクターに基づいて prefetch または prerender の正確な条件を定義できます。これにより、手動での URL 指定が削減され、サイト全体の Speculation Rules セットが可能になります。「eagerness」設定はスペキュレーションが発生するタイミングを細かく制御し、プリロード速度とリソース消費のバランスを取ります。これにより、不要なプリロードが削減され、リソースの浪費が防止されます。

Speculation Rules のメカニズム

Speculation Rules は JSON 構造を使用して定義され、2 つの方法で実装できます：

インラインスクリプト: メイン HTML ドキュメントの `<head>` または `<body>` 内の `<script type="speculationrules">` タグに JSON を含めます。
HTTP ヘッダー: ドキュメントのレスポンスで `Speculation-Rules` HTTP ヘッダーを使用してルールを配信します。このヘッダーはルールを含む JSON ファイルを指し、HTML コンテンツを直接変更することなく CDN デプロイを容易にします。

JSON 構造は「prefetch」と「prerender」の配列を使用して、各スペキュレーティブローディングタイプのルールを格納します。各ルールは異なるソースを使用できます：URL のリストまたは document rules

urls（URL のリスト）prefetch または prerender する URL の配列。
where（document rules）ページ上のどのリンクを prefetch または prerender すべきかを条件で判断するオブジェクト。

各ルールは以下のプロパティを含むオブジェクトとして定義されます：

requires スペキュレーションに制限を設けるための文字列の配列。現在、有効な文字列は "anonymous-client-ip-when-cross-origin" のみで、クロスオリジンの prefetch がクライアントの IP アドレスを匿名化すべきことを示します。
target_hint ナビゲーション可能なターゲット名のヒントを提供する文字列で、ユーザーエージェントが読み込みプロセスを最適化できるようにします。ヒント以上の規範的な意味はありません。
referrer_policy prefetch または prerender される URL に適用するリファラーポリシー。
relative_to（"list" ソースのみ）"urls" 配列で指定された URL がドキュメントのベース URL に対して相対的か（"document"）、Speculation Rules JSON ファイルの場所に対して相対的か（"ruleset"）を指定します。
eagerness ブラウザが prefetch または prerender をどの程度積極的に行うかを制御します。利用可能な設定は "immediate"、"eager"、"moderate"、"conservative" で、それぞれ異なるトリガーを持ちます。
expects_no_vary_search URL 検索の差異のヒントを提供するために使用される文字列で、開発者がスペキュレーションされた URL が検索パラメータに基づいて異なるレスポンスを持つと予想されるかどうかを示すことができます。

最後に、各ルールには eagerness 設定があり、スペキュレーションをいつ実行するかを定義し、どの URL に対してスペキュレーションを実行するかとスペキュレーションのタイミングを分離できます。 eagerness 設定は list ソースと document ソースの両方のルールで利用可能で、immediate、eager、 moderate、conservative の 4 つの設定があります。

immediate: できるだけ早くスペキュレーションを行うために使用されます。Speculation Rules が検出され次第すぐに実行されます。
eager: 現在は immediate 設定と同じ動作をしますが、将来的には immediate と moderate の中間に位置づけられる予定です。
moderate: リンクの上に 200 ミリ秒間ホバーした場合（またはそれより早い場合は pointerdown イベント時、hover イベントのないモバイルでは pointerdown 時）にスペキュレーションを実行します。
conservative: ポインターまたはタッチダウン時にスペキュレーションを実行します。

Prefetch か Prerender か

Speculation Rules API は、スペキュレーティブローディングの 2 つの主要な形式をサポートしています： prefetch と prerender です。どちらの手法もページ読み込みの高速化につながりますが、複雑さとリソース消費の面で異なります。

Prefetch は、スペキュレーティブローディングの「軽量版」です。ターゲット URL の HTML をダウンロードしてキャッシュしますが、ページやそのサブリソースをレンダリングしません。このアプローチは主に Time To First Byte を改善します。Time to First Byte の改善は、 Largest Contentful Paint や First Contentful Paint などのペイントメトリクスの向上につながります。
Prerender は HTML のダウンロードだけでなく、はるかに多くのことを行います。HTML とすべてのサブリソースをダウンロードし、非表示の不可視タブでページ全体をレンダリングします。このページへのナビゲーション時には、ほぼ瞬時の表示が実現します。この手法は、Time to First Byte の改善だけでなく、LCP 要素のダウンロードとレンダリングも行うため、Largest Contentful Paint をより多くの方法で改善します。Prerender はリソースの寸法が prerender 後にすでに判明しているため、 Cumulative Layout Shift を排除することもできます。

では、どちらが優れているのでしょうか？Prerender と Prefetch のどちらが良いかは、ページと「平均的な訪問者」によって異なります。Prerender は設計上高速かもしれませんが、クライアントとサーバーの両方ではるかに多くのリソースを使用します。Prerender か Prefetch かの選択は以下に依存します：

ユーザーのデバイス性能：メモリが限られたデバイスで訪問する割合が高い場合、 prerender は最適な選択ではないかもしれません。
Prerender または prefetch ルールの具体性。「クリックされる可能性が高いリンクや、コンバージョンする可能性が高いページがあります。」それらのページは prerender ルールの完璧な候補です。他のページは prefetch の方が適しているかもしれません。

CoreWebVitals.io は、特にモバイルデバイスや低速接続において、リソース需要の観点から過度な prerender に対して注意を促しています。Prerender の潜在的な利点は、パフォーマンス低下やリソース浪費のリスクと比較検討する必要があります。

適切な「Eagerness」の設定 - バランスの取り方

どの eagerness 設定を使用するかはサイトによって異なります。非常にシンプルな静的サイトの場合、より積極的にスペキュレーションを行ってもコストはほとんどかからず、ユーザーにとって有益です。より複雑なアーキテクチャと重いページ payload を持つサイトでは、無駄を減らすために、ユーザーからのより確実な意図のシグナルが得られるまでスペキュレーション頻度を下げることを好むかもしれません。

Speculation Rules API の eagerness 設定は、予測されるユーザーナビゲーションに基づいて、ブラウザがいつ prefetch または prerender すべきかに影響を与えます。この設定は、プリロードの利点の最大化とリソース浪費の最小化のトレードオフを提供します。

list ルールのデフォルト eagerness は immediate です。moderate と conservative オプションを使用して、ユーザーが操作した URL に list ルールを制限できます。多くの場合、適切な where 条件を持つ document rules の方がより適切かもしれません。

document rules のデフォルト eagerness は conservative です。ドキュメントには多くの URL が含まれる可能性があるため、document rules に対する immediate や eager の使用には注意が必要です。

eagerness の選択は、ウェブサイトの構造、ユーザーの行動パターン、および開発者によるリソース消費と user experience の利点の評価に依存します。たとえば、シンプルな静的サイトでは "eager" 設定が有効で、読み込み時間の短縮につながります。逆に、複雑なアーキテクチャと要求の厳しいページ payload を持つウェブサイトでは、より明確なユーザーの意図が検出されるまでリソース使用を制限するために、"moderate" や "conservative" などの控えめなアプローチを選択するかもしれません。

eagerness を設定する際、開発者は user experience、リソースコスト、ブラウザの制限を考慮する必要があります。過度なスペキュレーションは、ユーザーの帯域幅、メモリ、CPU に負荷をかけ、特に制約のあるネットワークやデバイスではパフォーマンスを低下させる可能性があります。 Chrome は過度な使用を軽減するために、同時 prefetch および prerender ページ数に制限を設けています。さらに、ユーザーが設定したデータセーバーモード、バッテリー低下状態、ブラウザ拡張機能などの要因が Speculation Rules を上書きし、リソースの節約を優先することがあります。

Speculation Rules の確認とデバッグ

ページ上の Speculation Rules を確認するには、Chrome DevTools を開き、Application パネルに移動して、 Background Services > Speculative Loads > Speculations に進みます。（デバッグしたいページを読み込む前に Speculations ペインを開いてください）このパネルでは以下の情報が提供されます：

成功したスペキュレーションの数。
prerender または prefetch されている個々の URL。
各スペキュレーションのステータス。

Performance パネルの Network トラックでは、DevTools のコンテキストを切り替えることなく、 prerender されたリソースに関連するネットワークアクティビティが表示されます。さらに、 DevTools のコンテキストを prerender されたページに切り替えて、通常のページと同様に検査することができます。

speculative loads inspector devtools

Speculation Rules のモニタリングと分析

Real User Monitoring (RUM): RUM ツールを活用して、実際の user experience を測定します。 Largest Contentful Paint (LCP) などのメトリクスを観察し、Speculation Rules がページ読み込み時間に与える影響を評価します。prerender されたページと prerender されていないページの LCP の改善を確認してください。
A/B テスト: A/B テストを実施して、さまざまな Speculation Rules の設定を比較し、特定のウェブサイトとユーザーベースに最適なセットアップを特定します。

speculation rules rum tracking table coredash

考慮事項 - 注意すべき点

リソース消費: スペキュレーションの過度な使用は、帯域幅、メモリ、CPU 使用に悪影響を与える可能性があります。

ブラウザの互換性: すべてのブラウザが Speculation Rules API を完全にサポートしているわけではないため、実装前にブラウザの互換性を確認してください。

プライバシー: 開発者は、Speculation Rules がユーザーのブラウジングパターンをどのように明らかにする可能性があるかに注意し、適切なプライバシー対策を実装する必要があります。

Speculation Rules API は、ウェブアプリケーションのパフォーマンスと user experience を向上させるための強力なアプローチを提供します。そのメカニズム、利点、考慮事項を理解することで、開発者はこの API を活用してより高速で魅力的なウェブサイトを構築できます。

Speculation Rules WordPress コード

WordPress Core Performance チームは、あらゆる WordPress サイトにワンクリックで document rule サポートを追加できる Speculation Rules プラグインを作成しました。このプラグインは 2 つのグループの設定を提供します：

Speculation Mode: prefetch と prerender から選択します。Prerender は prefetch よりも高速な読み込み時間を実現します。ただし、インタラクティブなコンテンツには prefetch の方が安全な選択かもしれません。
Eagerness: conservative（通常クリック時）、moderate（通常ホバー時）、 eager（わずかな兆候で発動）から選択します。eagerness 設定はスペキュレーティブローディングがトリガーされるタイミングを決定します。