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

気になる問題

「Loading Time」を実際に使って調査していると、気になる問題が出て来ました。

ver.0.1 では 100msec（0.1秒）にしましたが、これは2秒前後の計測をする予測から、それに見合うインターバルにしたものです。しかし、比較的短時間でロードされる要素の計測では、100msecはアバウト過ぎます。実際は10msecのロード時間が100msecの結果になるからです。

それだけでなく、例えば 100msecの精度で計測すると 200msecの結果なのに、10msecの精度で計測すると 80msecの結果になる場合があり、計測のインターバルで結果のシフトが生じる疑いが出て来ました。原因は不明ですが、これはもう少しテストをして校正する必要があるかもしれません。

以上の問題点を煮詰める前に、もう少しツールを扱い易くしました。

ツールを扱い易く改善

結果をページ上に表示

ver.0.1 では、DevTools で「キャッシュの消去とハード再読み込み」を実行する事を必須と考えていました。

しかしテストを繰り返すと、「ハード再読み込み」と結果に差が出ないらしいと判って来ました。このリロード方法の違いは以下が判り易いです。

〔注〕

差が出ないというのは、私が注目しているHomeの特定の要素のロード時間の測定に関してであり、関心対象によっては大いに差があるかも知れません。

Chromeには3種類の「再読み込み」があるって知ってた？ Webページ上の画像などを最新の状態にするテク　パソコンやスマートフォンでWebサイトの閲覧に「Google Chrome」を利用している方は多いだろう。しかし、最初に覚えた使い方を続けていないだろうか。Googleに関連するサービスは進化し、便利な機能が日々提供されている。何となく不便を感じているなら、見逃している機能やサービスがあるかも。普段からGoogleを使っている方も、不慣れな方も、そのままで…

forest.watch.impress.co.jp

実際のHome画面でのテストでは、通常の「Ctrl+R」（または「F5」）とハード再読込み「Ctrl+Shift+R」（または「Shift+F5」）で足りると判断しました。これは、DevToolsの起動が不要になり、ブラウザの通常の動作環境を再現し易くなります。

実際に、能力の劣る私の旧マシンでは、DevToolsを起動するとリソースが奪われ、本来のブラウザ機能が落ちて、計測の結果が変化する傾向があります。

ただし、コンソールを参照出来なくなるので、「Loading Time」に結果を表示させるコードを追加しました。

下は、結果を表示する関数です。

「Loading Time」 ver. 0.2 　66行～

function result_disp(n, limit){
    let dis;
    if(limit==0){
        dis='<div id="lt_disp">'+ n +'msec'; }
    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); }

計測の結果はページを開く度に、ブラウザウインドウの左上隅に表示されます。

パラメーターを変更し易く

ツールを複雑にすると、その事で計測が不正確になるかも知れません。単純で、適確な動作をするコードが望ましいのです。

従って、色々な入力枠等を用意して扱い易いインターフェイスでパラメーターを設定可能にするより、直接にコードを書き変えてテストする方式が最良です。という事で、コードを書換え易くする事を考えました。

コード中で「計測間隔」「計測の上限」を記入する所を判り易くしました。

「Loading Time」 ver. 0.2 　46行～

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

この「🟦」の目印で、コードの変更場所が直ぐに判ります。

調査方法

調査対象はコード内で「E0」～「E9」のどれかを「🟥」の行で指定します。

「Loading Time」 ver. 0.2 　58行～

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

▪ デフォルトでは「Home」の幾つかの要素を選択できる様になっています。

▪ 他のページで他の要素を特定するクラス名を指定して調べる事が出来ます。

● 対象要素の指定となる様にソースコードを書き換えて、Tampermonkeyの「ファイル」メニューの「保存」を押します。

●「Home」の画面を開くと、コードで指定した要素のロード時間が表示されます。

▪ページを開く度、リロードする度に、ページの左上隅に結果を表示します。

▪リロードする度に、結果は異なる可能性があります。平均値を調べる意味で、何度かリロードして調査します。

▪通常のリロード「Ctrl+R」、ハード再読込み「Ctrl+Shift+R」の違いを勘案してリロードを実行します。

▪指定した要素が指定した時間を超えてもロードされない場合は、調査が停止した上で、画面の左上隅に表示が出ます。

●「Loading Time」は非常駐型のツールです。調査の終了後は、Tampermonkeyのダッシュボードで、このツールをOFFにしてください。

適用ページと調査対象のカスタマイズ

調査する対象ページは、「@match」のパラメータで指定できます。デフォルトではアメーバブログの主要関連ページのドメインを指定にしていますが、アメーバ以外の任意のドメインでの調査も、もちろん可能です。

デフォルトの「@match」パラメータ　7行～

// @match        https://ameblo.jp/*
// @match        https://www.ameba.jp/*
// @match        https://blog.ameba.jp/*
// @match        https://msg.ameba.jp/*

ロードされるまでの時間を調査する「対象の要素」は、コード上で変数「E0～E9」としています。これは「Home」の各種要素を、「Ex」を書き換えるだけで調査出来る様にしたものです。

調査対象の指定「E0～E9」 15行～

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

// コメントした記事
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';

最後の「EE」は、セレクタ書換え用の変数として追加したものです。

「Loading Time」を利用するには

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

❶「Tampermonkey」を導入します

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

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

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

⭕「Tampermonkey」の導入方法拡張機能「Tampermonkey」は定評あるブラウザ拡張機能です。これをブラウザに導入する事で、ユーザーライクで有効な JavaScriptツールを制作し、利用することができます。∽ameblo.jp

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

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

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

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

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

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

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

〔 Loading Time 〕 ver. 0.2

// ==UserScript==
// @name         Loading Time
// @namespace    http://tampermonkey.net/
// @version      0.2
// @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=100; // 計測間隔 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'; }
    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); }

「Loading Time」最新版について

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

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