イメージ

サイト訪問者の表示速度を記録できるページスピード・タイムログ完全版の機能やサンプルデモ

公開日
最終更新日
2021年10月25日
著者

時間
ページの表示速度をそのページ上に表示するプログラム、「ページスピード・タイムログ」を以下のページから無料ダウンロードできます。(以下、「通常版」と記載)
https://www.1-firststep.com/archives/8480

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

現在の最新バージョンは2021年2月26日公開の1.2です。
参考ページ：プログラムをアップデートするの際の思想について

各バージョンごとのアップデート内容については、このページ最下部の「アップデート履歴」に記載してあります。

  1. ページスピード・タイムログ完全版の概要
  2. 日別と月別を切り替える機能
  3. 表示速度を色分け表示する機能
  4. 何ページ閲覧したかを判別する機能
  5. 表示件数を変更できる機能
  6. 円グラフで割合を表示する機能
  7. サンプルデモ
  8. 動作環境
  9. 基本設置方法
  10. 管理者ログインのための「ユーザー名」と「パスワード」を変更する
  11. 既存サイトへの組み込み方法
  12. 販売価格
  13. 領収書について
  14. 注意点
  15. 有償メールサポートと設置代行サービスについて
  16. アップデート履歴

一応説明しておきますと、ページの表示速度というものは「キャッシュを無効にしてページ表示速度を計測する方法」のページで解説しているように、ブラウザのデベロッパーツール(開発ツール)を使って計測することが可能です。
ページ読み込み時間
しかし、デベロッパーツールで計測する上記の方法はあくまでも自分の環境(PC性能・回線速度)での表示速度でしかなく、他の人(サイト訪問者)がどのぐらいの表示速度でこのサイトを開いているかまではわかりません。

この完全版では、サイトにアクセスしてきた人それぞれの表示速度をすべて記録し、管理画面で一覧表で見ることができます。
ページ表示速度の一覧
どのページの表示にどれだけの時間がかかったかを確認できます。
ついでにIPアドレスやホスト名も記録するので、簡易的なアクセス解析ツールとしても役立ちます。(個人情報になるので、このキャプチャ画像ではモザイクをかけています)

以下からは細かな機能を簡単に紹介していきます。

ログイン直後はその当日1日分の表示になっていますが、前日、前々日など1日単位で遡っていくことが可能です。
当日1日分

ページ左上の日別・月別切り替えボタンを押すと、月別表示に切り替わります。
月別表示

表示速度の欄は秒数によって色分けされるので、一目で判別しやすくなっています。
色で判別
「ページが完全に表示されるまでに3秒以上かかると、53％の人はページを離れる」というGoogleの2017年の調査結果を基準にし、3秒以上はすべて赤色での表示になります。

初回訪問の場合は2ページ目以降の表示とは違い、事前にブラウザにキャッシュが保存されていないために表示速度が遅くなりがちです。

このプログラムでは初回訪問での表示か、それとも何ページ目での表示かを判別し、それも記録します。
初回訪問かどうか

一覧表の表示件数はいつでも切り替えることが可能です。
表示件数の設定

管理画面にログイン直後はデフォルトで50件の表示になっていますが、この「デフォルト表示件数」は同梱のconfig.phpのファイル内で変更することが可能です。

//【任意】 一覧表の表示件数
$pt_show_posts = '50';

円グラフで表示速度の全体割合を確認することもできます。(1日単位、または月単位)
円グラフでの比率
左の円グラフはその日またはその月の全てのアクセスの表示速度の比率になります。
右の円グラフはその日またはその月の初回アクセスのみの表示速度の比率になります。

初回のアクセスはキャッシュがない影響で、表示が遅くなっていることがわかると思います。

公開するページ(速度計測ページ)のサンプル
この公開ページ(速度計測ページ)はサンプルなので、ページ内に余計なものが一切ありません。
そのため表示速度は恐ろしく速く、ほとんどのアクセスが1秒以内での表示になってしまう点はご了承ください。
デベロッパーツールを開いて回線速度を遅く絞って表示させてみるのも良いかもしれません。

ページスピード・タイムログ完全版の管理画面サンプル
ユーザ名はtani、パスワードは0000です。
ログアウトはブラウザを閉じるか、またはログアウトボタンを押すことで可能です。

PHP5.6以降を推奨。
このサイト上にあるサンプルデモはPHP8世代で稼働しています。

ログの保存はSQLite方式になっているので、サーバ側でデータベースを用意する必要はありません。

説明
設置する人が最低限設定する必要があるファイルはありません。
ただ、管理画面にログインするための「ユーザー名」と「パスワード」は変えておいた方が良いですので、プログラムの動作確認後にそれだけは変更してお使いください。

0、PHPが動くサーバーが必須です。
PHPが動くサーバであるか確認しましょう。
サーバ側の設定でWAF設定がオンになっていたりすると、動作できませんのでご注意ください。

1、zipファイルを展開します。

