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

ページのローディング時の観察

ブラウザがひとつのページを表示する最初は、各種パーツを読込み表示し、ページ上で動作するスクリプトを読込んで動作を開始するなど、大変に忙しく舞台設定が行われます。ウェブページの表示内容が複雑に高度化した現在、重いページを素早く表示させる事は、ページを作る側には重要課題です。

そんなページで動作するユーザースクリプト（JavaScriptツール）を制作する際は、各種の要素がページに読み込まれる（Loading）タイミングを知る必要があります。ページの構成開始とほぼ同時にスクリプトも動作を始めるので、未だ読み込まれていない要素に働きかける様なスクリプトは、エラーになってしまうからです。

スクリプトの制作でこの問題は時々起こるので、特定の要素がどの様なタイミングでページに読み込まれるのかを調査するツールがあれば、役にたつと考えました。

DevToolsを使えば、ローディング時の状況をmsec単位で解析できますが、時間を要して大変です。調べる要素が決まっている場合に、その読込みまでの時間を調べるこのツールは、スクリプト制作時には便利なはずです。

「Loading Time」

この調査ツールの名は「Loading Time」としました。基礎になっているのは、これまでに各所で使って来た、要素がロードされしだい取得するというコードです。

調査方法

「Loading Time」のコードは、「Home」に表示される各種のリンクのリストを調査対象としています。（調査対象のカスタマイズを参照ください）

1回の起動で1個の要素しか調査できないので、「ソースコード 52行目」の「E4」を、「E0」～「E9」に、調査ごとに書換えて調べます。

（初期値「E4」はフォローフィードの新着記事です）

「Home」の他の要素や、「Home」以外のページの特定の要素を調べる場合は、27行目の「' '」の中を、目的要素のセレクタに書き換えれば可能です。

let E4='.HomeChecklist_Collection_Item';

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

次に「Home」の画面を開きます。計測値はコンソールに表示されるので、DevTools

を開く必要があります。

●「Home」のページを開き「F12」を押します。

●「DevTools」が表示されたら最上段の「コンソール」を選択し、左列の項目中から「ユーザーメッセージ」を選択します。

右側の枠にメッセージの内容が表示されますが、背景色の無いシンプルな表示が、このツールの出力です。上図では「300msec」となっています。

▪指定した要素が 8sec以上経ってもロードされない場合は、コンソールには何も表示されませんが、「Home」の画面にアラート表示が出ます。

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

次に、キャッシュを削除してロードタイミングを調べます。以下の調査の結果は、久しぶりに「Home」を開いた時の状態に近い結果になります。

●「Home」のページのリロードボタン「」を「右Click」すると、下のメニューが表示されます。

「キャッシュの消去とハード再読み込み」を押して、コンソールを確認します。

▪ 平均値を調べる意味で、何度かこの操作をして調査します。

▪ 一般に、キャッシュを消去するとロードタイミングは遅くなります。

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

調査精度とタイミング上限のカスタマイズ

コード上はいくらでも精密な計測コードが書けますが、JavaScriptの実際の動作には限界がある様です。現在のツールの目的から、計測のタイミングは 100msecごとにしていますが、10msec程度までは精度を上げられると思います。

下は、このツールの中心部です。

「Loading Time」　ver.0.1 44行～

let retry=0;
let interval=setInterval(wait_target, 100);
function wait_target(){
    retry++;
    if(retry>80){ // 8sec まで観測
        clearInterval(interval);
        alert('8secを超えたので計測を中止しました'); }

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

▪「100」は、計測の間隔（インターバル）で「100msec」を指定しています。

この値を「10」にすれば「10msec」ごとに精密な計測ができます。ただし、むやみに上げるとブラウザのリソースを食い、ブラウザの動作が不安定になるはずです。

また、インターバルを小さくする場合は、retylの上限回数を増やす必要があります。

▪「retry>80」になっても目的の要素がロードされない場合に、8secで調査を切り上げる様にしています。

▪「E4」は、調査対象の要素のセレクタを指定する変数です。

これらの値を変更して、必要な調査に適した動作をさせる事ができます。

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

調査する対象ページは、「@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';

「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.1

// ==UserScript==
// @name         Loading Time
// @namespace    http://tampermonkey.net/
// @version      0.1
// @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';

// コメントした記事
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 retry=0;
let interval=setInterval(wait_target, 100);
function wait_target(){
    retry++;
    if(retry>80){ // 8sec まで観測
        clearInterval(interval);
        alert('8secを超えたので計測を中止しました'); }

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

「Loading Time」最新版について

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

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