103 Early Hints リソースプリロードを効率化するHTTPステータスコード

スポンサーリンク
スポンサーリンク

103 Early Hintsについて

103 Early Hintsの概要

リソースプリロードを効率化するHTTPステータスコード

103 Early Hints

概要 103 Early Hintsは、クライアントに最終的なレスポンスを提供する前に、関連リソース（CSSやJavaScriptなど）の早期情報を通知するHTTPステータスコードです。このコードを使用することで、ブラウザが関連リソースを先行してプリロードするため、ページの表示速度を向上させることができます。

サーバーは、リクエストされたリソースに関連する情報を早期に提供します。
リソースプリロードとは、ウェブページが使う重要なファイル（フォント、画像、スクリプトなど）をあらかじめ読み込む仕組みです。これにより、ページ表示の際に必要なリソースがすでに準備されているので、読み込みが速くなります。例えば、「このフォントを先にダウンロードしておいて」とブラウザに指示することで、表示をスムーズにします。

103 Early Hintsはどのような時に返されるか

  • サーバーが最終レスポンスを生成するのに時間がかかる場合
  • ブラウザに関連リソース（例: CSS、JavaScript、画像など）を事前ロードさせたい場合
  • ウェブパフォーマンスを向上させるためにリソースのプリロードを活用する場合

103 Early Hintsの具体例

関連リソースの早期通知

GET /index.html HTTP/1.1  
Host: example.com

レスポンス例:

HTTP/1.1 103 Early Hints  
Link: </style.css>; rel=preload; as=style  
Link: </script.js>; rel=preload; as=script  

HTTP/1.1 200 OK  
Content-Type: text/html; charset=UTF-8  

<html>
  <head>
    <link rel="stylesheet" href="/style.css">
  </head>
  <body>
    <script src="/script.js"></script>
  </body>
</html>

解説: サーバーは103 Early Hintsを返し、CSSやJavaScriptなどの関連リソースをクライアントがプリロードできるようにします。その後、通常の200 OKレスポンスを返してHTMLコンテンツを提供します。

ページの表示速度向上

GET /homepage HTTP/1.1  
Host: example.com

レスポンス例:

HTTP/1.1 103 Early Hints  
Link: </main.css>; rel=preload; as=style  
Link: </analytics.js>; rel=preload; as=script  

HTTP/1.1 200 OK  
Content-Type: text/html; charset=UTF-8  

[HTML content of the homepage]

解説: 103 Early Hintsを使用して、ブラウザが必要なリソースを事前にダウンロードできるようにすることで、ページの表示を高速化します。

注意点

103 Early Hintsを返す際の注意点:

  • 最終レスポンスを正確に準備
    103 Early Hintsはあくまで補助的なステータスコードであり、最終的なレスポンス（例: 200 OK）が正しく提供される必要があります。
  • クライアントの対応を確認
    すべてのブラウザやクライアントが103 Early Hintsをサポートしているわけではないため、互換性に注意が必要です。

関連するHTTPステータスコードとの比較

103 Early Hintsと関連性のあるステータスコードについて解説します。

  • 200 OK: リクエストが成功し、完全なレスポンスが提供される場合に使用されます。
  • 102 Processing: 長時間の処理が進行中であることを示すステータスコードで、103とは用途が異なります。

これらの違いを理解することで、適切な用途で103ステータスコードを利用できます。

スポンサーリンク