パフォーマンスとCore Web Vitals

4 min read

TTSWPはページのパフォーマンスを損なわずに音声を追加します。プレイヤーは遅延読み込みされ、アセットは最適化されており、必要がない限りページ読み込み時に何も実行されません。Core Web Vitalsを安全に保つ仕組みを説明します。

Core Web Vitalsへの影響

LCP(Largest Contentful Paint)

影響:なし

音声プレイヤーは遅延読み込みされます。訪問者がプレイヤーの近くまでスクロールするまで、JavaScriptはレンダリングも読み込みも行いません。ファーストビューのメインコンテンツの描画時間を測定するLCPには影響しません。

テスト方法:TTSWPを有効にした状態と無効にした状態でLighthouseを実行して比較してください。LCPスコアは通常の誤差範囲内に収まります。

CLS(Cumulative Layout Shift)

影響:ゼロ

プレイヤーのプレースホルダーは、完全に読み込まれたプレイヤーとまったく同じサイズです。遅延読み込みがトリガーされてプレースホルダーからフルプレイヤーに切り替わる際、レイアウトシフトは発生しません。

INP(Interaction to Next Paint)

影響:無視できるレベル

プレイヤーのJavaScriptは単一の小さなファイル(gzip圧縮後約15KB)で実行されます。クリックハンドラーはデバウンス処理され、対応している環境ではrequestIdleCallback上で動作します。INPへの典型的な影響はインタラクションあたり5ms未満です。

FID(First Input Delay、2024年にINPへ移行)

影響:ゼロ

プレイヤーは遅延読み込みされるため、初回ページ読み込み時にメインスレッドをブロックするものは何もありません。

アセットサイズ

プレイヤーを使用する際の、1ページあたりの読み込みコスト:

アセット サイズ(gzip圧縮後) 読み込みタイミング
公開用プレイヤーCSS 3 KB プレイヤー表示時
公開用プレイヤーJS 15 KB プレイヤー表示時
波形ヘルパー(PRO) 4 KB 波形有効時
スティッキーフッターJS(PRO) 2 KB スティッキー有効時
管理バーメニューアイコン 0.5 KB 管理者のみ

訪問者への初回読み込みの影響:プレイヤーまでスクロールするまで0バイト。

キャッシュプラグインとの互換性

TTSWPは主要なキャッシュプラグイン(WP Rocket、LiteSpeed、W3 Total Cache、WP Super Cache、Cache Enabler)すべてに対応しています。プラグインはアセットを自動登録し、正しいキャッシュ動作を確保します。

音声ファイル(MP3)は独自のキャッシュヘッダーを持ち、ストレージからオンデマンドで読み込まれます。ページキャッシュを圧迫しません。

キャッシュプラグインも参照してください。

CDN配信

有料プランでは、音声ファイルはAmazon CloudFrontから配信されます。これにより:

  • サーバーから遠い訪問者でも、再生ボタンをクリックしてからミリ秒単位で音声が再生されます
  • WordPressサーバーの帯域幅はHTMLのために確保されます

無料プランでは、音声はWordPressサーバーから配信されます。多くのブログではこれで問題ありません。音声コンテンツが多いページを持つ高トラフィックサイトでは、帯域幅の使用量が増える場合があります。

データベースへの影響

TTSWPが追加するデータベーステーブルと行数は少数です:

  • 音声キャッシュテーブル(生成済みファイル1件につき1行)
  • 統計テーブル(再生イベント1件につき1行、小さな整数データ)
  • 設定行(数十件のオプション)

データベースのサイズは音声付き投稿数に比例して増加します。500件の投稿を持つサイトでは、データベースの合計フットプリントは通常200KB未満です。

メモリとCPU

  • 管理ページ読み込み時のPHPメモリオーバーヘッド:約2MB
  • プレイヤーを含む公開ページのPHPメモリオーバーヘッド:無視できるレベル(CSS + JSのみ、ホットパスでのPHP処理なし)
  • バックグラウンドプロセス:なし(リクエストごとに実行されるcronジョブはありません)

サイトのテスト方法

TTSWPがパフォーマンスに影響を与えていないことを確認するには、以下のツールをご利用ください:

  • PageSpeed Insights - GoogleのCore Web Vitals公式テストツール
  • WebPageTest - 詳細なウォーターフォール分析
  • GTmetrix - パフォーマンスグレードと改善提案

TTSWPを有効にした状態と、一時的に無効にした状態でそれぞれ実行し、数値を比較してください。

パフォーマンスの低下が見られる場合

お知らせください。パフォーマンスの低下はバグとして対処します:

  1. 遅いページを記録する
  2. PageSpeed Insightsを実行してURLを共有する
  3. PROサポートに連絡するか、WordPress.orgフォーラムに投稿する

診断と修正をお手伝いします。

関連ページ