103 Early Hintsステータスコードの理解

ボトルネックを見極めてEarly Hintsを活用する

2024年7月12日
翻訳: 逆井 晶子

この記事は米Catchpoint Systems社のブログ記事「Understanding the 103 Early Hints status code」の翻訳です。
Spelldataは、Catchpointの日本代理店です。
この記事は、Catchpoint Systemsの許可を得て、翻訳しています。

ユーザがリンクをクリック、あるいはURLを入力すると、ブラウザはインターネットを介して時には大陸を越えてサーバに信号を送信し、あなたのWebサイトを構成するパズルのすべてのピースを要求します。
この遅延は、データベースからデータを取得したり、CDNに接続して元のコンテンツにアクセスしたりするなどのタスクによって引き起こされることが多く、「サーバの思考時間」と呼ばれる非アクティブな時間が発生します。
このフェーズでは、ブラウザはアイドル状態のままになり、ユーザの画面にコンテンツが表示されるまでの時間が長くなります。

ここで、103 (Early Hints)ステータスコードが登場します。
これは、HTTP/2プロトコルで、この待機時間に対処するために設計されています。
200 (OK)や404 (Not Found)などの一般的なステータスコードほど広く認識されていないかもしれませんが、アプリケーションのパフォーマンスにおけるその重要性は明白です。

103 Early Hintsとは何ですか？

Early Hintsは、新しいHTTPステータスコード103 Early Hintsを導入するWeb標準です。
このプロトコルの革新は、クライアントのブラウザとサーバとの間の対話を再構築し、ページの読み込み時間を短縮します。
これは、サーバがブラウザに警告を発するようなもので、詳細な情報が引き渡される前であっても、どのリソースの取得をすぐに開始できるかを知らせます。
これにより、ブラウザのアイドル時間を効果的に活用して、Webページの一部を事前に読み込むことができます。

Early Hintsの4つの利点

1. ページの読み込みが速くなる

103 Early Hintsは、スタイルシート、フォント、スクリプトなどの重要なリソースを事前に読み込み、接続を確立することで、ページの読み込み時間を大幅に短縮します。
これにより、ブラウザがこれらのリソースを必要とする時点でそれらが即座に利用できるようになり、より速く効率的なページ読み込みが実現します。
103 Early Hintsの実装によるパフォーマンスへの影響を視覚的に比較したものを次に示します。

2. Core Web Vitalsの向上

Early Hintsは、良好なユーザエクスペリエンスにとって重要なLargest Contentful Paint (LCP)やCumulative Layout Shift (CLS)などのメトリクスに顕著な改善をもたらします。
さらに、リソースが事前に読み込まれることで、ページの最初のコンテンツが表示されるまでの時間を示すFirst Contentful Paint (FCP)メトリクスも改善されます。

3. CDNパフォーマンスの向上

Early HintsはCDNへの接続を高速化し、コンテンツ配信を高速化します。
これにより、ユーザがページにすばやくアクセスし、優れたブラウジング体験を楽しむことができるため、Webサイトのパフォーマンスが大幅に向上します。

4. 将来に向けた準備

多くの主要なCDN、HTTPサーバソフトウェアプロバイダ、およびブラウザは、103 Early Hintsをプロトタイプまたはコア機能の一部としてサポートし始めています。
これにより、将来のWeb最適化の方向性が示されています。
今Early Hintsを採用することで、競争上の優位性を得て、技術が進化するにつれてWebサイトが高速でユーザフレンドリーであり続けることを保証できます。

いくつかの観察事項

• サーバは複数の103 Early Hintsを発行できますが、ブラウザは最初のヒントセットのみを認識するように設計されています。
  さらに、リクエストがクロスオリジンリダイレクションを引き起こす場合、対応するEarly Hintsは無視される必要があります。
  これは、セキュリティ上の問題や一貫性のない動作につながる可能性があるためです。
• 103 Early Hintsのサポートは「preconnect」と「preload」プロセスに特化しています。
• Early Hintsの成功は、その発信元によって決まります。
  それらは基本のHTMLドキュメント、通常はindex.htmlから発信される必要があります。
  ヒントが他のソースから発信された場合、パフォーマンスは向上しません。
  さらに、互換性は最新のプロトコルに限定され、HTTP/1.1などの古いプロトコルを介して伝達されるヒントは処理されません。

訳注

Early Hintsでファイルが速く届いたとしても、現在のブラウザ処理では、レイアウト処理やJavaScript処理時間の消費が長いです。
多くのWebサイトでは、表示速度の改善には繋がらないでしょう。
ボトルネック分析をして、HTMLの初出時間が長く、且つ、ファイルの到達時間が問題になっているものについては、効果を発揮するでしょう。

Catchpoint WebPageTestを活用して103 Early Hintsのパフォーマンス向上を可視化する

Catchpoint WebPageTest (WPT)は、Early HintsがWebサイトのパフォーマンスを向上させる方法を視覚的に測定するツールを提供します。
単なる数値メトリクスに焦点を当てるのではなく、このツールはウォーターフォールチャートを通じて実際の読み込みプロセスの変化を見ることができます。
これにより、Early Hintsがコンテンツデリバリーネットワーク（CDNs）のパフォーマンスを最適化する方法を追跡するのに役立ちます。

以下のウォーターフォールチャートから明らかなように、Early Hintsがない場合、HTMLが取得されるまでの間に「サーバの思考時間」が長くなり、ページの読み込みが遅れます。
Catchpoint WPTウォーターフォールグラフから、Early Hintsの実装前の読み込みプロセスにおける遅延がわかります。

Early Hintsを有効にすると、ウォーターフォールチャートが劇的に変化します。
サーバが103 HTTPコードを発行するとすぐに、メインドキュメントの取得と同時に優先アセットがプリロードを開始することを示しています。
このプリロードにより、アイドル時間が短縮され、ブラウザがページをレンダリングする方法が変化し、Web全体のパフォーマンスに大きな影響を与えます。

Catchpoint WPTウォーターフォールは、Early Hintsの恩恵を受ける特定のアセットを特定することもできます。
たとえば、下のスクリーンショットでは、サーバがフォントファイル（g.woff2）と画像（scm.svg）のプリロードを提案しています。
これらのリソースがプリロードされることで、ブラウザはEarly Hintsがない場合よりも迅速にページをレンダリングすることができ、このアプローチの実用的な利点を実証しています。

103 Early Hintsは、単なるプロトコルの改善ではなく、スピード、効率、および優れたユーザエクスペリエンスを求めるWebにとって必要な対応です。
Catchpoint WPT がこれらのパフォーマンス向上に関する具体的な洞察を提供することで、この標準を活用するための準備が整い、Webサイトが高速で効率的な状態を維持できるようになります。

私たちのWebサイト体験ソリューションブリーフと「Webサイトのパフォーマンスを向上させるための5つのステップガイド」をダウンロードして、Webサイトを高速、信頼性、およびレジリエントなものにする方法をご覧ください。