アーリーヒント
アーリーヒントは、「サーバー思考時間」を利用して、オリジンサーバーが完全なレスポンスをコンパイルしている間に、ブラウザにリソースの読み込みを開始するための指示を非同期に送信します。完全なレスポンスが準備される前にこれらのヒントをブラウザに送信することで、ブラウザはエンドユーザーのためにウェブページをより早く読み込む方法を見つけることができます。
正式には、アーリーヒントはクライアントとサーバー間の新しいインタラクションを定義する新しいHTTPステータスコード（103アーリーヒント）を定義するウェブ標準 ↗です。103は、200 OK（またはエラー）レスポンスが準備されている間にクライアントに提供され、これが「サーバー思考時間」です。Cloudflareのエッジを有効にすると、HTMLページからのリンクヘッダーを使用して103アーリーヒントレスポンスをキャッシュして送信できます。このレスポンスには、ウェブページを完全にレンダリングするために必要になる可能性のあるアセットに関するヒントが含まれています。この「ヒント付け」により、ページの読み込みが速くなり、一般的にユーザーが感じるレイテンシが減少します。
アーリーヒントに関する詳細情報は、Cloudflare ↗およびGoogle Chrome ↗のブログを参照してください。
| Free | Pro | Business | Enterprise | |
|---|---|---|---|---|
Availability | Yes | Yes | Yes | Yes |
- Cloudflareダッシュボード ↗にログインし、ドメインを選択します。
- ダッシュボードから、Speed > Optimizationを選択します。
- Content Optimizationタブに移動します。
- Early HintsのスイッチをOnに切り替えます。
アーリーヒントは以下の場合にのみ生成およびキャッシュされます：
.html、.htm、または.phpファイル拡張子を持つURI、またはファイル拡張子がないURI- 200、301、または302レスポンスコード
- レスポンスがリンクヘッダー ↗を含み、preconnectまたはpreload relタイプを持つ場合（例：
Link: </img/preloaded.png>; rel=preload）
Cloudflareは、メインレスポンスの前にキャッシュされた103アーリーヒントレスポンスを非同期に検索して送信します。
現在、アーリーヒントを受信した際にプリロードまたはプリコネクトのアクションを取るのは特定のブラウザバージョンのみであり、例えばGoogle Chrome M94以降です。互換性のあるクライアントブラウザで実験するためのWebPageTestの実行に関する指示は、ブログ投稿 ↗に記載されています。
さらに、以下の点に留意してください：
- アーリーヒントレスポンスは、オリジンサーバーまたはワーカーに到達する前に送信される場合があります。アーリーヒントが有効になっていて、サイトのページが認証を必要とする場合、認証されていない訪問者は103レスポンスを受け取る可能性があります。103レスポンスにはキャッシュされたリンクヘッダーが含まれ、オリジンからの403 Forbiddenレスポンスの前に送信されます。
- アーリーヒントは、コンテンツがキャッシュ可能なリクエストではあまり頻繁には送信されません。Cloudflare CDNは、レスポンスがキャッシュされている場合、非同期のアーリーヒント検索が完了する前にレスポンスヘッダーを取得する可能性が高くなります。メインレスポンスヘッダーがすでに利用可能な場合、Cloudflareは103レスポンスを送信しません。
- Cloudflareは現在、一部のユーザーエージェントでアーリーヒントを無効にしています。例えば、1xxレスポンスとの互換性がない特定の検索クローラーボットなどです。
- アーリーヒントが有効になっていると、Cloudflareログに
earlyHintsCacheのRequestSourceを持つ504レスポンスが増加することがありますが、これは予想されるもので無害です。earlyHintsCacheからのリクエストはキャッシュされたアーリーヒントの内部サブリクエストであり、エンドユーザーのリクエストではなく、オリジンにも送信されません。これらのリクエストのレスポンスステータスは、リクエストURIに対するキャッシュされたアーリーヒントがあるかどうかを示すだけです（キャッシュヒット時は200、キャッシュミス時は504）。これらのリクエストは、キャッシュ分析などの他のビューではすでにフィルタリングされています。これらのリクエストをフィルタリングするか、ウェブサイトのエンドユーザーによるリクエストのみをフィルタリングするには、エンドユーザーをフィルタリングするを参照してください。