次に訪れるページを先読みするCloudflare Speed Brainとは?仕組みと注意点を整理する

Speed Brainは、ブラウザに対してリンク先ページの「プリフェッチ(先読み)」を促すことで、サイト内のページ遷移を高速化するCloudflareの機能です。
2024年9月に発表され、ベータ機能として提供されています。
Freeプランではデフォルトで有効になっており、Pro/Business/Enterpriseプランでも利用可能です。

Speed Brainは、ブラウザのSpeculation Rules APIを利用して、「次にユーザーが訪れそうなページ」をユーザーがリンクをクリックする前にあらかじめダウンロードさせる仕組みです。

重要な前提として、Speed Brainはサイトへの最初の訪問ページの読み込みは高速化しません。
同一サイト内でのページ遷移(2ページ目以降)に対してのみ効果があります。
効果が出る指標としては、LCP(Largest Contentful Paint)やTTFB(Time to First Byte)、全体的なページ読み込み時間が挙げられています。

目次

仕組み

Speed Brainを有効にすると、WebページのレスポンスにSpeculation-RulesというHTTPヘッダーが付与されます。
このヘッダーの値には、実際のルールがホストされているURLが入っています。ブラウザはこのURLにアクセスし、そこから以下のようなJSON形式のSpeculation Rules(ルール本体)を取得します。

json

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

eagerness: conservativeが指定されているため、リンクへのマウスダウンなど、ユーザーの遷移意図が強く示されたタイミングなどをトリガーにプリフェッチが行われます。
プリフェッチリクエストにはsec-purpose: prefetchヘッダーが付き、成功時は200、失敗時は503が返されます。

Speculation Rules APIには「prefetch」と「prerender」という2つの方式があり、Speed Brainが使用しているのはprefetchです。
prefetchはHTMLドキュメント本体のみを先読みする仕組みであり、そのページが参照する画像・CSS・JavaScriptなどのサブリソースは先読みの対象になりません(これらは実際に遷移した後、通常どおり読み込まれます)。

より踏み込んでサブリソースまで含めて先読みするprerender方式とは異なる点に注意が必要です。

動作条件

Speed Brainが機能するには、以下の条件をすべて満たす必要があります。

  • 訪問者のブラウザがChromium系ブラウザ(バージョン121以降)であること
  • Chromium系以外のブラウザ(Safari、Firefoxなど)では効果がありません。
  • プリフェッチ対象のページがすでにCloudflareのキャッシュに存在していること
  • プリフェッチ対象のページがWorkerを実行しないこと

なお、プリフェッチ対象がキャッシュに存在しない場合、リクエストはオリジンサーバーには転送されず、503が返される形でそのまま終了します(後述の「安全面の設計」を参照)。つまりSpeed Brainは「先読みしてオリジンから新規に取得する」機能ではなく、「すでにキャッシュ済みのコンテンツを、ユーザーが遷移する前にブラウザへ配っておく」機能という理解が正確です。

安全面の設計

プリフェッチはユーザーが実際にページを閲覧する前に実行されるため、副作用のあるリクエスト(例:ログアウト処理やカウンターのインクリメントなど)が意図せず実行されてしまうリスクがあります。これに対してCloudflareは2つの安全策を設けています。

  1. プリフェッチリクエストはオリジンサーバーに到達しない:Cloudflareのキャッシュに存在するコンテンツのみを返し、キャッシュにない場合はオリジンに転送せずにリクエストを終了する。
  2. Workerを実行するルートはプリフェッチしない:Worker内でページビューカウンターのような副作用のある処理が動いている場合、プリフェッチによって誤カウントされることを防ぐため。

制限事項・注意点

  • オリジン側のレスポンスにすでにSpeculation-Rulesヘッダーが含まれている場合、Cloudflareはそれを上書きしません。
  • CSP(Content Security Policy)でstrict-dynamicやnonce-{hash}を使用している場合、Speed Brainは機能しません。

有効化・無効化の方法

ダッシュボードの場合:Speed > Settings > Content Optimization から、Speed Brainのトグルをオン/オフできます。API経由でも同様に設定変更が可能です。

動作確認方法

  • レスポンスヘッダーにSpeculation-Rulesが含まれているかを確認する(ベータ期間中は挙動が一定でない場合がある点に留意)
  • Chrome DevToolsのNetworkタブを開いた状態でリンク上にマウスダウンし、プリフェッチリクエストが発生するかを確認する

Web表示スピード改善・セキュリティ対策のCloudflare

導入のご相談だけでなく、運用フェーズでのサポートも承ります。
DDoS攻撃や悪質なBot(ボット)からのアクセスを防ぎたい方、WAF機能やプランの詳細を知りたい方、
国内エンジニアによる安心の運用サポートをご希望の方も、ぜひお気軽にお問い合わせください。

目次