ページ表示速度をそのページ上に表示するプログラムの無料ダウンロード


サイト訪問者のページ表示速度を計測し、そのページ上に表示するプログラムを公開しました。
無料でダウンロードできます。

WordPressなどのCMSを使用していない素のHTML(スタティックなHTML)ページにも設置することが可能です。
名称は「ページスピード・タイムログ」としておきます。

現在の最新バージョンは2019年8月13日公開の1.0です。
各バージョンごとのアップデート内容については、このページ最下部の「アップデート履歴」に記載してあります。

このプログラムを設置すると、そのページの表示にかかった時間が表示されるようになります。
表示させる場所は自由に変更できます。

例えば今ご覧になっているこのサイトではこのプログラムをすでに組み込んでおり、ページの最下部にそのページの表示にかかった時間が表示されるようになっています。
ページの表示速度

これはブラウザのデベロッパーツール(開発ツール)を開いて計測できる表示速度と同じです。(赤文字のLoadの部分)
デベロッパーツールでの計測
補足説明:Firefoxだとなぜか0.05秒前後の誤差が発生しますが、Chrome、Safariでは誤差は0.01秒以下です。(おそらくJSの解析 ~ ページ上に秒数を表示させる処理分の遅延だと思われます)

自分以外の第三者に「私のサイト、どのぐらいの速度で表示された?」と聞いたとしても、Webの知識のない一般の方は上記のようなデベロッパーツール(開発ツール)による計測方法を知らないので、正確な表示速度を確認することができません。

また、スマホやタブレットのブラウザではデベロッパーツールが使えないため、上記の計測ができません。
そんな時、このプログラムをサイトに組み込んでおけば、一般の方やスマホのブラウザでも簡単に表示速度を確認することができるようになります。

それ以外の主な機能や特長は以下の通りです。

  1. HTMLでできているページにも組み込み可能。
  2. もちろんWordPressサイトでも使える。
  3. デザインはすべてCSSで設定。自由に変更可能。
  4. 追加で読み込ませるファイルはJSファイル1つのみ。
  5. jQuery不要。
  6. async属性付きで読み込ませることが可能。
  7. アクセスごとの表示速度をすべてログファイルに記録し、管理画面で一覧表示する機能を完全版として提供。
    ページスピード・タイムログ完全版についてはこちら。

ページスピード・タイムログのサンプル
キャッシュを削除して再読み込みをさせてみたり、通信速度が異なるスマホの4G回線などでもお試しください。
デベロッパーツール(開発ツール)を開いて再読み込みし、Loadの時間と比較しても良いでしょう。

ページスピード・タイムログのダウンロード
無料でダウンロードできます。

最も気になる点としては「このプログラムを組み込むことでページ表示が遅くなるか?」という点があるかと思いますが、結論から言ってほぼ遅くなりません

なぜなら、このプログラムを設置するにあたって読み込ませる必要のあるJSファイルは736KB(サーバがgzip圧縮に対応していればさらに低くなる)といった非常に軽い容量であり、さらに以下のようにasync属性付き(非同期)で読み込ませることが可能なので、ページ表示速度にほぼ影響しません。

<script src="ここにJavaScriptファイルへのパス" async></script>

また、上記ファイルの読み込みによってHTTPリクエストが1つ増える面についても、すでにSSL化(HTTPS)できているサイトの場合はHTTP/2の通信プロトコルになっていると思われますので、全く問題ありません。

そもそも、このプログラムを組み込むことによってページ表示が遅くなるようであれば、私自身が自分のサイトに使ってはいないでしょう。

説明
0、既存のページに組み込む前に、まずは以下の手順で実施すると間違いがないでしょう。

1、ZIPファイルを展開する。

2、そのまますべてのファイルをサーバ上にアップロードする。

3、index.html にブラウザでアクセスし、ページ表示速度が画面上に表示されているかを確認する。

4、ページ表示速度を表示させたいページで以下の作業をしてください。
以下の内容は同梱のindex.htmlのソースを参考にするとわかりやすいでしょう。

5、ページ表示速度を表示させたい部分に以下のコードを追加する。

<span id="pagespeed-timelog"></span>

6、pagespeed-timelog.jsを読み込ませる。

<script src="js/pagespeed-timelog.js" id="pagespeed-timelog-js" async></script>

pagespeed-timelog.jsは初期状態ではjsフォルダの中にありますが、この場所は自由に変更しても問題ありません。
場所を変更した場合や階層が深くなった場合は、以下のように読み込みのパス部分を適宜変更してください。

<script src="ここに階層/ここに階層/js/pagespeed-timelog.js" id="pagespeed-timelog-js" async></script>

組み込み作業は以上です。

このプログラムは秒数のテキスト文字を表示させるだけなので、CSSが同梱されていません。
CSSを自由に追加してデザインを変更することが可能です。

注意
本プログラムの使用においていかなる損害が発生したとしても、当方は責任を負いません。
了承していただける方のみご利用ください。
著作権は放棄していませんが、著作権表示などは必要ありません。

ダウンロードできるのはこのページだけにしたいため、再配布や無断での販売だけは禁止いたします。
それ以外であれば、カスタマイズして自分のお店サイトやクライアントの企業サイトなどに使用するのも自由です。

サポート者
無料のものですから、基本的にはサポートはありません。
しかし、初期状態での設置に関しては、サポートBBSにて対応しております。

初期状態とは、ダウンロードしたままの状態のことを指します。
それ以外のファイルが編集されていたり、既存サイトに組み込んだ場合などのお問い合わせは有償となります

しかし例外として、当サイト上で解説されているカスタマイズ方法だけを実践して正常動作しない場合は、無償サポート対象内になります。
その理由は、そのような使い方を想定してプログラムが作られているからです。

無償サポートの範囲外に関するものは、有償メールサポートや設置代行サービスがありますので、お問い合わせページからご相談ください。

時間
このページで紹介した「ページスピード・タイムログ通常版」はページ表示にかかった秒数をそのページ上に表示するだけでしたが、「完全版」ではその秒数をすべてログファイルに記録し、管理画面から一覧で見ることができます

完全版の詳細は以下のページです。
ページスピード・タイムログ完全版の機能やサンプルデモ

2019/08/13 バージョン1.0
  • 公開。
提供サポートなど