WordPress＋PHPで自動速度計測を作る方法【投稿ページ限定】

この記事では、WordPress＋PHPで、**投稿ページのみ**に「ページ表示速度を自動計測して出力する仕組み」を実装する手順をご紹介します。固定ページやアーカイブ、カテゴリー等には影響せず、投稿ページだけに限定して計測が走るようにします。

1 実装のポイント

ポイントを整理すると下記の通りです。

• 投稿ページかどうか（`is_single()`など）を判定する。
• 計測開始・終了タイミングをPHPで取得（例：`microtime(true)`）。
• 出力タイミングを適切に（例：`wp_footer`フックなど）行う。
• 固定ページ、アーカイブ、カテゴリー、タグ一覧などでは実行されないように条件分岐する。
• スマホ、タブレットでは非表示にしています。

2 functions.php にコードを追加

//-------------------------------------------
// 投稿ページのみ速度計測を行う処理
//-------------------------------------------
add_action( 'wp', 'my_speed_measure_start' );
function my_speed_measure_start() {
    if ( is_single() && 'post' === get_post_type() ) {
        global $my_speed_start_time;
        $my_speed_start_time = microtime( true );
    }
}

add_action( 'shutdown', 'my_speed_measure_end' );
function my_speed_measure_end() {
    if ( is_single() && 'post' === get_post_type() ) {
        global $my_speed_start_time;
        if ( empty( $my_speed_start_time ) ) return;

        $elapsed = microtime( true ) - $my_speed_start_time;
        $elapsed = number_format( $elapsed, 3 );
        // バックスラッシュを一切使わない
        echo '<div class="page-speed-report">Page生成時間：' . $elapsed . '秒</div>';
    }
}
  

3 javascript にコードを追加

サーバー側だけで計測しているため、特に JavaScript 計測は必須ではありませんが、クライアント側（ブラウザ）でのロード完了時間を取得したい場合には、以下のように追加できます。

ファイル名：page-speed.js
保存先：wp-content/themes/child-theme/js/page-speed.js

//-------------------------------------------
// 投稿ページのみ速度計測を行う処理
//-------------------------------------------
document.addEventListener('DOMContentLoaded', function(){
    var t = (performance.timing.loadEventEnd - performance.timing.navigationStart) / 1000;
    var el = document.createElement('div');
    el.className = 'client-speed-report';
    el.textContent = 'ブラウザロード時間：' + t.toFixed(3) + '秒';
    document.body.appendChild(el);
});
  

このスクリプトを出力したい場合は、先の PHP の `echo` 部分に `` を追記しても構いません。

3.1 ディレクトリ構造

4 汎用CSS

速度計測結果を目立たせつつも過度にならないよう、以下 CSS をテーマの CSS ファイルや「追加 CSS」へ記述してください。

/* -----------------------------------------------------
 * 投稿ページのみ速度計測を行う処理
 * ----------------------------------------------------- */

.page-speed-report,
.client-speed-report {
  position: fixed;             /* 固定配置 */
  left: 50%;                   /* 横中央 */
  transform: translateX(-50%); /* 中央に正確配置 */
  background: #ffffff;         /* 背景白 */
  color: #000;                 /* 黒文字 */
  border: 1px solid #ccc;      /* 枠線 */
  padding: 6px 12px;           /* 余白 */
  border-radius: 6px;          /* 角丸 */
  font-size: 14px;             /* 読みやすいサイズ */
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  z-index: 9999;               /* 最前面 */
  text-align: center;          /* テキスト中央寄せ */
}

/* 位置を少しずらして2段に並べる */
.page-speed-report {
  bottom: 10px;  /* 下側（PHP測定） */
}

.client-speed-report {
  bottom: 40px;  /* 上側（JS測定） */
}

/* ----------------------------
 * スマホでは非表示（幅768px以下）
 * --------------------------*/

@media screen and (max-width: 1024px) {
  .page-speed-report,
  .client-speed-report {
    display: none;             /* 非表示 */
  }
}
  

5 完成イメージ

6 代用プラグイン

自作コードではなくプラグインで済ませたい場合、例えば以下が参考になります：

• Query Monitor – WordPress のページ生成時間／メモリ使用量等を管理画面で確認可能。
• Performance Lab – サーバー側計測に対応したモジュールを含みます。:contentReference[oaicite:4]{index=4}

ただし、プラグインでは投稿ページに限定してのみ出力、という細かい条件設定ができないケースもあるため、自作コードのほうが柔軟です。

7 まとめ

投稿ページにだけ「生成時間を自動表示」する仕組みを、WordPress + PHP で簡単に実装できます。functions.php に条件付きで処理を追加することで、固定ページやカテゴリー、タグアーカイブなどには影響を与えずに導入可能です。

表示スタイルやクライアント側計測まで拡張すれば、さらにユーザー体験の改善にも役立ちます。ぜひ自分のテーマに合わせてカスタマイズしてみてください。