Early Hints

Early Hintsは、ページの表示速度を最大30%高速化する新しいウェブ標準です（HTTPレスポンスステータスコード「103 Early Hints」）。

Early Hintsを利用すると、訪問者が互換性のあるブラウザでサイトを読み込んだ際、ブラウザに、サーバーからの最終的なレスポンスに表示される可能性のあるリンクされたアセットに関する情報を含む「103 Early Hints」のステータスコードが送信されます。ブラウザは、サーバーから「HTTP 200 OK」のレスポンスを受け取る前に、この情報をもとにページの読み込み準備を開始することが可能になります。これによって、ページの表示速度を向上させることができます。

Early Hintsの機能はpreloadやpreconnectなど、あらゆる種類のリンクヘッダやリソースヒントでもお使いいただけます。最終的なレスポンスを受け取る前に、ブラウザがリソースの取得や準備を開始できるようにすることで、ウェブページのパフォーマンスを向上させることができます。

弊社のお客様は、Cloudflare統合により、独自ドメインで運用するWordPressサイトにEarly Hintsを設定することができます。なお、一時ドメイン（kinsta.cloud）は対象外となります。

WordPressサイトでEarly Hintsを設定する

Early Hintsは、主にpreloadやpreconnectなどのリソースヒントとともに機能するように設計されており、初期リクエストが行われた際に、これらのヒントをブラウザに送信することで、preloadやpreconnectの効果を高めるために使用されます。

• Preload：リソースをできるだけ早く読み込むようにブラウザに指示します。Early Hintsはpreloadヒントを早期にブラウザに送信し、重要なリソース（CSSやJavaScriptなど）の取得を直ちに開始できるようにします。これにより、レンダリングブロックの時間が短縮され、パフォーマンスが向上します。
• Preconnect：重要なサードパーティドメイン（アナリティクス、CDN、APIなど）への早期接続を開始します。Early Hintsはこの preconnectシグナルを事前に送信し、ブラウザがDNSルックアップ、TCPハンドシェイク、TLSネゴシエーションを事前に行えるようにします。これにより接続遅延が削減され、外部オリジンからのリソース読み込みが高速化されます。

Early Hintsを活用するには、まずWordPressサイト上の対象アセットに適切なLink:ヘッダを追加し、preloadとpreconnectを適切に設定する必要があります。これには、以下のような最適化プラグインが便利です。

• WP Rocket
• Perfmatters
• Pre* Party Resource Hints

上記プラグインを使用すると、コードの編集なしでpreloadおよびpreconnectヘッダを簡単に定義、管理することができます。

注意事項

1. サイトのLink:レスポンスヘッダでpreloadまたはpreconnectのrelタイプを指定して、Early Hintsのレスポンスに含めるリソースを指定する必要があります。WordPressプラグインを使用すると、preloadまたはpreconnectヘッダを追加することができます。
2. 「HTTP 103 Early Hints」ステータスコードは現在、Chrome、Edge、Safari、Firefoxの最新バージョンでサポートされています。Early Hintsに対応していないブラウザでは、「HTTP 103 Early Hints」が送信されても何も表示されません。
3. サイトに20以上のドメインを追加している場合は、ドメインの総数に応じて、Early Hintsの有効化に5分以上かかる可能性があります。
4. 一時ドメイン（kinsta.cloud）は対象外となります。

CloudflareでEarly Hintsを利用する

Cloudflareアカウントで対象ドメインを選択し、「Speed」＞「最適化」＞「コンテンツの最適化」に移動し、「Early Hints」をオンにしてください。

MyKinstaでEarly Hintsを利用する

1. MyKinstaにログイン後、「WordPressサイト」＞（サイト名）＞「ツール」に移動します。
2. 「Early Hints」セクションの「利用する」をクリックします。

右上にEarly Hintsが有効である旨の通知が表示されます。

Early Hintsのテスト

Early Hintsのテストとして、ページのHTTPヘッダ内を見てみることができます。そこに追加したrelタイプ（preloadまたはpreconnect）の Link:ヘッダがあるかどうか確認してみてください。サイトのHTTPヘッダを検査するには、次のいずれかの方法が使用できます。

• HTTPステータス＆リダイレクトチェッカー（無料）
• ブラウザに内蔵されている開発者向けツール
• ターミナル（コマンドライン）のcurlコマンド（下の例の最後にあるURLをテストしたいページのURLに置き換えてください）

curl -L -s -o /dev/null -D - https://kinstaexample.com

Early Hintsを無効にする

1. MyKinstaにログイン後、「WordPressサイト」＞（サイト名）＞「ツール」に移動します。
2. 「Early Hints」セクションの「無効化する」をクリックします。

右上にEarly Hintsが無効化された旨の通知が表示されます。