🐙

Server-Timing Web API

に公開

Server-Timing とは

Server-Timingは、サーバー側のパフォーマンスメトリクスをブラウザに伝えるための HTTPヘッダー です。
これにより、開発者はブラウザのデベロッパーツールを通じてサーバー側の処理時間やその他のメトリクスを視覚的に確認することができます。

W3Cで仕様が定義されています。
https://www.w3.org/TR/server-timing/

なぜServer-Timingが必要なのか

以下のような課題がありませんか?

  1. サーバーサイドの透明性の欠如:
    パフォーマンスモニタリングツール等は、クライアントサイドのメトリクスに焦点を当てているため、サーバーサイドの詳細なメトリクスが不足してることが多いです。
    そのため、サーバーサイドのボトルネックや遅延の原因を特定するのが難しい。

  2. 統合されていないパフォーマンスデータ:
    サーバーサイドとクライアントサイドのパフォーマンスデータは分離されている場合が多く、全体的なパフォーマンスのビューとして見るのが難しい。

  3. リアルタイムの反応性の不足:
    パフォーマンスモニタリングツールで結果を見るときには既に過去のデータのため、リアルタイムに確認したいときは多くあります。

Server-Timingを使うことで以下のような効果が期待できます。

  1. サーバーサイドのパフォーマンスの透明性の向上:
    Server-Timingを使用することで、サーバーサイドの各処理の持続時間やその他の関連メトリクスを明示的にブラウザに伝えることができます。これにより、サーバーの内部のパフォーマンスに関する透明性が大幅に向上します。

  2. 統合されたパフォーマンスビューの提供:
    Server-Timingヘッダーはブラウザのデベロッパーツールに組み込まれており、サーバーサイドのメトリクスをクライアントサイドのメトリクスと統合して表示することができます。これにより、全体的なパフォーマンスのビューを持つことが簡単になります。

  3. リアルタイムの問題の迅速な特定:
    ブラウザを介してリアルタイムでサーバーサイドのメトリクスを提供することで、発生した問題を迅速に特定し、対応することが可能となります。

利用方法

  1. 実装:ヘッダーの追加:
    サーバーアプリケーションにServer-Timingヘッダーを追加します。

    ヘッダーの形式は次のようになります:

Server-Timing: metric-name;dur=value;desc="description"

例:

Server-Timing: db-query;dur=53;desc="Database Query",rendering;dur=24;desc="HTML Rendering"
  1. 確認:ブラウザで:
    ブラウザのデベロッパーツールの「ネットワーク」タブを開くことで、Server-Timingヘッダーの情報を確認できます。

メトリクス

W3Cの仕様では具体的なメトリクスについての定義はありません。
一例として以下のような値を入れるとよいでしょう:

  • db-query: データベースクエリの実行時間
  • rendering: ページのレンダリング時間
  • api-call: API呼び出しの処理時間
  • cache: キャッシュの処理時間

Discussion