2、すべてサーバ上にアップロードします。

設置作業は以上です。
計測ページ(index.html)にブラウザでアクセスし、そこに表示された秒数が管理画面のほうにも記録されているか確認してみましょう。

ログインページは、
pagespeed/php/login.php
です。

上記の設置・動作確認が無事に完了したら、管理者ログインのための「ユーザー名」と「パスワード」を必ず変更しておきましょう。

注意点：ファイル保存の際は必ず文字コード設定を「UTF-8 BOMなし(UTF-8N)」で保存してください。
そのやり方については「文字コードをUTF-8 BOMなし(UTF-8N)でファイル保存をする方法」を参考にしてみてください。

設定ファイルは、
pagespeed/php/config.php
です。

このconfig.phpの中では「一覧表のデフォルト表示件数」や「一覧表で非表示にするIPアドレス」の設定部分がありますが、すべて任意です。
ですので、説明を読むのが面倒な場合はすべてデフォルトのまま使用しても問題ありません。

既存サイトへの組み込み方法は、このプログラムの通常版と基本的に同じです。
異なる点としては以下の2点だけです。

1、通常版とは読み込ませるJSファイル名が少し違う。
通常版では読み込ませるJSファイルはpagespeed-timelog.jsですが、完全版はpagespeed-timelog-js.phpになります。
前者のpagespeed-timelog.jsは通常版専用のJSファイルなので、完全版では不要です。
バージョン1.1からは通常版と同名の「pagespeed-timelog.js」に変更しました。
しかし、中のコードは通常版と完全版では異なりますので、通常版のほうは破棄してください。

2、完全版では読み込ませるJSファイルの場所を変更できない。
通常版では読み込ませるJSファイルの場所を自由に変更できますが、完全版では場所の移動は不可です。
初期状態のまま pagespeed/js/ の中に入れておき、計測するページのHTMLで以下のように階層を調整して読み込ませてください。

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

電卓
販売価格は10,000円(税抜)となります。
設置メールサポートが付いていますので、設置の際につまづくようなことがありましたらご質問ください。

【注意点】
設置してプログラムを正常動作させるまでのサポートです。
デザインを変更するカスタマイズなど、それ以外のご質問は有償扱いとなりますのでご了承ください。

ご購入は以下からどうぞ。
ペイパルと銀行振込でのお支払いの場合は、料金のお支払いをしていただき、その入金確認後にメールで添付にてお送りする形となります。
クレジット決済の場合はお支払後にすぐダウンロードができますので、お急ぎの方にはおすすめです。

【ページスピード・タイムログ完全版のご購入】
ペイパルでお支払い
お問い合わせページからお申込み(銀行振込)
STORESでご購入(クレジットカード・コンビニ決済) (決済後ダウンロード可能)
このサイトでご購入(クレジットカード決済) (決済後ダウンロード可能)

【クレジット決済の注意点】
上記のペイパルと銀行振込以外の場合は、お支払後にアドオンファイルをすぐにダウンロードできます。

このサイトでのクレジット購入の場合は、入力必須な項目を最低限としている分、ダウンロードはそのセッション中(ブラウザを閉じるまで・または24分以内)にのみ可能となります。
再ダウンロードしたい場合は、お問い合わせページからご連絡くだされば、本人確認後にメール添付にてお送りいたします。

注意
カスタマイズしていない初期状態でも発生するようなバグ(不具合)があった場合には、追加料金なしでバグ修正を行いますのでご連絡ください。
(お客様の手によってJavaScriptファイルやPHPファイルを独自カスタマイズされている場合は、別途料金が発生します)

サポート者
この商品には「設置メールサポート」が付いていますので、サーバ上に設置してプログラムが正常動作するまでにわからない点がありましたら、お問い合わせページからご連絡ください。

既存サイトにデザインを合わせたり、プログラムファイル(JavaScriptやPHPファイル)を編集する必要のあるカスタマイズは有償対応となります。
そのようなご質問の場合は、有償メールサポートやカスタマイズ依頼をご検討ください。

また、設置代行サービスは10,000円(税抜)となります。
設置代行サービスでは設置するサイトのデザインにある程度合わせたり、ご希望の設定や動作確認はすべてこちらで実施した状態での納品となります。

2019/08/13　バージョン1.0
  • 公開・発売。
2020/05/20　バージョン1.1
  • JSファイルの名前を「pagespeed-timelog-js.php」から通常版と同じ「pagespeed-timelog.js」に変更。
    （中に書かれているコードは通常版とは異なりますので、間違えないようにしてください）
  • 測定誤差が小さくなるようにわずかな修正。
  • その他、わずかな微調整。
2021/02/26　バージョン1.2
  • ホスト名やユーザーエージェントによる除外設定を追加。
  • 除外設定(IPアドレス・ホスト名・ユーザーエージェント)を後から追加した場合に、過去の記録からも除外されるように修正。

このページと関連しているページ一覧

提供サポートなど