JavaScriptで個別リソースの取得時間を計測する方法

前回の記事で紹介した「Navigation Timing API」では、
「サイト全体の処理時間 = ユーザーがどれだけ待たされているか」の全体像を知ることができましたが、
個別リソース(****.jsなど)の情報については取得できませんでした。

JavaScriptでサイトパフォーマンスを計測する方法

JavaScriptのResource Timing APIを使用することで、
サイト内の各リソースの取得にかかっている時間を計測することができます。

実装

それでは早速実装を行なっていきます。
Navigation Timing APIで実装した時と同じように、下記の項目のデータをリソース別に取得します。

  • リダイレクト処理にかかる時間
  • DNSルックアップにかかる時間
  • ネットワーク接続の確率にかかる時間
  • HTTPレスポンスを受け取るのにかかるる時間

ソースコード

performance.getEntriesByTypeにresourceを指定することで、
個別リソースに関する詳細の情報を取得できます。

//各リソースの取得にかかる時間を取得する
const resourceObj = performance.getEntriesByType('resource');
console.log(resourceObj);

出力結果

上記のコードでリソースの詳細情報を出力することができました。

プロパティの一覧と意味

プロパティ意味
nameリソースのURL
startTime開始時点でのタイムスタンプ
entryTypeperformance.getEntriesByType()で指定した値
initiatorTypeリソース読み込みのきっかけ(link, css, script, imgなど)
redirectStartリダイレクト開始時
redirectEndリダイレクト終了時
fetchStartリソースの取得開始地点
durationリソースの読み込みにかかった時間
domainLookupStartドメイン名解決の開始時
domainLookupEndドメイン名解決の終了時
connectStartTCP接続の開始時
secureConnectionStartTLSトンネルの接続の開始時
connectEnd接続確立の完了時
requestStartHTTPリクエストの送信開始時
responseStartHTTPレスポンスの受信開始時
responseEndHTTPレスポンスの受信終了時

カスタマイズ

オブジェクトの参照だけでは、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

関連記事

コメント

この記事へのトラックバックはありません。