Early Hints とともにサーバーの思考時間を使用してページ読み込みを高速化

サーバーが重要なサブリソースに関するヒントをブラウザに送信する方法について説明します。

Kenji Baheux

Barry Pollard

公開日: 2022 年 6 月 23 日、最終更新日: 2026 年 7 月 10 日

Early Hints とは

ウェブサイトは時間の経過とともに高度化しています。そのため、リクエストされたページの HTML を生成するために、サーバーが重要な処理（データベースへのアクセスや、配信元サーバーにアクセスする CDN など）を行う必要があることは珍しくありません。残念ながら、この「サーバーの処理時間」により、ブラウザがページのレンダリングを開始するまでに余分なレイテンシが発生します。実際、サーバーがレスポンスを準備する間、接続は実質的にアイドル状態になります。

Early Hints は、最終レスポンスの前に予備の HTTP レスポンスを送信するために使用される HTTP ステータス コード（103 Early Hints）です。これにより、サーバーはメインリソースの生成中に、重要なサブリソース（ページのスタイルシート、重要な JavaScript など）や、ページで使用される可能性の高いオリジンに関するヒントをブラウザに送信できます。ブラウザはこれらのヒントを使用して、接続をウォームアップし、メインリソースを待機しながらサブリソースをリクエストできます。つまり、Early Hints を使用すると、ブラウザは事前に処理を行うことで、このような「サーバーの処理時間」を利用して、ページ読み込みを高速化できます。

場合によっては、Largest Contentful Paint のパフォーマンスが数百ミリ秒向上することがあります。Shopify と by Cloudflare で確認されているように、この比較では 1 秒短縮されています。

Early Hints の使用方法

Early Hints を活用する最初の手順は、トップランディング ページを特定することです。つまり、ユーザーがウェブサイトにアクセスしたときに通常開始するページです。ホームページや、他のウェブサイトから多くのユーザーがアクセスする人気の高い商品リスティング ページなどが考えられます。これらのエントリ ポイントが他のページよりも重要な理由は、ユーザーがウェブサイト内を移動するにつれて Early Hints の有用性が低下するためです（つまり、2 回目または 3 回目のナビゲーションでは、ブラウザに必要なサブリソースがすべて揃っている可能性が高くなります）。また、常に良い第一印象を与えることも重要です。

ランディング ページの優先順位リストを作成したら、次のステップとして、preconnect または preload ヒントの候補となるオリジンまたはサブリソースを特定します。通常、これらは Largest Contentful Paint や First Contentful Paint などの主要なユーザー指標に最も貢献するオリジンとサブリソースです。具体的には、同期 JavaScript、スタイルシート、ウェブフォントなどのレンダリングをブロックするサブリソースを探します。同様に、主要なユーザー指標に大きく貢献するサブリソースをホストするオリジンを探します。

メインリソースですでに preconnect または preload を使用している場合は、これらのオリジンまたはリソースを Early Hints の候補として検討することもできます。詳しくは、LCP を最適化する方法をご覧ください。ただし、HTML から Early Hints に preconnect ディレクティブと preload ディレクティブを単純にコピーすることは 最適ではない可能性があります。

HTML でこれらを使用する場合、通常は、preconnect または preload リソース（Preload Scanner が HTML で検出しないリソース（フォントや、検出が遅れる背景画像など））を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景画像など）を検出が遅れる背景Early Hints の場合、HTML がないため、代わりに重要なドメインに preconnect するか、HTML で早期に検出される可能性のある重要なリソース（main.css や app.js のプリロードなど）を preload することをおすすめします。また、すべてのブラウザが Early Hints の preload をサポートしているわけではありません。ブラウザのサポートをご覧ください。

2 つ目の手順では、古くなっている可能性のあるリソースや、メインリソースで使用されなくなったリソースやオリジンで Early Hints を使用するリスクを最小限に抑えます。たとえば、頻繁に更新されてバージョン管理されているリソース（example.com/css/main.fa231e9c.css など）は最適な選択肢ではない可能性があります。この懸念は Early Hints に固有のものではなく、preload や preconnect が存在する場所であればどこでも適用されます。このような詳細は、自動化またはテンプレート（たとえば、手動プロセスでは、preload とリソースを使用する実際の HTML タグの間でハッシュまたはバージョン URL が一致しない可能性が高くなります）で処理するのが最適です。

例として、次のフローを考えてみましょう。

