要素読込みタイミングの計測ツール「Loading Time」（3）/ JavaScript

ロード時間の乱れ 

「Loading Time」で調査をすると、殆どの（おそらく全ての）要素で、ページ読込みの度にロードタイミングが一定ではなく、乱れがある事が判ります。 これは、通信環境による遅延、データ読込み時に利用される各所に存在するキャシュ、同時に並行して動作するPCプログラム、等々が重なった結果ではないかと推測しています。

その結果は、まるで海岸に打ち寄せる波が、岸辺のどこまで届くのかを眺めている様です。 一見するとランダムですが、しかしおうよそ予測できそうな範囲があります。 また、満潮・干潮の様な変化が隠れていないか、柔軟な視点で観察する必要があると思います。

計測値の乱れ

下はイメージですが、「コメントした記事」のロード時間を調べていて、下の様な乱れのパターンに気付きました。（多くの他の要素でも同様の傾向があります）

グラフ横軸は時間としていますが、一定時間ごとに計測して、その時の計測値をプロットした図といった意味です。

で、何回か計測するとおうよその値が判るのですが、時々「異常値」（赤丸）が観測されます。 例えば、他は 100msec～300msecの範囲の乱れに納まっていても、「異常値」は 1000msecになったりします。 また「異常値」が生じる場合は予測が出来ません。 そして「異常値」はマイナス側には表れないので、平均値を調べる計算に入れるのは不適切と考えています。

この様な「異常値」は、Homeの画面の背部で、何らかのデータリクエストが発生した結果ではと思われるのですが、これは推測です。

平均値を出力する機能を追加 

「Loading Time」ver.0.2 の計測で、計測値をいちいちメモして、後で平均値を計算するのは大変に能率が悪いので、平均値を自動で計算するコードを考えました。

これは、毎回の計測値を「sessionStorage」の配列に追加記録して、その配列の平均値を表示します。 ページをリロードする毎に計測回数が増えた平均値を計算し、リロード回数を増やすほど、よりリッチな平均値が得られます。

「Loading Time」 ver. 0.3　85行～

let DB=[]; // 計測値の配列

function av(n){
    let av=0;
    let total=0;

    let read_json=sessionStorage.getItem('DB_back'); // ストレージ 保存名
    DB=JSON.parse(read_json);
    if(DB==null){
        DB=[n];
        write_DB();
        return n+' / 1'; }
    else{
        DB.push(n);
        write_DB();
        for(let k=0; k<DB.length; k++){
            total+=DB[k]; }
        av=Math.round(total/DB.length);
        return av+' / '+ DB.length; }}


function write_DB(){ // セッションストレージ DB 保存
    let write_json=JSON.stringify(DB);
    sessionStorage.setItem('DB_back', write_json); }

異常値の対策 

ただし最初に書いた様に、「異常値」が不意に計測されるので、その場合は「ESC」キーで、最後の計測結果の記録（配列の最後の値）を削除し、計測をやり直せる様にしています。

「Loading Time」 ver. 0.3　112行～

document.addEventListener("keydown", (event)=>{
        if(event.keyCode==27){ // ESCキーで直前の計測結果を除外
            let read_json=sessionStorage.getItem('DB_back'); // ストレージ 保存名
            DB=JSON.parse(read_json);
            if(DB!=null){
                DB.pop();
                write_DB(); }}});

▪「ESC」キーを押すごとに、これまで記録した計測値が、配列の末尾から削除されるので、何回も「ESC」を押すと過去の計測を遡ってキャンセルできます。

▪計測を開始する初回は、必ず単純なリロード「Ctrl+R」になります。 ハード再読み込み「Ctrl+Shift+R」の平均値を計測する場合は、「ESC」で初回をキャンセルすれば、ハード再読み込みだけの平均値を得ることができます。

▪「異常値」の判断は、恣意的な「平均値」の誘導にならない様に、基準を決めていると良いと思います。（例えば、1000msec以上の値を「異常値」にする等）

計測値・平均値の表示 

従来のページ左上隅の表示に、「平均値」と「計測回数」を表示する様にしました。

▪今回のページを開いた時の計測「今回の計測値」は、従来の通りの表示です。

▪今回の計測値を含めた「平均値」と、今回を含めた「計測回数」が右側に表示されます。

▪「ESC」を押した際に表示は変わりませんが、リロードをすると「ESC」を押した回（前回）の計測値はキャンセルされ、新しい計測値とそれを含めた平均値が表示されます。 従って、結果は更新されていますが計測回数は増えません。

結果のリセット方法 

