WordPress でのTotal blocking time ( TBT ) 、メインスレッドタスクと JavaScript を削減する方法
Total blocking time ( TBT ) は、長時間実行されるメインスレッドタスクによって引き起こされるため、PageSpeed Insights で確認すべきレポートです。
「長時間実行されるメインスレッドタスクを回避する」レポートを開きます。最も時間のかかるタスクは、Google タグマネージャやアナリティクスなどのサードパーティ製コードによるものでしょうか？ jQuery を使用する特定のプラグインによるものでしょうか？ 多くの場合、ブロック時間は WordPress プラグイン、テーマ、またはサードパーティ製コードによって追加された JavaScript によって発生します。
PageSpeed Insights の多くの推奨事項と同様に、軽量な基盤を使用することで、ほとんどの問題を解決できます（この場合、サードパーティ製のトラッキングツールを過度に使用することも避けられます）。
ソースから始めるのが最善ですが、JavaScript の遅延、延期、縮小などの最適化を行うこともできます。また、Perfmatters などのアセットアンロードプラグインを使用して、特定のコンテンツから特定のプラグイン/JavaScript ファイルを削除することもできます。これは 3 つのステップで構成します。ボトルネックを特定し、ソースから開始し、残りのすべてを最適化します。質問がある場合はコメントしてください。
以下は、Total Blocking Time（TBT：合計ブロッキング時間）に関する英語コンテンツの日本語翻訳と要約です。WordPressユーザーがTBTを改善するための15ステップが解説されています。
✅ TBT（Total Blocking Time）とは？
**TBT（合計ブロッキング時間）**は、ユーザーの操作に対してブラウザが応答できない時間を示します。Core Web Vitalsの1つで、JSやCSSの処理が主な原因となります。
| TBT（ms） | 評価 |
|---|---|
| 0～300 | 良好 |
| 300～600 | 改善が必要 |
| 600以上 | 悪い |
🔧 TBT改善のための15の実践ステップ
1. 長時間かかるメインスレッド処理を特定
- PageSpeed Insightsで「メインスレッド処理時間が長い」タスクを確認
- 特定のJavaScriptファイル、サードパーティコード（例：jQuery、タグマネージャー）が原因であることが多い
2. JavaScriptを遅延読み込み
- トラッキングコード（GA、FBピクセル、reCAPTCHAなど）はTBTの元凶
- 不要なコードを削除し、残りを**遅延読み込み（delay）**設定
- プラグイン例：WP Rocket（自動）、FlyingPress・Perfmatters（手動）
3. JavaScriptを多く含むプラグインを削除
- Chrome DevToolsのカバレッジレポートで「未使用JS/CSS」や「重いファイル」を可視化
- WP HiveやQuery Monitorも有用
4. テーマやページビルダーの見直し
- ElementorやDiviはCSS/JSが多い → GeneratePressやBlocksyなど軽量テーマを検討
- ElementorのExperimentsで最適化機能をONにする
- ヘッダー/フッターはCSSでコーディング推奨
5. 特定ページのみで使うJSは読み込み停止
- PerfmattersやAsset CleanUpなどのスクリプト制御プラグインを活用
- 例：
- SNS共有プラグイン → 投稿ページのみ
- 問い合わせフォーム → 問い合わせページのみ
6. jQueryの削除
- jQueryはTBT悪化の主因
- Perfmattersの依存関係チェッカーで確認
- 使用していなければ、jQuery migrateも無効化可
7. JS/CSSのミニファイ（Minify）
- ファイルサイズを削減
- サイトが壊れる場合は問題ファイルを除外
8. JS/CSSの結合（Combine）は要注意
- HTTP/2利用サイトでは結合は逆効果
- 通常はファイルは分割したままが良い
9. Critical CSSが有効になっているか確認
- 主要コンテンツのCSSを先に読み込むことでTBT/LCP/CLSを同時に改善可能
- WP RocketやFlyingPressなどに設定項目あり
10. フォントのローカルホスト＋Preload/Inline
- fonts.gstatic.comなど外部CDNから読み込むとTBTが増加
- ローカルにホスティングし、上部フォントをPreload＋
crossorigin付きで指定 - 可能であればインラインフォントを使用
11. JavaScriptのDefer（遅延実行）
defer指定により、JSの実行を遅らせてレンダリングブロックを回避- WP RocketやAsync JavaScriptプラグインなどで対応可能
12. 画像最適化
- 軽量化・遅延読み込み・WebP形式・モバイル向けリサイズを行う
- おすすめCDN：Cloudflare Pro（Mirage/Polish）、BunnyCDN Optimizer
- 画像CDNの方がプラグインより効果的でシンプル
13. リソースヒントの活用（Preload以外）
prefetchやpreconnectを慎重に使う（多用しすぎに注意）- フォントはローカルホストが原則、CDNはキャッシュプラグインに任せる
14. 未使用CSSの削除
- 使用されていないCSSがメインスレッドをブロックする原因に
- WP RocketはCSSをインラインで読み込む → 実ユーザーには遅くなる
- FlyingPress、LiteSpeed Cache、Perfmattersの「外部ファイル方式」がおすすめ
15. 4xx/5xxエラーの修正
- GTmetrixのWaterfallで赤エラーを確認
- エラーは通信遅延・ブロッキング時間増加の元。必ず修正