メインコンテンツにスキップ
Kinsta.comコミュニティ新しいタブで開くMyKinsta新しいタブで開く

Early Hints

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

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

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

弊社では、Cloudflare統合により、MyKinstaからWordPressサイトでEarly Hintsを簡単に利用することができます。

PreloadとPreconnect

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

  • Preload：リソースをできるだけ早く読み込むようにブラウザに指示します。Early Hintsはpreloadヒントを早期にブラウザに送信し、重要なリソース（CSSやJavaScriptなど）の取得を直ちに開始できるようにします。これにより、レンダリングブロックの時間が短縮され、パフォーマンスが向上します。
  • Preconnect：重要なサードパーティのオリジンへの接続を早期に確立します。Early Hintsはpreconnectヒントを早期にブラウザに送信し、ネットワーク接続（DNSルックアップ、TLS/SSLハンドシェイク）を事前に確立できるようにします。これにより、リクエスト時の待ち時間が短縮され、ページの表示速度が向上します。

preloadとpreconnectを効果的に使用するには、事前読み込み用にマークしたいアセットに特定のリンクヘッダを追加する必要があります。WP RocketやPerfmatters、Pre* Party Resource HintsのようなWordPressプラグインを使用して、WordPressアセットに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分以上かかる可能性があります。

Early Hintsを利用する

  1. MyKinstaにログイン後、「WordPressサイト」＞（サイト名）＞「ツール」に移動します。
  2. 「Early Hints」セクションの「利用する」をクリックします。
Early Hintsを有効化
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を無効化
Early Hintsを無効化

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

この記事は役に立ちましたか？