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

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

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

注意事項

  1. サイトの Link: レスポンスヘッダで preload または preconnectrelタイプを指定して、Early Hintsのレスポンスに含めるリソースを指定する必要があります。レスポンスヘッダーの設定が不安な場合は、開発者と協力して作業を行なってください。
  2. 現在、ChromeとEdgeのみが「HTTP 103 Early Hints」ステータスコードをサポートしています。Firefoxは、Early Hintsに対応する意向で、実装に関するバグレポートを公開しています。
  3. Early Hintsをサポートしていないブラウザでは、103のステータスコードが送信されても何も起こることはありません。
  4. サイトに20以上のドメインを追加している場合は、ドメインの総数に応じて、Early Hintsの有効化に5分以上かかる可能性があります。
  5. Early Hintsは、Cloudflareのベータ版機能であり、Chromeにおいては試験的機能です。したがって、動作や実装は将来的に変更される可能性が高いとされています。
  6. Early Hintsは現在、独自SSL証明書をサポートしていません。独自SSL証明書をインストールしたサイトでEarly Hintsを利用すると、MyKinsta上では利用できているように見えることがありますが、実際に有効化されることはありません。

Early Hintsを利用する

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

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

Early Hintsのテスト

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

  • Kinstaの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を無効化
  3. 右上にEarly Hintsが無効化された旨の通知が表示されます。

関連ドキュメント

関連記事