今日は、ウェブページの読み込み時間がツールバー上に表示されるようにする Chrome 拡張機能 ＆ Firefox アドオンPage Load Timerを紹介しようと思います。
「Page Load Timer」は、ウェブページの読み込み速度を計測できるようにするブラウザ拡張機能です。
インストールするとツールバー上にボタンが表示され、このボタンの上にウェブページの読み込み時間が秒単位で表示されるようにしてくれます。
読み込みにかかった時間の内訳を確認することもでき※1、さらには過去に計測したウェブページの履歴を表形式で確認することも可能となっています※2。
※1 リダイレクトにかかった時間、ドメイン名を解決するのにかかった時間、サーバー接続を確立するまでにかかった時間、HTML の解析にかかった時間、JavaScript を実行するのにかかった時間… 等々。
※2 履歴データは、クリップボードにコピーしたり、XLSX / CSV ファイルとして書き出したり、印刷したりすることもできる。
普段、“ 少しでもウェブページを高速化させたい… ” と思っているウェブ開発者におすすめです。
ちなみに、
- 複数回表示した時の平均読み込み時間を算出する機能
- 特定のサイト上では計測を行わないようにする機能
- 特定のサイト上で読み込みに時間がかかった時に、アラートを表示する機能
も付いています。
アラート機能
ダウンロード（Chrome 拡張機能）
ダウンロード（Firefox アドオン）
基本的な使い方
- 「Page Load Timer」をインストールします。
- Chrome を使用している場合は、ツールバー上の拡張機能ボタンをクリック →「Page Load Timer」の右側にある
ボタンをクリックします。「Page Load Timer」の右側にある固定ボタンをクリックする
Firefox を使用している場合は、 ツールバー上の拡張機能ボタンをクリック →「Page Load Timer」を右クリックし、「ツールバーにピン留め」を選択します。「Page Load Timer」を右クリックし、「ツールバーにピン留め」を選択する
- 「Page Load Timer」のボタンが、ツールバー上に登録されました。
「Page Load Timer」のボタンが、ツールバー上に登録された
これで準備完了です。
以後、ウェブページを開いた時に、該当ページの読み込み時間がツールバー上に表示されるようになります。ページの読み込み時間がツールバー上に表示されるようになる
ツールバーボタンをクリックすることにより、読み込み時間の内訳を確認することも可能となっています。読み込み時間の内訳を確認することも可能
内訳の詳細は以下の通り。- Redirect - リダイレクトにかかった時間
- DNS - ドメイン名を解決するのにかかった時間
- Connection - サーバー接続を確立するまでにかかった時間
- Request - リクエストの開始からサーバーが応答するまでにかかった期間
- Response - サーバーの応答開始からデータ転送完了までにかかった時間
- DOM - DOM の構築にかかった時間
- Parse - HTML を解析するのにかかった時間
- Execute Scripts - JavaScript を実行するのにかかった時間
- Content loaded - メインコンテンツが読み込まれるのにかかった時間
- Sub Resources - 追加リソースの読み込みにかかった時間
- Load Event - ロードイベント発生からページが完全にロードされるまでにかかった時間
ボタンをクリックします。
履歴の表示とエクスポート
- 過去に計測したウェブページのリストを確認したい時は、ツールバーボタンをクリック → ポップアップの左下にある「View report」ボタンをクリックします。
ポップアップの左下にある「View report」ボタンをクリックする
- 過去に計測したウェブページが 100 件までリスト表示されます。
過去に計測したウェブページのリスト
ウェブページは、- URL
- Load Time(s) - 読み込みにかかった時間（単位は秒）
- Avg Load Time(s) - 複数回表示した時の平均読み込み時間（単位は秒）
- Timestamp - 計測日時
といった情報ごとにカラム分けして表示され、各カラムごとにソートできるようになっています。
また、右端の「Action」カラムで、- Copy Url - URL をコピー
- View - ウェブページを開く
- Delete - 履歴から削除する
といったコマンドを実行することもできたりします。
加えて、右上にある検索ボックスにキーワードを入力することで、履歴アイテムをインクリメンタルサーチすることも可能となっています。
履歴のページをインクリメンタルサーチすることもできる
- 履歴のデータをコピー、またはファイルに書き出したい時は、画面左上にある
- Copy - クリップボードにコピー
- Excel - XLSX ファイルとして保存
- CSV - CSV ファイルとして保存
- Print - 印刷
ボタンをクリックします。
履歴のデータは、コピー、またはファイルに書き出したりすることができる
履歴データを CSV ファイルとして保存する時は、ツールバー上の「Page Load Timer」ボタンをクリック → ポップアップ下部の「Download」ボタンを押しても OK です。ポップアップ下部の「Download」ボタンをクリックする
- 尚、同一の URL を複数回読み込んだ場合、デフォルトでは “ 最新の読み込みデータ ” のみが履歴として表示されるようになっています。
重複した URL でも履歴を個別に残しておきたい場合は、ツールバー上の「Page Load Timer」ボタンをクリック → ポップアップ右下の「Settings」ボタンをクリックし、「Keep duplicate url values in report」スイッチを ON にしておきます。ポップアップ右下の「Settings」ボタンをクリックする
「Keep duplicate url values in report」スイッチを ON にする
この「Keep duplicate url values in report」スイッチを OFF にすると「重複した履歴データは削除されます（一番古いものだけが残る）」という警告が表示されるので、「OK」を選択します。重複した履歴データは削除されます
- 履歴のデータを一括消去したい時は、ツールバー上の「Page Load Timer」ボタンをクリック → ポップアップ右下の「Clear Date」ボタンをクリックします。
ポップアップ右下の「Clear Date」ボタンをクリックする
計測を無視するサイトや、アラートの設定
- 計測を行わないサイトを指定したい時や、特定のサイト上で読み込みに時間がかかった時にアラートが表示されるようにしたい時は、ツールバー上の「Page Load Timer」ボタンをクリック → ポップアップ右下の「Settings」ボタンをクリックします。
ポップアップ右下の「Settings」ボタンをクリックする
- 設定パネルが表示されます。
設定パネル
計測を行わないサイトを指定したい時は、上部の「Blacklist Websites」欄に目的とするサイトの URL（ドメイン）を一行ずつ入力すれば OK です。
（ブラックリストから解除する時は、入力した URL を消去すれば OK）特定のサイト上で読み込みに一定時間以上かかった時にアラートが表示されるようにしたい時は、下部の「Enter domain」欄にアラート対象とするサイトの URL（ドメイン）を入力し、右側の欄にトリガーとする秒数を入力します。
下部の「Enter domain」欄にアラート対象とするサイトのドメインを入力し、右側の欄にトリガーとする秒数を入力する
アラート対象のサイトを複数指定したい時は、左下の ボタンをクリックします。アラート対象の URL を複数指定することもできる
アラートを設定しておくと、登録サイト上で読み込みに特定秒数以上かかった時に、ツールバーボタン上の数値が赤くなり、ページ右上にアラートが表示されるようになります。ツールバーボタン上の数値が赤くなり、ページ右上にアラートが表示されるようになる
ボタンをクリックします。
コメント