PageSpeed Insightsで自分のサイトを測ったら、点数が赤かった。この状態から何をすればいいのか分からず、とりあえず高速化プラグインを入れてみる。多くの方がここでつまずきます。
WordPressの表示速度は、画像・キャッシュ・サーバー・不要な読み込みの4つを順番に見ていけば、大半のサイトで改善します。プラグインを増やすのは、その中の一手段にすぎません。
この記事では、効果の大きい順に改善手順を整理し、どこを触ればどの指標が動くのかまで含めて解説します。点数を追いかける前に、何が遅さの原因なのかを見極めていきましょう。
まず現状を数値で把握する
Core Web Vitalsの3指標
Googleは、ユーザー体験の指標としてCore Web Vitalsを定めています。改善作業を始める前に、この3つが何を測っているのかを押さえてください。
| 指標 | 測っているもの | 良好とされる基準 |
|---|---|---|
| LCP | 主要なコンテンツが表示されるまでの時間 | 2.5秒以内 |
| INP | 操作してから画面が反応するまでの時間 | 200ミリ秒以内 |
| CLS | 表示中にレイアウトがずれる量 | 0.1以内 |
INPは、以前使われていたFIDに代わって導入された指標です。最初のクリックだけでなく、閲覧中のあらゆる操作の反応速度を評価する点が変更のポイントになります。
計測ツール
PageSpeed InsightsにURLを入力すれば、モバイルとPCそれぞれのスコアと改善提案が表示されます。指標の詳しい定義はGoogle検索セントラルの解説で確認できます。
スコアは測るたびに変動します。1回の結果に一喜一憂せず、改善前と改善後をそれぞれ数回ずつ測って比較してください。また、点数そのものより、提案として挙がっている項目のほうが実務では役立ちます。
改善その1：画像を軽くする（効果が出やすい）
画像はページ容量の大半を占める
一般的なWebページでは、ファイルサイズの多くを画像が占めています。ここを改善せずにキャッシュだけ入れても、根本的な速度は上がりません。
なぜ画像がこれほど速度に影響するのかは、後半でも触れるWebパフォーマンスの技術書で仕組みから確認できます。
やることは3つ
1. アップロード前に、表示に必要なサイズまで縮小する
2. WebPやAVIFといった軽い形式に変換する
3. 画面外の画像は遅延読み込み（Lazy Load）にする
1番目が抜けているサイトは多いです。スマートフォンで撮った写真をそのままアップロードすると、横幅4000ピクセル級の画像が記事に埋め込まれます。表示されるのは横800ピクセル程度なのに、大きなファイルを毎回読み込んでいることになります。
2番目のWebPは、Googleの公式資料では、同等の品質のJPEGと比べて25〜34%ほどファイルサイズが小さくなるとされている形式です（可逆圧縮の場合はPNG比で26%）。現在の主要ブラウザはWebPに対応しているため、実用上の障壁はほぼありません。EWWW Image Optimizerのような画像最適化プラグインで、既存画像の一括変換もできます。
横幅と高さを指定する
画像タグに幅と高さが指定されていないと、読み込み完了時にレイアウトが動きます。これがCLSの悪化につながります。WordPressは通常これを自動で付与しますが、テーマの実装によっては欠けていることがあるので確認してください。
改善その2：キャッシュを効かせる
キャッシュが何をしているか
WordPressはアクセスのたびにPHPを実行し、データベースから情報を取り出してページを組み立てます。キャッシュは、この結果をあらかじめ保存しておき、次のアクセスでは組み立てを省略する仕組みです。
サーバー側の処理時間が減るため、表示開始までの待ち時間が短くなります。WP Fastest CacheやWP Super Cacheといったプラグインで導入できます。
WordPressがページを組み立てる流れを基礎から押さえておきたい場合は、入門書で全体像を確認しておくと設定の意味を理解しやすくなります。
設定時の注意
・キャッシュ系プラグインを複数入れると競合します。1つに絞ってください
・レンタルサーバー側にもキャッシュ機能がある場合、二重にかかることがあります
・記事を更新したのに反映されないときは、キャッシュの削除を試してください
・問い合わせフォームやログイン後の画面は、キャッシュ対象から除外します
最後の項目は重要です。フォームのページをキャッシュすると、送信できなくなる不具合が起きることがあります。導入後は、実際にフォームから送信テストをしてください。
改善その3：サーバーを見直す
プラグインでできる改善には限界があります。共用サーバーの安いプランを使っている場合、そもそもサーバーの処理能力が上限になっているケースは少なくありません。
確認したいのは、PHPのバージョンです。古いバージョンのまま動かしていると、処理速度で明確に不利になります。管理画面やサーバーのコントロールパネルから、対応している最新バージョンに切り替えられないか確認してください。
あわせて、サーバー側が提供している高速化機能（サーバーキャッシュ、HTTP/2以降への対応など）が有効になっているかも見ておきましょう。契約プランを上げるより、設定を見直すだけで改善することがあります。
改善その4：不要な読み込みを減らす
プラグインの棚卸し
プラグインは、それぞれがCSSやJavaScriptを読み込みます。使っていないプラグインが5つ入っていれば、そのぶん不要なファイルが毎回読み込まれていることになります。
管理画面のプラグイン一覧を開き、用途を説明できないものを無効化して速度を測り直してみてください。1つ削除しただけで数百ミリ秒改善することも珍しくありません。
フォントとアイコン
Webフォントは表示品質を高めますが、読み込みに時間がかかります。使用する書体とウェイトを絞る、日本語フォントはサブセット化するといった対策で軽くできます。アイコンフォントを丸ごと読み込んでいる場合も、使っているアイコンだけをSVGに置き換える方法があります。
外部サービスの埋め込み
SNSのタイムライン埋め込み、動画の埋め込み、地図の埋め込み。これらは1つで大きな読み込み時間を発生させます。本当にそのページで必要かを見直すだけで、大きく改善する場合があります。
優先順位のまとめ
| 順番 | やること | 改善しやすい指標 |
|---|---|---|
| 1 | 画像の縮小・WebP化・遅延読み込み | LCP、CLS |
| 2 | キャッシュの導入 | LCP |
| 3 | PHPバージョン・サーバー設定の見直し | LCP |
| 4 | 不要なプラグイン・スクリプトの削除 | INP、LCP |
| 5 | Webフォントと埋め込みの整理 | LCP、CLS |
上から順に手をつけてください。1と2を終えた段階で、多くのサイトは体感できるレベルで速くなります。
作業環境の話
速度改善は、計測 → 変更 → 再計測を繰り返す作業です。計測結果の画面、管理画面、実際のサイト。この3つを行き来するため、画面が狭いと比較が難しくなります。
27インチのWQHD（2560×1440）モニターを1枚足して、左に計測結果、右に管理画面という配置にすると、改善前後の数値を並べて確認できます。数値の変化を見ながら作業できると、無駄な手戻りが減ります。机の奥行きが足りない場合はクランプ式のモニターアームで土台のぶんを浮かせてください。
画像の縮小作業が多くなるため、まとめて処理できる環境も用意しておくと楽です。SDカードリーダー付きのUSBハブがあると、カメラからの取り込みから縮小・アップロードまでの流れが1台で完結します。
知識面では、Webパフォーマンスを扱った書籍を1冊持っておくと、なぜその対策が効くのかが理解できます。理屈が分かっていると、提案項目のうちどれを優先すべきか自分で判断できるようになります。
よくある質問
Q. PageSpeed Insightsで100点を目指すべきですか
目指す必要はありません。点数はあくまで目安であり、実際の利用者が快適に感じるかどうかが本質です。Core Web Vitalsの3指標が良好の範囲に入っていれば、実用上は十分だと考えてください。
Q. モバイルのスコアだけ低いのですが
モバイルの測定は、より低速な回線と処理能力を想定して行われるため、PCより厳しい結果になります。改善の優先順位もモバイル側に置いてください。実際の閲覧の多くはスマートフォンからです。
Q. 高速化プラグインを入れたらサイトが崩れました
CSSやJavaScriptの結合・圧縮機能が原因であることが多いです。該当の機能をひとつずつオフにして、どの設定で崩れるかを特定してください。テーマとの相性で、特定の機能だけ使えないケースがあります。
Q. テーマを変えれば速くなりますか
機能を詰め込んだテーマから軽量なテーマに変えると、改善することはあります。ただし、テーマ変更はデザインの作り直しを伴う大きな作業です。画像とキャッシュの対策を先に試して、それでも足りない場合の選択肢と考えてください。
Q. CDNは導入したほうがいいですか
アクセスが多いサイトや、海外からの閲覧がある場合は効果があります。国内向けの小規模なサイトでは、画像最適化とキャッシュのほうが費用対効果が高いことが多いです。
Q. 記事数が多いと遅くなりますか
記事数そのものより、1ページあたりの読み込み量が影響します。ただし、一覧ページで大量の記事とアイキャッチを表示している場合は、表示件数を減らすと改善します。
Q. 表示速度はSEOにどのくらい影響しますか
検索順位を決める要素のひとつではありますが、内容の質に比べれば影響は限定的です。それ以上に大きいのは、遅いページから利用者が離脱してしまうことです。速度対策は検索順位より、読者を逃さないための施策と捉えるのが実情に近いでしょう。
まとめ
WordPressの表示速度改善は、画像 → キャッシュ → サーバー → 不要な読み込みの順で進めるのが効率的です。とくに画像の対策は、手間に対する効果が大きい部分になります。
点数を追いかけるのではなく、Core Web Vitalsの3指標が良好の範囲に入ることを目標にしてください。そこに届けば、閲覧している人の体感も十分に改善しています。
まずはPageSpeed Insightsで現状を測り、その結果をスクリーンショットで残すところから始めましょう。比較する基準がないと、改善したかどうかも分からなくなります。
