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

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

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を自由に追加してデザインを変更することが可能です。

注意点

サポートに関して

有償メールサポートと設置代行サービスについて

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

ページスピード タイムログ完全版について

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

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

アップデート履歴

2019/08/13　バージョン1.0

• 公開。