1日に20万PVを超える大規模なWordPressサイトにおいて、モバイルのPage Speed Insightの数値が低いという課題がありました。特に、アドセンスなどのJavaScript広告が大量に読み込まれており、体感的には問題ないものの、数値的には改善が必要でした。
使用技術と環境
テーマ: SWELL
サーバー: エックスサーバー
CDN: Cloudflare
画像最適化プラグイン: EWWW Image Optimizer
高速化対策のポイント
1. SWELLの高速化機能の不使用
SWELLの高速化機能は細かいカスタマイズができないため、Page Speed Insightの数値を追求するには不向きと判断し、基本的には使用しない方向で対応しました。
2. エックスサーバーのXpage Speedの無効化
Xpage Speedはサーバー側の機能であり、高速化の効果は高いものの、小回りが利かず、トラブル発生時の切り分けが難しいため、無効化しました。エックスサーバーは初期状態で十分高速であるため、余計な設定を加えることで逆に遅くなるリスクを避けました。
3. DBクエリの最適化
遅いDBクエリをキャッシュが効くように変更し、データベースの負荷を軽減しました。
4. JavaScriptの遅延読み込み
レンダリングブロックするJavaScriptを遅延読み込みする処理を追加し、ページの表示速度を向上させました。
5. CLS（Cumulative Layout Shift）の改善
広告が多いサイトでは、広告の読み込み時にレイアウトシフトが発生し、CLSが悪化する原因となります。これを改善するため、広告の表示領域をあらかじめ確保し、遅延読み込みするようにしました。これにより、CLSをほぼ0に抑えることに成功しました。
6. LCP（Largest Contentful Paint）の最適化
特にモバイル環境ではLCPの数値が極端に悪化するため、ファーストビューの画像の遅延読み込みをしないように細かくカスタマイズしました。
7. EWWW Image OptimizerとCloudflareの連携
EWWW Image Optimizerを使用してWebP形式への変換と読み込みを行っていましたが、Cloudflareを利用している場合、.htaccessにリライトルールが書き込まれない問題がありました。この問題に対応し、画像の最適化をさらに進めました。
結果
これらの高速化施策を実施した結果、Page Speed Insightの数値は以下のように大幅に改善されました。
モバイル: 80後半
デスクトップ: 90以上
まとめ
広告が多い大規模サイトにおいても、適切な対策を講じることでPage Speed Insightの数値を大幅に改善することが可能です。特に、CLSやLCPの最適化は、ユーザー体験の向上に直結する重要なポイントです。今後の運用においても、継続的なモニタリングと最適化が求められます。
