ブログデザイン備忘録 ~ページロード時間の表示

1. ページロード時間の測定方法
2. ページロード時間の取得方法
3. ページロード時間の表示方法
4. まとめ

　前回まで紹介してきたJavascriptのイベントハンドラを応用してページロード時間を表示する方法を紹介する。正確な速度表示や分析は PageSpeed Insightsなどのサイトを利用した方がよいが、今回はあくまでイベントハンドラの応用事例として取り上げる。

atatat.hatenablog.com

1. ページロード時間の測定方法

　最初にヘッダー部(<head>～</head>)などに時間を取得するScriptを記述して、コンテンツ部がロードされる前の時間を記録する。また、記録したロード前の時間と現在時間の差分を実行する関数を定義しておく。次に記事の本文を<body onload="定義した関数名">～</body>内に記述する。具体的には<body onload="d()">とする。このときイベントハンドラonloadを用いて、ページがロードし終えた時点で定義した関数を呼び出すことで、ページロード終了時間とコンテンツ部がロードされる前の時間の差分を測定することができる。

ただし、はてなブログのヘッダー部にScriptを記述するとすべての記事に適用されてしまい、毎回ページロード時間を測定したいという意図がなければ不要なScriptになるので、本記事では記事のトップ部分に記述している。つまり、この記事の先頭がロードされてから、記事の本体がロードし終える時間を測定していることになる。

2. ページロード時間の取得方法

　ページ先頭に記述するコンテンツ部がロードされる前の時間と記録したロード前の時間と現在時間の差分を実行する関数のスクリプトを以下に示す。

<script>
a = new Date();

function d(){
b = new Date();
n = b.getTime() - a.getTime();
document.getElementById("number").textContent = "ページロード時間: "+  n + "ms";
}

</script>

上記スクリプトはこの記事の先頭に記述している。時間を取得するにはa=new Date();とすることで変数aに時間に関わる情報が格納される。(Dateオブジェクトが割り当てられる) 実際の時間を得るにはa.getTime()を用いる。getTime()は1970年1月1日午前0時からの経過時間をミリ秒で返す関数である。イベントハンドラonloadにより関数d()を呼び出すが、処理の中身はb=new Date()として関数が呼び出された時点の時間を記録する。n=b.getTime()-a.getTime();とするとnは関数が呼び出された時間と、ページ先頭でコンテンツがロードされる時間の差分でミリ秒単位であらわされる。すなわちページロード時間ということになる。

3. ページロード時間の表示方法

　次にページロード時間nの表示方法についてはダイアログという方法もあるが、ページ内の特定のタグ内に書き込むことにする。ページロード時間が書き込まれるタグを<span id="number"> </span>として、本セクションの下側に記述している。関数d()内にdocument.getElementById("number").textContent = "ページロード時間: "+ n + "ms";と記述すると"number"というidを持つタグに"ページロード時間: n ms"というテキストを書き込むことができる。本ページのロード時間は数秒(数千ms)から十数秒とばらつきが大きい。（回線状況にもよると思われる）