Server Timing APIでサーバーの処理時間を可視化する

Server-Timing API

W3Cによって策定されている各種Timing APIは、Webのパフォーマンスを計測するためのAPIです。そのうちServer-Timing APIは、サーバー側の処理に要した時間を示します。
Google Chromeではバージョン65より、レスポンスヘッダに付与したServer Timing APIの値がDeveloper ToolsのNetworkタブで表示されるようになりました。この機能により、サーバー側における処理時間を簡潔に確認することができるようになっています。

Server-Timingを使ってみる

Node.jsでHello World!を表示するだけのコードをもとにして、Server-Timingを試してみましょう。
以下のコードでは、Server-Timingレスポンスヘッダに適当な値をセットしています。

main.js

const http = require('http');

http.createServer((req, res) =>{
  // 処理にかかった時間を適当に定義
  const startup = 2.3;
  const dbread= 10.6;

  res.writeHead(200, {
    'Content-Type': 'text/html',
    'Server-Timing': `su=${startup};"Start-up",db-read=${dbread};"Database Read"`
  });
  res.end('Hello World!');
}).listen(8080);

Chromeでこのページを表示してからDeveloper ToolsのNetworkタブを選択し、当該リクエストのTimingを確認すると次のように表示されます。

各種処理時間がグラフとともに表示され、一瞥することができます。

なお、Server-Timingレスポンスヘッダには、計測対象としたいメトリクスを好きなだけ追加することができます。この機能を使えばサーバー側のパフォーマンスチューニングに役立ちそうですね😊

参考

New in Chrome 65
Server Timing
パフォーマンスに関する各種ブラウザAPI - EagleLand