はじめに
Webサイトの利用者体験を向上させるために、ページが完全に表示されるまでの時間が重要な要素となります。Total Blocking Time (TBT) は、ユーザーが最初にタップまたはクリックできるまでに発生する遅延時間で、特にモバイルデバイスでのパフォーマンスに大きな影響を与えます。この記事では、WordPressサイトのTBTを効果的に削減するために実行すべき手順と設定について詳しく紹介します。
症状・背景
このテーマが必要になる主な場面:
- サイトが遅く、ユーザーからのフィードバックに不満が多い
- Google Lighthouse ツールで低いパフォーマンススコアを取得している
- モバイルデバイスでの利用者が減少している可能性がある
手順・設定方法
ステップ1: ウェブサイトのTBTを確認する
# Google Lighthouse拡張機能を使用してウェブページのパフォーマンスをチェックします。
lighthouse https://example.com --chrome-flags="--headless" > lighthouse-report.json
# TBTが高値である場合、次に進んで最適化を行います。ステップ2: キャッシュ設定を調整する
# ファストCGIプラグインの有効化と設定を確認します。
wp plugin activate fastcgi-cache
# 設定ファイルを編集して、キャッシュが適切に機能することを確認します。
nano /etc/nginx/fastcgi_cache.confステップ3: CDNを使用する
# Cloudflareアカウントを作成し、WordPressサイトを追加します。
cloudflare-wrapper add-zone example.com --email user@example.com --api-token abcdef1234567890
# リダイレクト設定とCDNのキャッシュ設定を調整します。
nano /etc/nginx/conf.d/example.com.confステップ4: プラグインやテーマの最適化
# 不要なプラグインのアンインストールを行います。
wp plugin deactivate unnecessary-plugin-name --network
wp plugin delete unnecessary-plugin-name --network
# 最新バージョンのテーマを使用していることを確認します。
wp theme update wpbootstrap注意事項
- キャッシュ設定を変更する際は、サイトが正常に動作することを確認してください。
- CDNプロバイダーのキャッシュ設定を誤って行うとパフォーマンスが悪化することがありますので注意が必要です。
- セキュリティ上の問題がある場合は、適切なバックアップを作成し、その上での変更を行ってください。
- パフォーマンス監視ツールやサービスを活用して定期的にパフォーマンスをチェックすることをお勧めします。
まとめ
1. TBTの確認: Google Lighthouse を使用して現状のTBTを把握し、改善が必要な箇所を見つけます。
2. キャッシュ設定: 必要に応じてFastCGI キャッシュや他のキャッシュプラグインを使用します。
3. CDN利用: 高速化と負荷分散のためにCDNサービスを利用します。
4. 最適なプラグイン/テーマ: 余分な要素を削除し、最新のものに更新します。
5. 定期的な監視: パフォーマンスが安定していることを確認するために、定期的にモニタリングを行います。
関連記事: