コンテンツにスキップ

推測

ベータ

推測は、最も可能性の高い次のナビゲーションを事前取得することによって、ウェブページのパフォーマンスを向上させるためのツールです。

利用可能性

Free Pro Business Enterprise

Availability

Enabled by default

Yes

Yes

Yes

要件

推測は以下の条件下で機能します：

  • Cloudflareで推測機能が有効になっていること。
  • ウェブページ訪問者のブラウザがChromiumベースのブラウザバージョン121以上であること。
  • 事前取得が要求されるウェブページがキャッシュの対象であること。
  • 事前取得が要求されるページがWorkerを呼び出さないこと。

推測ルールAPIに関する詳細は、Chromeのドキュメント ↗を参照してください。

推測とは？

推測の全体的な目標は、ユーザーがナビゲートする前にウェブページをブラウザにダウンロードしようとすることです。

Cloudflareは、推測ルールAPI ↗を活用して、ブラウザに将来のナビゲーションの事前取得を検討させることによってウェブページのパフォーマンスを向上させます。推測は、ウェブサイトで最初に訪問されるページの読み込み時間を改善することはありませんが、同じサイト内でナビゲートされる後続のウェブページの読み込み時間を改善することができます。

ブラウザがナビゲートする可能性が高いと考えるページを事前取得することによって、推測はLargest Content Paint ↗（LCP）、Time to First Byte ↗（TTFB）および全体的なページ読み込み時間などの重要な指標を向上させることができます。

推測の仕組み

Cloudflareの推測機能が有効になっていると、Speculation-RulesというHTTPヘッダーがウェブページのレスポンスに追加されます。このヘッダーの値は、意見を持った推測ルールの設定をホストするURLです。この設定は、ブラウザに将来のナビゲーションの事前取得をconservative eagerness ↗で検討するよう指示します。

設定は次のようになります：

{
  "prefetch": [{
    "source": "document",
    "where": {
      "and": [
        { "href_matches": "/*", "relative_to": "document" }
      ]
    },
    "eagerness": "conservative"
  }]
}

この設定は、ブラウザに将来のナビゲーションのための事前取得リクエストを開始するよう指示します。これらの事前取得リクエストには、sec-purpose: prefetchというHTTPリクエストヘッダーが含まれます。成功しなかった事前取得は503ステータスコードで応答します。成功した事前取得は200ステータスコードで応答します。

推測のテスト

推測が有効になっているかをテストするには、ウェブページのHTTPレスポンスヘッダーにSpeculation-Rulesヘッダーが含まれていることを確認できます。ただし、推測のベータフェーズ中は、この動作が100%一貫しているわけではないことに注意してください。

ブラウザが事前取得リクエストを行っているかをテストするには、Chrome DevToolsのNetworkタブを開きます。その後、推測が有効になっているウェブページのリンクをマウスダウンします。このアクションは事前取得リクエストを開始し、Networkタブに表示されるはずです。ただし、ブラウザが事前取得を開始しない理由はいくつかあります。詳細については、Chromeの制限ガイド ↗を参照してください。推測のデバッグに関する一般的な情報については、Chromeの推測デバッグガイド ↗を参照してください。

RUM統合

推測は、Web分析およびリアルユーザー測定（RUM）と統合するように設計されています。この統合により、Cloudflareのダッシュボード内のWeb分析インターフェースで推測のウェブパフォーマンスへの影響を理解できます。

RUMを有効にせずに推測を使用することはできますが、機能がウェブページのパフォーマンスにどのように影響しているかを把握することはできません。RUMの設定方法についての詳細は、Web分析およびRUMのドキュメントを参照してください。

推測の有効化と無効化

推測はCloudflareのダッシュボードのSpeedタブおよびAPIとTerraformで利用可能です。

ダッシュボードでPrefetch URLsを有効にするには：

  1. Cloudflareアカウント ↗にログインし、アカウントを選択して特定のドメインに移動します。
  2. Speed > Optimization > Content Optimizationに移動します。
  3. 推測を有効にします。

注意事項

  • 事前取得のレスポンスがブラウザによってレンダリングされることが保証されていないため、推測にはunsafe prefetching ↗のリスクを最小限に抑えるための2つの安全策が含まれています：

    • 推測はWorkerを実行するルートでは事前取得を行いません。この安全策がなければ、事前取得リクエストが通常の（つまり、事前取得ではない）リクエストであると仮定するWorkerロジックを誤って実行する可能性があります。これの例としては、Worker内で実行されるページビューカウンターのインクリメントがあります。ページが実際にブラウザにレンダリングされていない場合、ページビューカウンターはインクリメントされるべきではありません。

    • 事前取得リクエストは、オリジンサーバーには到達しません。事前取得リクエストは、Cloudflareのキャッシュに保存されているコンテンツのみを提供します。コンテンツがキャッシュにない場合、事前取得リクエストはオリジンサーバーに続行されません。この安全策がなければ、事前取得レスポンスがブラウザにレンダリングされていないにもかかわらず、オリジンサーバーの状態が変更される可能性があります。これの例としては、サインアウトURLへの事前取得GETリクエストが誤ってサーバー上でサインアウトアクションをトリガーすることがあります。

  • オリジンサーバーのレスポンスにSpeculation-Rulesヘッダーが含まれている場合、それは上書きされません。

  • 推測は、strict-dynamicまたはnonce-{hash}属性を使用した制限的なコンテンツセキュリティポリシー ↗構成では機能しません。

Cloudflare DashboardDiscordCommunityLearning CenterSupport Portal
Cookie Settings