WordPressサイトの表示速度改善について、実際のクライアント案件での改善事例をご紹介します。今回は55点から99点という劇的な改善を達成した具体的な手法と、各要因がスコアに与える影響を詳しく解説します。
表示速度の確認方法
今回はGoogleが提供しているPageSpeed Insightsを利用してスコアを計測しました。
PageSpeed Insightsは高速化の指標としてよく使われますが、表示されるスコアは絶対的なものではありません。計測する時間や場所などの環境によって10点以上（場合によっては20点とかも!?）変動したりすることもあるようです。
記事中にスコアも記載しますが、参考程度に見ていただければと思います。
（以下画像クリックでリンク遷移）
改善前の状況
- PageSpeed Insights スコア：50-55点
- 使用テーマ： SWELL
- 依頼前の状況： 画像軽量化（WebP化）の対応はしていたが、スコアをもっと改善したく相談
サイト高速化で一番最初に考えられる画像の最適化は既に完了されている状況での依頼でしたので、以下内容には画像圧縮は入っておりません。
画像圧縮をしていないサイトの場合、ここが一番の改善策になるかもしれないので、最初に試してみてくださいね！
EWWW Image OptimizerやConverter for Mediaは画像圧縮でよく聞くプラグインです！
重い原因の特定と改善結果
コード軽量化を試しましたがほぼ改善せず
最初にコードの軽量化のプラグインを入れて、機能面を変更せずに改善できないか試してみましたが、スコアは数点しか変動せず、、、
根本的な解決が必要と思い、一つずつ機能を無効化していきました！
Googleフォント
このサイトには複数のGoogleフォントが読み込まれている状況でした。
そこでwebフォントの設定をオフにしました。
ちなみに既存テーマのSWELLの管理画面で明朝体を選択すると、自動的にGoogleフォントのNoto Serif JPになります。Noto Serif JPに対するこだわりが特にない場合は、游明朝に変更するのも一案です。（ゴシック体の場合は游ゴシックなのでデフォルトのままでOK）
対策
- Googleフォントを無効化
- Noto Serif JP → 游明朝（システムフォント）に変更
（デフォルトではGoogleフォントではないゴシック体を選択し、以下の記述を追加cssに記載することでサイト全体が游明朝になります。）
body {
font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}改善効果：
Googleフォントを1つだけ削除：5点程度改善
Googleフォント全て削除：15点程度改善
スライダー
SWELLの場合、メインビジュアルにに複数画像を設定するとスライダーの形式で表示されますが、このスライダーの表示が意外と重たかったのです。
メインビジュアルの画像1枚表示に変更してスライダーをオフにしてみました。
改善効果： 15点程度改善
Google Tag Manager
サイトの解析のために使われているGoogle Tag Managerでしたが、こちらも読み込みファイルに影響を与えてそうだったので一時的に無効化してみました。
改善効果： 数点改善
reCAPTCHA
お問い合わせフォームにてセキュリティ対策に利用しているreCAPTCHAが全ページで読み込まれる設定になっておりました。
トップページなどフォームが無いページには不要なので、お問い合わせページのみで読み込むように変更しました。
php例
// Contact Form 7をお問い合わせページでのみ読み込み
add_action('wp_enqueue_scripts', 'load_cf7_conditionally', 999);
function load_cf7_conditionally() {
if (!is_page('contact')) {
wp_dequeue_script('contact-form-7');
wp_dequeue_style('contact-form-7');
wp_dequeue_script('google-recaptcha');
wp_deregister_script('google-recaptcha');
}
}改善効果： 数点改善
その他の最適化
一時的に使用しているプラグインを全て無効化してみました。
上述した対策も含めて、この時点でスコアは99点になりました！
最終的な改善結果
一通り機能をオフにして計測を行いましたが、実際には必要な機能やブランディングの観点から使用したい機能もあるので、お客様と相談してどの機能をオフにするか検討しました。
重要な学び：小手先の技では限界がある
今回の改善プロセスで分かったのは、根本的な原因を解決することの重要性です。
小手先の対応だと数点レベルしか改善できませんでしたが、根本的に機能を見直すことでページスピードに大きく影響することが分かりました。
効果が薄かった手法
- CSS/JS圧縮プラグイン
- 画像最適化（既にWebP化等で軽量化済みのため）
- 細かなキャッシュ設定
効果があった手法
- 重いリソース自体の除去
- 条件付き読み込みの実装
- システムフォントの活用
まとめ
今回の事例では、プラグインに頼った小手先の改善ではなく、根本原因を解決することで劇的なパフォーマンス向上を達成できました。
特にreCAPTCHAやGoogleフォントなど、「便利だから」という理由で入れがちな機能こそ、本当に必要かどうかを見直すことが重要です。
どの機能がどう影響するかなどはサイトによって異なるので確実なことは言えませんが、実際のWeb制作現場での参考になれば幸いです。
