DOM

【JavaScript】 ブラウザの読み込み時間などを確認する方法

更新日：2023/04/25

近年はWebサイトの読み込み時間短縮が重要になってきました。
そのため読み込み開始から終了までの時間をイベント毎に細かく調査して改善していく作業が必要です。

実際にはツールが公開されているのでそれを使用すればいいのですが、JavaScriptで確認可能なので紹介します。

ブラウザの読み込み時間等の取得

ブラウザの読み込み時間等は自動的に計測されます。
計測は高精度な時間計測が行えるPerformanceオブジェクトで行われ、計測結果も同オブジェクトから取得します。

取得したオブジェクトはPerformanceNavigationTimingという名前を持っていて、読み込みプロセスの開始からloadイベントが終了するまでの期間で各ステップの実行タイミングをミリ秒単位で記憶しています。

なお、PerformanceNavigationTimingに記憶されている計測値は、起点からの経過時間です。

PerformanceNavigationTimingの取得

PerformanceNavigationTimingの計測後に最短で呼び出されるイベントは、"pageshow"です。
そこでこのイベントにリスナーを登録して、オブジェクトを取得します。

window.addEventListener( "pageshow" ,  () =>{

  const performanceNavigationTiming = performance.getEntriesByType("navigation")[0];
  console.log( performanceNavigationTiming );
});

なおローカルファイルをブラウザにで読み込んだ場合、結果がundefinedになる可能性があります。
この場合はXampp等のWebサーバーを用意して、サーバー経由で実行する必要があります。

僕はすぐに忘れてしまい、「ブラウザによって結果が違う」と毎回悩みます。
困ったものです…

使用例

基本的に、確認したいイベントの終了から開始を引き算して、処理にかかった時間を求めます。

window.addEventListener( "pageshow" ,  () =>{

  const p = performance.getEntriesByType("navigation")[0];

  const timings = [
    {name:"総時間",time:()=>p.loadEventEnd - p.startTime },
    {name:"DOMContentLoadedイベント",time:()=>p.domContentLoadedEventEnd - p.domContentLoadedEventStart },
    {name:"loadイベント",time:()=>p.loadEventEnd - p.loadEventStart },
  ];
  timings.forEach( ({name,time}) =>console.log( `${name}: ${time()}ms` ) );
   // 結果：
   // 総時間: 2506.54ms
   // DOMContentLoadedイベント: 827.26ms
   // loadイベント: 1587.4ms
});

window.addEventListener( "DOMContentLoaded" , ()=> {
  for( let i = 0 ; i < 999999999 ; i ++);
});
window.addEventListener( "load" , ()=> {
  for( let i = 0 ; i < 999999999 ; i ++);
});

PerformanceNavigationTimingのプロパティ一覧

PerformanceNavigationTimingは、非常に多くのプロパティがあります。
その一部を時系列で並べてみました。

蛇足的な情報ですが、PerformanceNavigationTimingはPerformanceResourceTimingを継承しています。
さらに、PerformanceResourceTimingはPerformanceEntryを継承しています。

継承を意識する必要はありませんが、PerformanceNavigationTimingで使用できるプロパティ一覧を、所属するオブジェクト毎に一覧にしてみました。

Chromeは、ここで紹介したもの以外にactivationStartとserverTimingが含まれています。
今回は調査していませんが、仕様外（たぶん）なのであまり使用しない方がいいかもしれません。

最後のPerformanceEntryは、高精度な時間計測で使用するオブジェクトです。
これを使うと、関数の処理時間などを計測することができます。
次のページを参考にしてみてください。

関連記事

スポンサーリンク

記事の内容について

こんにちはけーちゃんです。
説明するのって難しいですね。

「なんか言ってることおかしくない？」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php

 

このサイトは、リンクフリーです。大歓迎です。