平均値はセッションストレージに、毎回の計測値を記録し、計算・表示しています。 ストレージをリセットするには、一旦「Home」のウインドウを閉じ、もう一度開くと、初回の計測になります。 計測に正確を期すなら、「ESC」を押して初回の計測は削除してから、次の計測から始めます。

「Loading Time」を利用するには

このツールは Chrome / Edge / Firefox版の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。

❶「Tampermonkey」を導入します

◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。

既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。 

拡張機能の導入については、以下のページに簡単な説明があるので参照ください。

⭕「Tampermonkey」の導入方法

❷「Tampermonkey」にスクリプトを登録します

◎「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。

◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。

〔コピー方法〕　軽量シンプルなツール「PreBox Button   」を使うと

　　コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」

　　の操作で、掲載コードのコピーが可能になります。

◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。

〔 Loading Time 〕 ver. 0.3

// ==UserScript==
// @name         Loading Time
// @namespace    http://tampermonkey.net/
// @version      0.3
// @description  要素のローディング時間を調査する
// @author       Ameba blog User
// @match        https://ameblo.jp/*
// @match        https://www.ameba.jp/*
// @match        https://blog.ameba.jp/*
// @match        https://msg.ameba.jp/*
// @noframes
// @grant        none
// ==/UserScript==

// お知らせ項目
let E0='.HomeRedNotification_Item_Button';

// コメントした記事
let E1='.HomeBlogComment_Collection a';
// コメントした記事 もっと見る
let E2='.HomeBlogComment .Collection_ReadMore_Button';

// スタッフブログ 告知項目
let E3='.PcModuleNotification_Link';

//フォローフィード 新着記事
let E4='.HomeChecklist_Collection_Item';
//フォローフィード もっと見る
let E5='.HomeChecklist .Collection_ReadMore_Button';

// 最近見たブログ
let E6='.HomeBlogHistory_Article';

// Amebaトピックス 記事
let E7='.HomeMainTopics_Topic';

// 新着トピックス
let E8='.HomeBlogFeed_Article_Card';
// 新着トピックス もっと見る
let E9='.HomeBlogFeed .Collection_ReadMore_Button';

let EE='.HomeBlogModule_Banner';




let interval_time=40; // 計測間隔 msec  🟦
let max_retry=8; // 計測の上限 sec  🟦


let retry=0;
let interval=setInterval(wait_target, interval_time);
function wait_target(){
    retry++;
    if(retry*interval_time>max_retry*1000){ // 待機上限
        clearInterval(interval);
        result_disp(retry*interval_time, 1); }

    let target=document.querySelector(E1); // 調査対象のセレクタを指定 🟥
    if(target){
        clearInterval(interval);
        result_disp(retry*interval_time, 0)
        console.log(retry*interval_time + 'msec');
    }}


function result_disp(n, limit){
    let dis;
    if(limit==0){
        dis='<div id="lt_disp">'+ n +'msec　平均' + av(n); }
    else{
        dis='<div id="lt_disp">'+ max_retry +'sec を超えたので計測を中止しました'; }

    dis+=
        '<style>'+
        '#lt_disp { position: fixed; top: 62px; left: 6px; z-index: 10000; '+
        'font: normal 16px Meiryo; padding: 4px 8px 2px; '+
        'color: #000; background: #fff; border: 1px solid #aaa; }'+
        '</style></div>';

    document.body.insertAdjacentHTML('beforeend', dis); }



let DB=[]; // 計測値の配列

function av(n){
    let av=0;
    let total=0;

    let read_json=sessionStorage.getItem('DB_back'); // ストレージ 保存名
    DB=JSON.parse(read_json);
    if(DB==null){
        DB=[n];
        write_DB();
        return n+' / 1'; }
    else{
        DB.push(n);
        write_DB();
        for(let k=0; k<DB.length; k++){
            total+=DB[k]; }
        av=Math.round(total/DB.length);
        return av+' / '+ DB.length; }}


function write_DB(){ // セッションストレージ DB 保存
    let write_json=JSON.stringify(DB);
    sessionStorage.setItem('DB_back', write_json); }



document.addEventListener("keydown", (event)=>{
    if(event.keyCode==27){ // ESCキーで直前の計測結果を除外
        let read_json=sessionStorage.getItem('DB_back'); // ストレージ 保存名
        DB=JSON.parse(read_json);
        if(DB!=null){
            DB.pop();
            write_DB(); }}});

〔注〕

ver. 0.3 のデフォルトのパラメーター設定は以下になっています。

◎ 対象要素：「E1」// コメントした記事

◎ 計測間隔 :「40」msec

◎ 計測の上限 :「8」sec

「Loading Time」最新版について 

旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。

●「Loading Time」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。

スクリプトツール 　最新バージョン・リンク一覧表 （ツール名順）