質問とコンテキスト
ブラウザでは、暫定的な 1xx レスポンスの最初のバイトがいつ到着したかを記録する PerformanceResourceTiming.firstInterimResponseStart のサポートが進んでいます。非対応、クロスオリジン、キャッシュされたケースを含め、103 Early Hints がリソースの準備時間を短縮するかどうかを評価するオブザーバーを実装してください。
面接官がテストしていること
requestStart、firstInterimResponseStart、および最終レスポンスヘッダーのタイミングを理解しているか。- 0 が「1xx なし」、「クロスオリジンマスキング」、または「キャッシュ関連の利用不可タイムスタンプ」を意味する可能性があることを知っているか。
- バッファされたエントリとサンプリングされたレポートとともに
PerformanceObserverを使用できるか。 - プロトコルのメリットを、ブラウザサポート、Timing-Allow-Origin、およびプロダクトメトリクスから切り離して考えているか。
最初に確認すべき明確化のための質問
測定目標
最初の 1xx までの時間、Early Hints によるプリロード数、あるいは LCP やインタラクション準備完了などのユーザー成果のどれを測定していますか？
リソースのスコープ
同一オリジン（same-origin）のナビゲーションのみを監視すべきですか？それとも CDN アセット、フォント、クロスオリジンスクリプトも対象ですか？Timing-Allow-Origin は設定されていますか？
互換性ポリシー
データはリアルタイムの意思決定を促進するものですか？プロパティが利用できない場合、古いブラウザは同等のフォールバックメトリクスを提供する必要がありますか？
30秒の回答フレームワーク
PerformanceObserver を使用し、プロパティが存在してゼロでない場合にのみ firstInterimResponseStart - requestStart を計算します。クロスオリジンのタイミングがマスキングされている可能性があり、キャッシュパスでもゼロが返されることがあるため、ゼロだからといってサーバーが 103 を省略したとは証明できません。テレメトリではサポート状況、オリジンのスコープ、最終レスポンスのタイミングを記録し、LCP などのユーザーメトリクスに照らし合わせて Early Hints を検証する必要があります。
詳細な回答のステップ
1. タイムスタンプの説明
requestStart はブラウザがリソースをリクエストしようとする時刻です。firstInterimResponseStart は 1xx レスポンスの最初のバイトが到着した時刻です。finalResponseHeadersStart は最終レスポンスヘッダーが到着した時刻です。暫定レスポンスが存在する場合、最初の差分はその 1xx までのネットワーク待機時間を近似します。
2. オブザーバーの実装
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
const interim = entry.firstInterimResponseStart;
if (typeof interim !== "number" || interim <= 0) continue;
reportTiming({
name: entry.name,
interimWait: interim - entry.requestStart,
finalHeaders: entry.finalResponseHeadersStart - interim,
initiator: entry.initiatorType,
});
}
});
observer.observe({ type: "resource", buffered: true });本番コードでは、プロパティの機能検出を行い、完全な URL や機密性の高いクエリパラメータがアナリティクスに入らないように、名前、サンプリング、フィールドを制限する必要があります。
3. ゼロを正しく解釈する
ゼロは暫定レスポンスがなかったこと、またはクロスオリジンリソースが Timing-Allow-Origin を通じてタイミングを公開しなかったことを意味する場合があります。キャッシュヒットやキャンセルされたリクエストでも、関連するタイムスタンプにゼロが生成されることがあります。ダッシュボードでは「未観測」と「1xx なしを確認」を区別し、ゼロを負の期間や自動的な失敗として扱わないようにする必要があります。
4. クロスオリジンリソースの処理
CDN やフォントがクロスオリジンの場合、保護されたタイミングフィールドが公開される前に、サーバーが許可されたサイトに対して Timing-Allow-Origin を返す必要があります。すべてのオリジンに対してではなく、実際のデプロイオリジンに対してそのヘッダーを設定し、ポリシーによって一部のユーザーが観測不能のままになることを許容します。
5. 103 とユーザーのメリットを分離する
このプロパティは最初の 1xx のタイミングを報告するだけであり、103 を特定したり、プリロードが使用されたことを証明したりするものではありません。ナビゲーションデータ、サーバーログ、または制御された実験で 103 を確認し、finalResponseHeadersStart、リソースの responseEnd、および LCP を比較します。最初の 1xx が早く届いたとしても、早すぎる、または不適切なプリロードはパフォーマンスを損なう可能性があります。
6. 互換性フォールバックの設計
サポートされていないブラウザでも、一般的な requestStart、responseStart、responseEnd メトリクスを報告できますが、暫定タイミングを捏造することはできません。機能を明示し、古いサンプルと新しいサンプルを分けて集計します。API が存在しないことでレンダリングがブロックされてはなりません。
7. 検証とガバナンスの構築
HTTP/2 以降の同一オリジンおよびクロスオリジンのケース、キャッシュヒットとミス、103 のあるサーバーとないサーバーを比較します。interimWait >= 0 であること、および最終ヘッダーが最初の暫定レスポンスより先行しないことをアサートします。レポートの頻度を制限し、ネットワークのタイムスタンプをプロダクトの成果として扱うのではなく、LCP、プリロードヒット率、エラー率と併せてタイミングを解釈します。
質の高い模範回答
バッファリングされた PerformanceObserver を使用し、firstInterimResponseStart が存在し、かつゼロでない場合にのみ 1xx の待機時間をレポートします。ゼロは未確定として保持し、オリジン、Timing-Allow-Origin、キャッシュ、ブラウザ機能ごとにセグメント化し、制御された実験で 103 を検証します。Early Hints は、暫定バイトが単に早く届いたからではなく、LCP、プリロードヒット率、およびエラーが改善された場合にのみ継続採用します。
よくある間違い
- ゼロ以外の値をレスポンスが 103 であった証拠として扱うこと。
- すべてのゼロをサーバーが 103 を送信しなかった証拠として扱うこと。
- クロスオリジンの
Timing-Allow-Originの欠落によって引き起こされるデータギャップを無視すること。 responseStartを最終ヘッダー時刻として使用し、暫定レスポンスと最終レスポンスを混同すること。- ロード後にのみ
getEntriesByTypeを呼び出し、以前に記録されたエントリを見逃すこと。 - LCP、プリロードヒット、エラーを確認せずにネットワークタイミングのみを監視すること。
フォローアップの質問と回答
firstInterimResponseStart で 103 であることを確認できますか？
いいえ。これは 100 Continue を含む任意の 1xx レスポンスの最初のバイトを記録します。103 であることは、サーバーログ、制御されたリクエスト、およびリソース読み込み動作によって確認してください。
クロスオリジンのエントリがゼロになることが多いのはなぜですか？
Resource Timing はクロスオリジンのタイムスタンプをマスキングします。一致する Timing-Allow-Origin がない場合、保護されたフィールドはゼロを返します。レスポンスポリシーを修正するか、そのサンプルを観測不能として分類してください。推測値を作成してはいけません。
responseStart と finalResponseHeadersStart の違いは何ですか？
暫定レスポンスがある場合、responseStart は最初の暫定バイトを反映する可能性がありますが、finalResponseHeadersStart は最終ヘッダーを表します。最終レスポンス前のサーバーの準備時間を測定する場合は後者を使用してください。
古いブラウザ向けのフォールバックは何ですか？
プロパティの機能を検出し、一般的なリクエストおよびレスポンス時間の収集を継続し、暫定フィールドがないことをマークします。古いブラウザのサンプルは、新しい API のサンプルとは別に集計します。
Early Hints を維持する価値があることをどのように証明しますか？
同じネットワーク、キャッシュ、およびアセットバージョンを使用して、有効なコホートと無効なコホートを実行します。LCP、プリロードヒット率、最終ヘッダー時刻、リソース完了、およびエラーを比較します。早い 1xx は中間の証拠に過ぎません。