Skip to content

非公式本サイトは非公式の日本語ドキュメントであり、Cloudflare 公式サイトではありません。最新情報はdevelopers.cloudflare.comをご確認ください。

Speed Brain

最終更新 Markdown で表示Agent セットアップ

Speed Brain は、次に遷移しそうなページをプリフェッチして、ウェブページのパフォーマンスを改善する機能です。

提供状況

Free Pro Business Enterprise
提供状況 デフォルトで有効 利用可 利用可 利用可

要件

Speed Brain は、次の条件で動作します。

  • Cloudflare で Speed Brain 機能が有効になっていること。
  • ウェブページ訪問者のブラウザーが、Chromium ベースのバージョン 121 以降であること。
  • プリフェッチ対象のウェブページがキャッシュ対象であること。
  • プリフェッチ対象のページが Worker を呼び出さないこと。

Speed Brain とは

Speed Brain の目的は、ユーザーが遷移する前に、ウェブページをブラウザーへダウンロードしておくことです。

Cloudflare は Speculation Rules API ↗ を使い、今後の遷移をプリフェッチするようブラウザーに指示して、ウェブページのパフォーマンスを改善します。Speed Brain は、サイトで最初に開いたページの読み込み時間は改善しません。同じサイト内で次に開くページの読み込みは改善できます。

ブラウザーが遷移しそうと判断したページをプリフェッチすることで、Speed Brain は Largest Content Paint ↗（LCP）、Time to First Byte ↗（TTFB）、全体のページ読み込み時間などの主要指標を改善できます。

Speed Brain の仕組み

Cloudflare の Speed Brain を有効にすると、ウェブページのレスポンスに Speculation-Rules という HTTP ヘッダーが付きます。このヘッダーの値は、推奨の Speculation-Rules 設定をホストする URL です。この設定は、今後の遷移を conservative の eagerness ↗ でプリフェッチするようブラウザーに指示します。

設定は次のとおりです。

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

この設定により、ブラウザーは今後の遷移に対してプリフェッチリクエストを開始します。これらのプリフェッチリクエストには sec-purpose: prefetch HTTP リクエストヘッダーが含まれます。失敗したプリフェッチは 503 ステータスコードを返します。成功したプリフェッチは 200 ステータスコードを返します。

Speed Brain をテストする

Speed Brain が有効かは、ウェブページの HTTP レスポンスヘッダーに Speculation-Rules があるかで確認できます。ただしベータ期間中は、この動作が 100% 一貫しない場合があります。

ブラウザーがプリフェッチリクエストを送っているかは、Chrome DevTools の Network タブを開いて確認します。Speed Brain が有効なウェブページ上のリンクで、マウスボタンを押し下げます。これでプリフェッチリクエストが始まり、Network タブに表示されます。ただし、ブラウザーがプリフェッチを始めない理由はいくつかあります。詳細は Chrome Limits ガイド ↗ を参照してください。Speculation-Rules のデバッグ全般は、Chrome Speculation Debugging ガイド ↗ を参照してください。

RUM 連携

Speed Brain は Web Analytics と Real User Measurements（RUM）と連携する設計です。この連携により、Cloudflare ダッシュボードの Web Analytics 画面で、Speed Brain がウェブパフォーマンスに与える影響を確認できます。

RUM を有効にしなくても Speed Brain は使えます。ただし、機能がウェブページのパフォーマンスにどう影響しているかは見えません。RUM の設定は Web Analytics & RUM のドキュメントを参照してください。

Speed Brain の有効化と無効化

Speed Brain は、ダッシュボードの Speed タブと API の両方で利用できます。

ダッシュボードで Speed Brain を有効または無効にする手順は次のとおりです。

  1. Cloudflare ダッシュボードで Speed > Settings ページを開きます。

    Settings を開く ↗

  2. Content Optimization を開きます。

  3. Speed Brain を On または Off に切り替えます。

次の PATCH リクエストで Speed Brain を有効にします。

Required API token permissions

At least one of the following token permissions is required:
  • Zone Settings Write
Change Cloudflare Speed Brain settingbash
curl "https://api.cloudflare.com/client/v4/zones/$ZONE_ID/settings/speed_brain" \
	--request PATCH \
	--header "Authorization: Bearer $CLOUDFLARE_API_TOKEN" \
	--json '{
		"value": "on"
	}'

Speed Brain を無効にするには、value: を "off" に設定します。

Terraform でも Speed Brain を設定できます。詳細は Terraform ドキュメント ↗ の cloudflare_zone_settings_override リソースを参照してください。

注意事項

  • プリフェッチのレスポンスがブラウザーで描画される保証はないため、Speed Brain には 安全でないプリフェッチ ↗ のリスクを抑える 2 つのガードがあります。

    • Speed Brain は、Workers が動作するルートではプリフェッチしません。このガードがないと、プリフェッチリクエストが、通常のリクエスト（プリフェッチではないリクエスト）を前提にした Worker ロジックを誤って実行する可能性があります。例として、Worker 内のページビューカウンターがあります。ページがブラウザーで実際に描画されていないのに、カウンターが増えてはいけません。

    • プリフェッチリクエストはオリジンサーバーに到達しません。プリフェッチは Cloudflare の Cache に保存されているコンテンツだけを返します。Cache にない場合、プリフェッチリクエストはオリジンへ続きません。このガードがないと、プリフェッチレスポンスがブラウザーで描画されていないのに、オリジンサーバーの状態が変わる可能性があります。例として、サインアウト URL へのプリフェッチ GET が、サーバー上でサインアウト処理を誤って起こす場合があります。

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

  • strict-dynamic または nonce-{hash} 属性を使う制限の厳しい Content Security Policy ↗ 設定では、Speed Brain は動作しません。

  • 現時点では、Speed Brain は pages.dev を使う、または pages.dev に依存するウェブサイトと互換性がありません。

役に立ちましたか？