Skip to content

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

Early Hints

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

ブラウザーがページをリクエストすると、オリジンサーバーは完全な応答の準備に時間がかかります。Early Hints はこの待ち時間を使い、ブラウザーに予備の 103 応答を送ります。応答の Link ヘッダーは、ブラウザーが必要とするアセットを伝えます。ブラウザーは完全な応答が届く前にそれらのアセットの読み込みを始められ、ページ読み込みが速くなります。

Early Hints は RFC 8297 で新しい HTTP ステータスコード(103 Early Hints)として定義されています。Cloudflare は HTML ページの Link ヘッダー付き 103 応答をキャッシュして配信し、ユーザーが感じる待ち時間を減らします。

Early Hints の詳細は、CloudflareGoogle Chrome のブログを参照してください。

提供状況

Free Pro Business Enterprise
提供状況 あり あり あり あり

Early Hints を有効にする

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

    Settings を開く ↗
  2. Content Optimization タブを開きます。

  3. Early Hints のスイッチを On にします。

Early Hints を生成する

Early Hints が生成およびキャッシュされるのは次の場合だけです。

  • URI のファイル拡張子が .html.htm.php であるか、ファイル拡張子がない
  • 応答の戻りコードが 200、301、または 302
  • 応答に preconnect または preload の rel タイプを持つ link ヘッダー が含まれる。たとえば Link: </img/preloaded.png>; rel=preload

Early Hints を送出する

Cloudflare はメイン応答の前に、キャッシュされた 103 Early Hints 応答を非同期で検索して送出します。

現在、Early Hints を受け取ってプリロードまたはプリコネクトする動作をするのは、Google Chrome M94 以降など一部のブラウザーバージョンだけです。互換性のあるクライアントブラウザーで WebPageTest を実行する手順は、ブログ記事 を参照してください。

加えて、次の点に注意してください。

  • Early Hints 応答は、オリジンサーバーまたは Worker に到達する前に送出されることがあります。Early Hints が有効で、サイト上のページが認証を必要とする場合、未認証の訪問者でも 103 応答を受け取ることがあります。103 応答にはキャッシュされた Link ヘッダーが含まれ、オリジンからの 403 Forbidden 応答より先に送られます。
  • コンテンツがキャッシュ可能なリクエストでは、Early Hints の送出頻度が下がることがあります。応答がキャッシュ済みだと、Cloudflare CDN は非同期の Early Hints 検索が終わる前に応答ヘッダーを取得しやすくなります。メイン応答ヘッダーがすでに利用可能な場合、Cloudflare は 103 応答を送りません。
  • Cloudflare は一部の User-Agent で Early Hints を無効にします。たとえば、1xx 応答と互換性がない一部の検索クローラーボットです。
  • Early Hints を有効にすると、Cloudflare Logs で ClientRequestSource: earlyHintsCache504 応答が増えることがあります。これは想定どおりで無害です。このソースのリクエストは、キャッシュされた Early Hints 向けの内部サブリクエストです。エンドユーザーのリクエストではなく、オリジンにも到達しません。応答ステータスは、リクエスト URI にキャッシュされた Early Hints があるかどうかだけを示します(キャッシュ HIT なら 200、キャッシュ MISS なら 504)。これらのリクエストは、Cache Analytics などの他のビューではすでに除外されています。Log Explorer から除外するには ClientRequestSource != "earlyHintsCache" を使います。GraphQL API で除外するには、エンドユーザーで絞り込む を参照してください。

役に立ちましたか?