GET /main.html
Host: example.com
User-Agent: [....] Chrome/103.0.0.0 [...]

サーバーは main.abcd100.css が必要になると予測し、Early Hints を使用してプリロードすることを提案します。

103 Early Hints
Link: </main.abcd100.css>; rel=preload; as=style
[...]

数分後、リンクされた CSS を含むウェブページが配信されます。残念ながら、この CSS リソースは頻繁に更新され、メインリソースは予測された CSS リソース（abcd100）よりも 5 バージョン進んでいます（abcd105）。

200 OK
[...]
<HTML>
<head>
   <title>Example</title>
   <link rel="stylesheet" href="/main.abcd105.css">

一般に、かなり安定していて、メインリソースの結果に大きく依存しないリソースとオリジンを目指します。必要に応じて、主要なリソースを 2 つに分割することを検討してください。1 つは Early Hints で使用するように設計された安定した部分、もう 1 つはブラウザがメインリソースを受信した後にフェッチされる動的な部分です。

<html>
<head>
   <title>Example</title>
   <link rel="stylesheet" href="/main.css">
   <link rel="stylesheet" href="/experimental.3eab3290.css">

最後に、サーバー側で、Early Hints をサポートしていることがわかっているブラウザから送信されたメインリソース リクエストを探し、103 Early Hints で直ちに応答します。103 レスポンスには、関連するプリコネクト ヒントとプリロード ヒントを含めます。メインリソースの準備ができたら、通常のレスポンス（成功した場合は 200 OK など）を送信します。下位互換性を確保するため、最終レスポンスに Link HTTP ヘッダーを含めることをおすすめします。メインリソースの生成中に明らかになった重要なリソース（「2 つに分割」の提案に従った場合は、主要なリソースの動的な部分など）を追加することもできます。このようになります。

GET /main.html
Host: example.com
User-Agent: [....] Chrome/103.0.0.0 [...]
103 Early Hints
Link: <https://fonts.google.com>; rel=preconnect
Link: </main.css>; rel=preload; as=style
Link: </common.js>; rel=preload; as=script

数分後:

200 OK
Content-Length: 7531
Content-Type: text/html; charset=UTF-8
Content-encoding: br
Link: <https://fonts.google.com>; rel=preconnect
Link: </main.css>; rel=preload; as=style
Link: </common.js>; rel=preload; as=script
Link: </experimental.3eab3290.css>; rel=preload; as=style
<HTML>
<head>
   <title>Example</title>
   <link rel="stylesheet" href="/main.css">
   <link rel="stylesheet" href="/experimental.3eab3290.css">
   <script src="/common.js"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">

ブラウザ サポート

103 Early Hints はすべての主要ブラウザでサポートされていますが、Early Hints で送信できるディレクティブはブラウザによって異なります。

プリコネクトのサポート:

プリロードのサポート:

Chrome DevTools も 103 Early Hints をサポートしており、Link ヘッダーはドキュメント リソースで確認できます。

Early Hints リソースを使用するには、Early Hints がブラウザのキャッシュを使用するため、DevTools で Disable cache をオンにしないでください。プリロードされたリソースの場合、[イニシエータ] は Early-hints、[サイズ] は (Disk cache) と表示されます。

HTTPS テストには、信頼できる証明書も必要です。

Firefox には、DevTools のイニシエータとして 103 Early Hints の明示的なサポートはありませんが、Early Hints を使用して読み込まれたリソースは [転送済み] 列に cached と表示され、クリックすると X-Moz: early hint HTTP リクエスト ヘッダーが表示されます。

サーバー サポート

一般的なオープンソース ソフトウェア HTTP サーバー ソフトウェアにおける Early Hints のサポートレベルの概要は次のとおりです。

• Apache: mod_http2 を使用してサポートされています。
• H2O: サポートされています。
• NGINX: サポートされています.
• Node: サポートされています (http および http2)

Early Hints を簡単に有効にする

次の CDN またはプラットフォームのいずれかを使用している場合は、Early Hints を手動で実装する必要がない場合があります。Early Hints をサポートしているかどうかについては、ソリューション プロバイダのオンライン ドキュメントを参照するか、こちらの網羅的ではないリストをご覧ください。

• Cloudflare の Early Hints
• Fastly の Early Hints。
• Akamai の Early Hints。

Early Hints をサポートしていないクライアントで問題が発生しないようにする方法

