前回の記事で紹介した「Navigation Timing API」では、
「サイト全体の処理時間 = ユーザーがどれだけ待たされているか」の全体像を知ることができましたが、
個別リソース(****.jsなど)の情報については取得できませんでした。
JavaScriptのResource Timing APIを使用することで、
サイト内の各リソースの取得にかかっている時間を計測することができます。
実装
それでは早速実装を行なっていきます。
Navigation Timing APIで実装した時と同じように、下記の項目のデータをリソース別に取得します。
- リダイレクト処理にかかる時間
- DNSルックアップにかかる時間
- ネットワーク接続の確率にかかる時間
- HTTPレスポンスを受け取るのにかかるる時間
ソースコード
performance.getEntriesByTypeにresourceを指定することで、
個別リソースに関する詳細の情報を取得できます。
//各リソースの取得にかかる時間を取得する
const resourceObj = performance.getEntriesByType('resource');
console.log(resourceObj);出力結果
上記のコードでリソースの詳細情報を出力することができました。
プロパティの一覧と意味
| プロパティ | 意味 |
|---|---|
| name | リソースのURL |
| startTime | 開始時点でのタイムスタンプ |
| entryType | performance.getEntriesByType()で指定した値 |
| initiatorType | リソース読み込みのきっかけ(link, css, script, imgなど) |
| redirectStart | リダイレクト開始時 |
| redirectEnd | リダイレクト終了時 |
| fetchStart | リソースの取得開始地点 |
| duration | リソースの読み込みにかかった時間 |
| domainLookupStart | ドメイン名解決の開始時 |
| domainLookupEnd | ドメイン名解決の終了時 |
| connectStart | TCP接続の開始時 |
| secureConnectionStart | TLSトンネルの接続の開始時 |
| connectEnd | 接続確立の完了時 |
| requestStart | HTTPリクエストの送信開始時 |
| responseStart | HTTPレスポンスの受信開始時 |
| responseEnd | HTTPレスポンスの受信終了時 |
カスタマイズ
オブジェクトの参照だけでは、msでの処理時間を算出できないので、
個別のリソースごとに表示をカスタマイズします。
ソースコード
const resourceObj = performance.getEntriesByType('resource');
//各リソースの取得にかかる時間を取得する
const resources = performance.getEntriesByType('resource');
resources.forEach(function(resource) {
console.log(
'リソースの名前 : ' + (resource.name) + '\n',
'リソースのタイプ : ' + (resource.initiatorType) + '\n',
'リダイレクトにかかる時間 : ' + (resource.redirectEnd - resource.redirectStart) + 'ms\n',
'ドメインの名前解決にかかる時間 : ' + (resource.domainLookupEnd - resource.domainLookupStart) + 'ms\n',
'接続の確率にかかる時間 : ' + (resource.connectEnd - resource.connectStart) + 'ms\n',
'リソース読み込みにかかった時間 : ' + resource.duration + 'ms\n',
'HTTPリクエストの送信から受信までの時間 : ' + (resource.responseEnd - resource.requestStart) + 'ms\n'
);
});出力結果
参照 : Resource Timing API
