WordPress表示速度改善事例｜PageSpeed Insightsモバイル64→92点
WordPressサイトの表示速度を改善したいと思っているけど、「何をすれば良いのかわからない」とお悩みではありませんか？
ページの表示速度は、SEOだけではなく、ユーザー体験にも影響を及ぼします。
あなた自身、普段Webサイトを閲覧していて、「このサイト読み込み遅すぎてイライラする」と思ったことがあるのではないでしょうか？
実際、ページの表示速度が遅いと、ユーザーの離脱につながってしまいます。どれだけ良いコンテンツや商品があっても、表示速度が遅いというだけで、離脱されてしまうのです。
この記事では、WordPress表示速度改善の一例として、自社のWordPressサイトで実施した施策と、各施策ごとの数値の変化を紹介します。貴社サイトの表示速度を改善する際の参考になれば幸いです。
目次
モバイル64→92点、PC82点→98点｜WordPressの表示速度改善の結果
施策実施前のPageSpeed Insightsでは、パフォーマンススコアがモバイルで64点、PCで82点でした。また、モバイルのLCP（画面内の主要なコンテンツが表示されるまでの時間）は17.9秒でした。
実施したのは、
- 画像のWebP化や読み込み順序の調整
- 不要なCSS、JavaScriptの削減
- Google Fontsの読み込み方法の見直し
などです。
結果は以下のとおりです。
| 測定項目 | 改善前 | 改善後 |
|---|---|---|
| モバイルのパフォーマンススコア | 64点 | 92点 |
| PCのパフォーマンススコア | 82点 | 98点 |
| モバイルのLCP | 17.9秒 | 3.0秒 |
※数値は各測定時点の結果です。PageSpeed Insightsのスコアは、測定ごとに変動します。
改善前後のスコアと表示指標を比較
実際の結果をご紹介します。
【モバイル版改善前 64点】
【モバイル版改善後 92点】
モバイル版では、パフォーマンススコアに加え、LCPが17.9秒から3.0秒へ短縮しました。
また、FCP（最初の文字や画像が表示されるまでの時間）も、2.1秒から1.7秒に改善しています。
【PC版改善前 82点】
【PC版改善後 98点】
PCでも、パフォーマンススコアが82点から98点に改善しました。
LCPは、2.3秒から0.9秒まで改善しています。
施策ごとのスコア・LCPの推移
続いて、もう少し細かく、各施策ごとの結果を紹介します。
以下はモバイルの測定結果です。
| 実施した施策 | パフォーマンススコア | LCP |
|---|---|---|
| 改善前 | 64点 | 17.9秒 |
| ① FV画像のWebP化・読み込み順の見直し | 67点 | 9.2秒 |
| ② 不要なCSS・JavaScriptの削減 | 70点 | 8.9秒 |
| ③ Google Fontsの読み込み方法の見直し | 88点 | 3.8秒 |
| ④ バナー画像のWebP化・サイズの出し分け | 92点 | 3.0秒 |
※各行は、それまでの施策をすべて反映した状態での測定結果です。数値は測定ごとに変動するため、各施策単独の効果を厳密に示すものではありません。
①のFV画像の調整では、LCPが17.9秒から9.2秒に短縮しました。ただ、スコアは64点から67点までしか改善しませんでした。
その後、不要なCSS・JavaScriptの削減で70点まで改善しましたが、LCPは9秒前後から大きな変化はありませんでした。
数値に大きな変化が見られたのは、Google Fontsの読み込み方法を見直した段階です。LCPが8.9秒から3.8秒に短縮し、スコアも88点に上昇。その後、バナー画像を最適化し、92点まで改善しました。
改善前の調査で分かった表示速度の課題
表示速度を改善するにあたり、まずはPageSpeed Insightsの診断結果をもとに、原因を調査しました。
主な原因は3点でした。
FVの画像4枚を最初から同時に読み込んでいた
トップページのFV（ファーストビュー）は、4枚の画像が切り替わるスライダー形式でした。ちなみに、画像はJPG形式で、4枚の合計容量は約1.9MBでした。
最初に表示される画像は1枚ですが、読み込み時には、まだ画面に表示されていない残りの3枚も取得する仕様になっていたため、初期表示が遅れる原因になっていました。
不要なCSS・JavaScriptを読み込んでいた
サイト構築時に意図的に設定していない限り、CSSファイルやJSファイルは、特定のページでしか使用していなくても、全ページで読み込んでしまっている場合があります。
自作したファイルだけでなく、プラグインを使用している場合も、不要なファイルを読み込んでしまっているケースがあります。
例えば、今回の場合は、お問い合わせフォームのないトップページでも、Contact Form 7やスパム対策のCloudflare Turnstileに関連するファイルが読み込まれていました。
フォームを設置したページでは必要ですが、トップページでは読み込みを省けるものです。
また、Font Awesomeについても、表示速度に影響を与えていることがわかりました。
フォント・バナー画像にも改善の余地があった
Google Fontsでは、フォントを定義するCSSが、画面の描画をブロックするリクエストとして検出されていました。
フォントは重要要素ですが、表示速度に大きな影響を与える要素でもあります。
そのため、見た目を維持しつつ、
読み込み方法を変更できないか検討しました。
表示速度改善のために実施した4つの施策
では次に、具体的にどのように改善したかもご紹介します。
施策① FV画像のWebP化と読み込み順の見直し
画像をWebP化するのは表示速度改善のための代表的な手法ですが、あまりにも軽量化しぎると、画質が悪くなる可能性もあります。
いくら表示速度が改善されたとしても、画質が悪くなってしまっては元も子もありません。そのため、軽量化した画像を元画像と比較してから、差し替えを判断する必要があります。
今回のケースでは、FV画像4枚の容量を、約1.9MBから248KB（約87%削減）に削減しました。
また、画像の軽量化に加えて、スライダー画像の2〜4枚目をページ読み込み完了後に取得するようにプログラムを書き換えました。なお、最初に表示する1枚目には、優先的に読み込むような設定をしています。
その結果、モバイルスコアが64から67点、LCPが17.9秒から9.2秒に改善しました。
施策② 不要なCSS・JavaScriptの読み込みを削減
デザイン上、Font Awesomeのアイコンを使用していましたが、使用しているのが2種類だけで、SVGファイルで代替できることもわかりました。そのため、Font Awesomeの読み込みをやめ、SVGファイルに変換しました。
また、フォーム関連のCSSについては、お問い合わせや資料請求など、フォームを使用しているページのみで読み込む設定に変更しました。
その結果、モバイルスコアが67点から70点に改善しました。
施策③ Google Fontsの読み込みを見直す
使用できるフォントの幅が広がるため、Google Fontsを使用しているサイトは多いと思います。
ただ、Google Fontsについては、ページの表示速度に影響を与える原因になっていることが多いです。
今回のケースでは、日本語フォントに「Noto Sans JP」を使用しており、トップページだけでも複数の該当ファイルが読み込まれている状態でした。
また、フォントを定義するCSSが画面の描画を遅らせていることも確認できました。フォントCSSの待ち時間に加え、フォントとFV画像の読み込みが通信帯域を分け合うことも、LCPに影響している可能性を考えました。
対策として、Google Fontsの配信先へ事前に接続する「preconnect」と、フォントCSSの到着を待たずに画面を描画できる「非同期読み込み」を実施しました。フォントそのものを変更せず、読み込み方法を見直すことで改善を図っています。
結果、モバイルスコアが70点から88点へ、LCPが8.9秒から3.8秒に改善しました。今回の施策の中では、最もスコアが大きく伸びが施策でした。
施策④ バナー画像のWebP化とサイズの出し分け
続いて、ページ内で使用しているバナー画像の改善に着手しました。
バナーは文字を含むため、圧縮によって文字がにじんだり、読みにくくなったりしないか確認する必要があります。今回は元のPNG画像とWebP画像を比較し、問題ないと判断しました。
合計容量（11枚）は、約1.5MBから約575KBまで削減できました。
さらに、元のサイズに加えて幅600pxの画像も用意し、srcsetを使って出し分けるようにしました。画面幅や画素密度に応じてブラウザが画像を選ぶため、小さく表示する場合に必要以上に大きな画像を読み込むことを抑えられます。
結果、モバイルスコアが88点から92点へ、LCPが3.8秒から3.0秒まで改善しました。
WordPressの表示速度が改善しないときの確認ポイント
改善施策を実施された方の中には、「画像をWebP化したけど、スコアが全く変動しなかった」という方もいるかもしれません。
表示速度を効率的に改善する秘訣は、センターピン、つまり改善を妨げている主要な原因を見つけることです。
PageSpeed Insightsでスコアを調べると、画像のサイズが影響を及ぼしているといった原因は把握できると思います。ただし、サイト内の画像を片っ端から軽量化していっても、必ずしもスコアが改善するとは限りません。
スコアに大きな影響を及ぼしている原因が他にあれば、画像の軽量化だけでは十分な効果を得られない可能性が高くなります。
今回の事例でも、FV画像の軽量化と読み込み順の見直しによって、LCPは17.9秒から9.2秒へ短縮しました。しかし、スコアは64点から67点への上昇にとどまりました。その後、Google Fontsの読み込み方法を見直した段階で、スコアが70点から88点へ大きく改善しています。
つまり今回の場合で言えば、センターピンは「Google Fontsの読み込み」です。
施策を実施しても期待した変化がない場合は、次の点を確認してみてください。
- 画像の容量だけでなく、読み込み順も確認する
- 描画をブロックしている要素はないか（CSSやGoogle Fontsの読み込みが、表示を待たせていないか）
- そのページで使っていないファイルを読み込んでいないか（フォームやプラグイン関連のCSS・JavaScriptを全ページで読み込んでいないか）
大切なのは、パフォーマンスに大きな影響を与えている原因を見つけることです。また、点数だけで判断せずに、各指標の変化を見ることも大事です。
バイテックでは、WordPress高速化・表示速度改善のサービスを提供しています。
「何が原因かわからない」「原因はわかったけど、実装が難しい」といった場合でも、原因の調査から改善施策の実装、実施後の効果測定までサポートします。自社サイトの表示速度でお困りの方は、お気軽にご相談ください。
まとめ｜原因を調べ、施策ごとの効果を確かめることが大切
今回は、自社のWordPressサイトで実施した表示速度改善の事例をご紹介しました。画像のWebP化や読み込み順の調整、不要なCSS・JavaScriptの削減、Google Fontsの読み込み方法の見直しによって、モバイルスコアは64点から92点へ、PCスコアは82点から98点へ改善しました。
ただし、サイトごとに原因や、有効な改善方法は異なります。
今回、大きな変化が見られたフォントの読み込みも、すべてのサイトで同じ効果が得られるわけではありません。
大切なのは、自社サイトの原因を調べ、施策を実施するたびに効果を確かめることです。 スコアだけでなく、LCPなどの指標や実際の表示・動作も確認しながら、改善を進めていきましょう。
今回の記録が、貴社サイトの表示速度を見直すきっかけになれば幸いです。
