ブラウザーがページをリクエストすると、オリジンサーバーは完全な応答の準備に時間がかかります。Early Hints はこの待ち時間を使い、ブラウザーに予備の 103 応答を送ります。応答の Link ヘッダーは、ブラウザーが必要とするアセットを伝えます。ブラウザーは完全な応答が届く前にそれらのアセットの読み込みを始められ、ページ読み込みが速くなります。
Early Hints は RFC 8297 ↗ で新しい HTTP ステータスコード(103 Early Hints)として定義されています。Cloudflare は HTML ページの Link ヘッダー付き 103 応答をキャッシュして配信し、ユーザーが感じる待ち時間を減らします。
Early Hints の詳細は、Cloudflare ↗ と Google Chrome ↗ のブログを参照してください。
| Free | Pro | Business | Enterprise | |
|---|---|---|---|---|
| 提供状況 | あり | あり | あり | あり |
-
Cloudflare ダッシュボードで Speed > Settings ページを開きます。
Settings を開く ↗ -
Content Optimization タブを開きます。
-
Early Hints のスイッチを On にします。
Early Hints が生成およびキャッシュされるのは次の場合だけです。
- URI のファイル拡張子が
.html、.htm、.phpであるか、ファイル拡張子がない - 応答の戻りコードが 200、301、または 302
- 応答に preconnect または preload の rel タイプを持つ link ヘッダー ↗ が含まれる。たとえば
Link: </img/preloaded.png>; rel=preload
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: earlyHintsCacheの504応答が増えることがあります。これは想定どおりで無害です。このソースのリクエストは、キャッシュされた Early Hints 向けの内部サブリクエストです。エンドユーザーのリクエストではなく、オリジンにも到達しません。応答ステータスは、リクエスト URI にキャッシュされた Early Hints があるかどうかだけを示します(キャッシュ HIT なら200、キャッシュ MISS なら504)。これらのリクエストは、Cache Analytics などの他のビューではすでに除外されています。Log Explorer から除外するにはClientRequestSource != "earlyHintsCache"を使います。GraphQL API で除外するには、エンドユーザーで絞り込む を参照してください。