前回の記事で紹介した「Navigation Timing API」では、
「サイト全体の処理時間 = ユーザーがどれだけ待たされているか」の全体像を知ることができましたが、
個別リソース(****.jsなど)の情報については取得できませんでした。
JavaScriptのResource Timing APIを使用することで、
サイト内の各リソースの取得にかかっている時間を計測することができます。
実装
それでは早速実装を行なっていきます。
Navigation Timing APIで実装した時と同じように、下記の項目のデータをリソース別に取得します。
- リダイレクト処理にかかる時間
- DNSルックアップにかかる時間
- ネットワーク接続の確率にかかる時間
- HTTPレスポンスを受け取るのにかかるる時間
ソースコード
performance.getEntriesByTypeにresourceを指定することで、
個別リソースに関する詳細の情報を取得できます。
//各リソースの取得にかかる時間を取得する
const resourceObj = performance.getEntriesByType('resource');
console.log(resourceObj);
出力結果
上記のコードでリソースの詳細情報を出力することができました。
![](/wp-content/uploads/2022/08/get-site-resource.png)
プロパティの一覧と意味
プロパティ | 意味 |
---|---|
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'
);
});
出力結果
![](/wp-content/uploads/2022/08/output-resource-timing-api.jpg)
参照 : Resource Timing API
この記事は役に立ちましたか?
もし参考になりましたら、下記のボタンで教えてください。
コメント