WordPressで記事や画像を増やしていくと、「ページが表示されるまで時間がかかる」「スマートフォンで操作が重い」と感じることがあります。
表示速度を改善しようとしても、測定ツールには専門用語が並び、どこから手を付ければよいのか迷いがちです。
また、高速化プラグインの設定をまとめて有効にすると、フォームやメニューが動かなくなることもあります。
この記事では、表示速度の測定方法から、画像・キャッシュ・プラグインを見直す順番、変更後の確認までを紹介します。
表示速度は、読む人の使いやすさに関わる
表示速度を見直す目的は、訪問者が必要な情報を読み、迷わず操作できる状態にすることです。
たとえば、次のような状態は使いにくさにつながります。
- 記事を開いても、本文や画像がなかなか表示されない
- メニューを押しても反応が遅い
- 読んでいる途中で画像が現れ、文章の位置がずれる
- ボタンを押そうとした瞬間に配置が変わる
「ページが開く速さ」だけでなく、操作への反応や表示の安定性も確認することが大切です。
Googleの検索ランキングシステムでもCore Web Vitalsが使われますが、良好な数値だけで上位表示が保証されるわけではありません。ページの内容や、検索する人の目的に合っていることも重要です。
参考：Google検索セントラル「ページエクスペリエンスについて」
最初にPageSpeed Insightsで測定する
表示速度を調べる入口として使いやすいのが、GoogleのPageSpeed Insightsです。
対象ページのURLを入力すると、モバイルとパソコンそれぞれの結果や、改善の手がかりを確認できます。
測定ツール：PageSpeed Insights
トップページだけで判断しない
トップページが軽くても、画像の多い記事や商品ページが重い場合があります。
最初は、次のような代表的なページを選んで測定すると、問題の範囲をつかみやすくなります。
- トップページ
- 通常の記事ページ
- 画像や埋め込みが多いページ
- サービス・商品ページ
- お問い合わせページ
測定したURL、日時、モバイル・パソコンの区分を残しておくと、変更前後を比較できます。
実際の利用データとテスト結果を分けて読む
PageSpeed Insightsには、主に2種類の情報があります。
| データ | 内容 | 主な使い方 |
|---|---|---|
| フィールドデータ | 実際の利用者から収集されたデータ | 訪問者が体験している状態を確認する |
| ラボデータ | 一定の条件でページを読み込んだテスト結果 | 問題の原因や改善箇所を調べる |
実際の利用データは、過去28日間の情報をもとにしています。設定を直した直後に、すべて新しい結果へ切り替わるわけではありません。
また、ページ単位のデータが不足していると、同じオリジン全体のデータが表示される場合があります。測定した1ページの結果なのか、サイト側の集計なのかも確認しましょう。
参考：Google「PageSpeed Insightsについて」
アクセスが少なく「データなし」でも、遅いとは限らない
公開したばかりのサイトや、まだアクセスが少ないサイトでは、実際の利用データが表示されないことがあります。
「データがありません」は、表示速度が悪いという判定ではありません。
この場合は、ラボデータの診断と、実際のスマートフォンでの操作確認から進めます。利用データが集まってきたら、実際の訪問者の状況も確認します。
Core Web Vitalsの3つの指標
Core Web Vitalsは、ページの使いやすさを確認するための主要な指標です。
| 指標 | 確認すること | 良好の目安 |
|---|---|---|
| LCP | 画面内の大きな画像やテキストが表示されるまでの時間 | 2.5秒以下 |
| INP | クリック・タップなどの操作から、次の画面描画までの応答性 | 200ミリ秒以下 |
| CLS | 意図しないレイアウトのずれ | 0.1以下 |
これらの目安は、実際の利用データの75パーセンタイルで評価します。平均値や、1回のテスト結果だけを見るものではありません。
LCP：主な内容が表示されるまでの時間
記事上部の大きな画像や見出しなど、画面内の大きな要素が表示されるまでの時間に関わります。
画像の容量だけでなく、サーバーの応答や、画像を読み込み始めるタイミングなども影響します。
INP：操作への反応
ボタンやメニューを押したときの反応に関わります。
見た目が表示されていても、裏側で重い処理が続いていると、操作への反応が遅くなることがあります。
通常のページ読み込みテストだけでは、利用中のすべての操作は再現できません。実際にメニューやフォームも操作して確認します。
CLS：表示のずれ
読み込み中や利用中に、文章やボタンが予期せず動く現象に関わります。
画像や広告の表示領域をあらかじめ確保していない場合などに起こります。
WordPressの表示速度を見直す順番
原因はサイトごとに異なりますが、まずは影響を確認しやすい部分から進めると整理しやすくなります。
- 画像のサイズ・容量を確認する
- 動画や外部サービスの埋め込みを見直す
- キャッシュの設定を確認する
- プラグインと読み込み処理を見直す
- 診断結果に応じてテーマやサーバーを調べる
数値が悪いからといって、すぐにテーマやサーバーを変更する必要はありません。
1．画像のサイズと容量を見直す
見た目の大きさと、ファイルの重さは別
ページ上では小さく表示されていても、元の画像が数千ピクセルあり、容量が数MBという場合があります。
ブラウザ上で小さく見せるだけでは、必ずしも通信量は減りません。実際にどの画像ファイルが配信されているかを確認します。
まず、記事上部の画像、背景画像、商品写真など、容量が大きくなりやすいものから見直しましょう。
用途に合ったサイズと形式を選ぶ
写真や説明図など、画像の内容に合わせて形式と圧縮率を調整します。
WebPやAVIFで容量を減らせる場合もありますが、文字のある説明図では、圧縮後に読みにくくなっていないかも確認します。
容量だけを減らして、内容が伝わらなくなっては意味がありません。
最初に見せたい画像まで遅延読み込みにしない
遅延読み込みは、画面の下にある画像などを、必要になるタイミングで読み込む仕組みです。
ただし、ページを開いた直後に見える重要な画像、特にLCPの対象になる画像を遅延させると、表示が遅くなる場合があります。
画像をすべて同じ設定にするのではなく、最初に見える画像と、スクロール後に見える画像を分けて考えます。
2．動画や外部サービスの埋め込みを見直す
動画、地図、SNS投稿、チャットなどは便利ですが、外部のスクリプトや画像を読み込むことがあります。
記事本文が短くても、埋め込みが多いと処理が重くなる場合があります。
次の点を確認してみてください。
- 同じページに動画やSNS投稿を大量に埋め込んでいないか
- 地図が必要ないページにも表示されていないか
- 使っていないチャットや広告タグが残っていないか
- クリック後に読み込む表示方法へ変更できないか
必要な機能を残しながら、読み込むページやタイミングを整理します。
操作への反応が遅い場合は、外部スクリプトを含め、ブラウザ上で長く動く処理がないかも確認対象になります。
3．キャッシュの設定を確認する
キャッシュは、一度作成したページや取得したデータを再利用する仕組みです。
WordPressでは、サーバー側の機能やプラグインなどで、ページの生成処理を減らせる場合があります。
ただし、キャッシュには複数の種類があるため、まず現在のサーバーやプラグインで何が有効になっているかを確認します。
同じ役割のキャッシュ機能を重ねすぎない
サーバーとプラグインの機能を併用する構成もありますが、役割を把握せずに同じ処理を重ねると、更新が反映されない原因を追いにくくなります。
どこでキャッシュされ、どこから削除するのかを整理しておきましょう。
利用者ごとに内容が変わるページに注意する
カート、購入手続き、マイページなどは、一般の記事と同じようにページ全体を共有キャッシュできない場合があります。
フォームも、認証情報や有効期限のある値を使う構成では、キャッシュとの組み合わせを確認する必要があります。
使用しているEC・フォーム機能の仕様に従い、必要なページを除外します。
表示が速くなっても、購入や送信ができなければ改善とはいえません。
4．プラグインは数だけで判断しない
「プラグインが多いから遅い」とは限りません。
管理画面でだけ動くものもあれば、すべての公開ページで画像・CSS・JavaScriptを読み込むものもあります。
確認したいのは、数よりも、実際にどの処理が負担になっているかです。
- 同じ役割の機能が重複していないか
- 使用していない機能が有効になっていないか
- 特定ページ用の処理を全ページで読み込んでいないか
- 追加した時期から表示や操作が重くなっていないか
停止による影響が大きい機能は、テスト環境などで確認します。フォームや予約機能を、本番サイトでまとめて停止して調べることは避けましょう。
5．テーマやサーバーは測定結果に合わせて調べる
画像を軽くしても改善しない場合は、ページの生成や表示処理など、別の部分が原因になっている可能性があります。
| 状況 | 確認する方向 |
|---|---|
| 最初の応答まで長く待つ | サーバーの応答、ページ生成処理、キャッシュ、リダイレクト |
| 文章は出るが大きな画像が遅い | 画像容量、読み込み開始の遅れ、表示を妨げる処理 |
| 表示後の操作が重い | JavaScript、外部サービス、操作時の処理 |
| 読んでいる途中で配置が動く | 画像・広告の領域、フォント、後から追加される要素 |
これは原因を絞り込むための目安です。ひとつの症状だけで、サーバーや特定のプラグインが原因だと断定しないようにします。
表示のずれには、領域の確保も有効
画像や広告が読み込まれる前に、必要な幅や高さを確保すると、後から文章が押し下げられる動きを防ぎやすくなります。
テーマ側で画像の縦横サイズや縦横比が扱われているか、スマートフォンでも確認しましょう。
高速化設定を一度に有効にしない
高速化機能には、CSSやJavaScriptの圧縮、結合、読み込みの遅延、未使用コードの削除などがあります。
効果がある場合もありますが、読み込み順やタイミングが変わることで、不具合につながることもあります。
たとえば、次のような問題です。
- スマートフォンのメニューが開かない
- スライダーや画像が表示されない
- お問い合わせフォームの確認画面が出ない
- 送信ボタンを押しても処理が進まない
- 予約日時の選択ができない
設定をまとめて変えると、どの変更が原因だったのかわかりにくくなります。
1項目ずつ変更し、測定と動作確認を行ってから次へ進めましょう。
変更後は点数と実際の動作を確認する
同じ条件で測り直す
変更前後で、測定するURLやモバイル・パソコンの区分をそろえます。
測定値には変動があるため、1回だけの小さな点数差で判断せず、必要に応じて数回確認します。
キャッシュがある場合は、キャッシュ生成前後でも結果が変わります。比較時には、その条件も意識しておきましょう。
スマートフォンで主要な操作を試す
数値の確認に加えて、実際の端末で次の操作を試します。
- 記事を開いてスクロールする
- メニューや目次を操作する
- お問い合わせフォームを入力する
- 確認画面から戻って内容を修正する
- 必要に応じてテスト送信する
- 商品・予約サイトでは購入や予約の流れを確認する
ログイン中とログアウト中でキャッシュの扱いが違う場合もあるため、一般の訪問者に近い状態でも確認します。
PageSpeed Insightsで100点を目指すべき？
100点を取ること自体を、運営の最優先目標にする必要はありません。
スコアは問題を見つけるための目安です。必要な情報や機能を削って点数だけを上げても、使いにくくなれば目的から外れてしまいます。
特に記事を増やしている段階では、次の順番で取り組むと進めやすくなります。
- 極端に重い画像や、明らかな操作不良を直す
- 画像の入れ方や必要な機能を整理する
- 記事制作と並行して、代表的なページを定期的に測定する
- 実際の利用データが集まったら、改善の優先順位を見直す
表示速度改善のチェックリスト
- トップページ以外の記事や主要ページも測定している
- モバイルとパソコンの結果を分けて確認している
- 実際の利用データとラボデータを混同していない
- 大きすぎる画像や不要な埋め込みを見直している
- 最初に見せたい画像を不必要に遅延させていない
- キャッシュの設定場所と削除方法を把握している
- プラグインの数だけで原因を決めつけていない
- 高速化設定を1項目ずつ変更している
- フォームや予約など、重要な操作を確認している
- 設定内容と変更前後の結果を記録している
表示速度の改善は、訪問者が情報を読み、必要な操作をスムーズに行えるようにするための取り組みです。
まず現在の状態を測定し、原因に合った変更を少しずつ進めましょう。
SEO設定全体を確認したい場合は、WordPress公開前のSEOチェックリストもあわせてご覧ください。