100 範囲の情報 HTTP レスポンスは HTTP 標準の一部ですが、103 Early Hints のリリース前は一般的なウェブ閲覧ではほとんど使用されていなかったため、一部の古いクライアントやボットでは問題が発生する可能性があります。

sec-fetch-mode: navigate HTTP リクエスト ヘッダーを送信するクライアントに応答して 103 Early Hints のみを送信すると、後続のレスポンスを待機することを理解している新しいクライアントにのみ、このようなヒントが送信されます。また、Early Hints はナビゲーション リクエストでのみサポートされているため（現在の制限事項を参照）、他のリクエストで不要な送信を回避できるというメリットもあります。

また、Early Hints は HTTP/2 または HTTP/3 接続でのみ送信することをおすすめします。ほとんどのブラウザでは、これらのプロトコルでのみ Early Hints を受け入れます。

高度なパターン

主要なランディング ページに Early Hints を完全に適用し、さらに機会を探している場合は、次の高度なパターンが役立つかもしれません。

一般的なユーザー ジャーニーの一環として、 n 番目のページ リクエストを行っているユーザーの場合、Early Hints レスポンスをページの下位のコンテンツに適応させることをおすすめします。つまり、優先度の低いリソースで Early Hints を使用します。優先度の高いレンダリングをブロックするサブリソースまたはオリジンに焦点を当てることをおすすめしているため、直感に反するように思えるかもしれません。ただし、ユーザーがしばらく移動している場合、ブラウザにはすでにすべての重要なリソースが揃っている可能性が高くなります。その時点から、優先度の低いリソースに注意を向けるのが合理的かもしれません。たとえば、Early Hints を使用して、商品画像や、あまり一般的ではないユーザー操作でのみ必要な追加の JS/CSS を読み込むことができます。

現在の制限事項

Chrome に実装されている Early Hints の制限事項は次のとおりです。

• ナビゲーション リクエスト（つまり、最上位ドキュメントのメインリソース）でのみ使用できます。
• preconnect と preload のみサポートしています（prefetch はサポートされていません）。
• Early Hints の後に最終レスポンスでクロスオリジン リダイレクトが続くと、ブラウザは Early Hints を使用して取得したリソースと接続を破棄します。
• Early Hints を使用してプリロードされたリソースは HTTP キャッシュに保存され、後でページによってそこから取得されます。そのため、Early Hints を使用してプリロードできるのはキャッシュ可能なリソースのみです。それ以外のリソースは二重にフェッチされます（Early Hints で 1 回、ドキュメントで 1 回）。Chrome では、信頼できない HTTPS 証明書の場合、HTTP キャッシュは無効になります（ページを読み込む場合でも）。
• レスポンシブ画像をプリロードする（imagesrcset、imagesizes、media を使用）場合、ドキュメントが作成されるまでビューポートが定義されないため、HTTP <link> ヘッダー を使用してサポートされないことがあります。最悪の場合、ドキュメントが受信されるまで待機するため、103 Early Hints の主なメリットがなくなります。

他のブラウザにも同様の制限があります。前述のように、103 Early Hints を preconnect のみに制限しているブラウザもあります。

H2/Push との関係

非推奨の HTTP2/Push 機能に慣れている方は、Early Hints との違いが気になるかもしれません。Early Hints では、ブラウザが重要なサブリソースのフェッチを開始するために往復が必要ですが、HTTP2/Push では、サーバーはレスポンスとともにサブリソースのプッシュを開始できます。これは素晴らしいことですが、構造上の大きな欠点がありました。HTTP2/Push では、ブラウザがすでに持っているサブリソースのプッシュを回避することが非常に困難でした。この「過剰なプッシュ」効果により、ネットワーク帯域幅の使用効率が低下し、パフォーマンスのメリットが大幅に損なわれました。全体として、Chrome のデータでは、HTTP2/Push はウェブ全体のパフォーマンスに悪影響を及ぼしていました。

一方、Early Hints は、予備のレスポンスを送信する機能と、実際に必要なものをフェッチまたは接続するブラウザのヒントを組み合わせているため、実際にはパフォーマンスが向上します。Early Hints は、HTTP2/Push が理論的に対応できるすべてのユースケースをカバーしているわけではありませんが、Early Hints はナビゲーションを高速化するためのより実用的なソリューションであると考えています。

サムネイル画像: Pierre Bamin。