WordPress表示速度を改善する実践手順 – NPC

ガイドラインを確認しました。記事を生成します。

WordPressサイトの表示速度を改善する具体的な手順 — NPC

「サイトが重い」。WordPressを運営していると、一度はこの悩みにぶつかる。自分もクライアントサイトの保守をしていて、表示速度の改善依頼はかなり多い。PageSpeed Insightsのスコアが30点台で「どこから手をつければ…」という相談が定番だ。

この記事では、実際に自分がWordPressサイトの表示速度を改善するときにやっている手順を、順番通りにまとめた。プラグインの選定から、画像の最適化、サーバー側の設定まで、現場で効果があったものだけを紹介する。

まず現状を計測する — 改善前のスコアを記録

いきなりプラグインを入れたり設定をいじったりしたくなる気持ちはわかるけど、最初にやるべきは「今どれくらい遅いのか」を数値で把握すること。改善前の記録がないと、何が効いたのか判断できない。

自分が使っているツールはこの3つ。

• PageSpeed Insights — Googleが提供する速度計測ツール。モバイル・PCそれぞれのスコアと、具体的な改善提案が出る
• GTmetrix — ウォーターフォール（読み込みの流れを時系列で表示したもの）が見やすく、ボトルネックの特定に便利
• ブラウザのDevTools — Chromeの開発者ツール。Networkタブで個別ファイルの読み込み時間を確認できる

※「ボトルネック」とは、全体の処理の中で一番遅くなっている原因箇所のこと。水筒の口が狭いと水が出にくいのと同じで、一箇所が詰まると全体が遅くなります。

計測するときのポイントは、トップページだけでなく、投稿ページ・固定ページ・アーカイブページなど複数のテンプレートで計ること。テンプレートごとに読み込むファイルが違うので、スコアもバラつく。

改善の全体的な流れはこんなイメージ。

画像の最適化 — 最も効果が大きい施策

表示速度改善で一番インパクトがあるのは、ほぼ間違いなく画像の最適化。クライアントサイトを調べると、5MBのPNGがそのまま貼られていた、なんてことがざらにある。

WebP形式への変換

まずやるのはWebP対応。WebPはGoogleが開発した画像フォーマットで、JPEGやPNGと比べてファイルサイズが25〜35%ほど小さくなる。見た目の品質はほぼ変わらない。

自分はプラグイン「EWWW Image Optimizer」を使っている。既存画像の一括変換もできるし、新規アップロード時に自動でWebPを生成してくれる。設定画面で「WebP変換」にチェックを入れるだけ。

遅延読み込み（Lazy Load）の設定

ページを開いた瞬間にすべての画像を読み込むのではなく、画面に表示されるタイミングで読み込む仕組み。WordPress 5.5以降は loading="lazy" が標準で付くようになったけど、サムネイルやカスタムフィールドの画像には適用されないことがある。

※「遅延読み込み（Lazy Load）」とは、ページの下の方にある画像を最初から全部読み込まず、スクロールして画面に近づいたときに初めて読み込む仕組みのこと。レストランで一度に全品出さず、食べるペースに合わせて出てくるイメージです。

画像最適化でやることを整理するとこんな感じ。

キャッシュとファイルの最適化

画像の次に手をつけるのが、キャッシュの設定とCSS・JavaScriptファイルの最適化。

キャッシュプラグインの導入

キャッシュとは、一度生成したページを保存しておいて、次のアクセス時にはデータベースに問い合わせず保存済みのページを返す仕組み。WordPressはアクセスのたびにPHPを実行してHTMLを生成するので、キャッシュがないと毎回同じ処理を繰り返すことになる。

プラグインの選択肢はいくつかあるけど、自分の使い分けはこう。

クライアントサイトでは基本的にWP Super Cacheを入れている。設定がシンプルな分、引き継ぎのときに「何をやっているか」が伝わりやすい。自分のサイトなど自由にいじれる環境なら、W3 Total Cacheで細かくチューニングすることもある。

CSS・JavaScriptの最適化

使っていないCSSやJavaScriptを読み込んでいると、それだけでページが重くなる。特にWordPressはプラグインを入れるたびにファイルが増えていくので、気がつくと20個以上のスクリプトを読み込んでいた、なんてことも。

自分がやっている対策はこの3つ。

• 不要なプラグインの削除 — 使っていないプラグインは停止ではなく削除する。停止状態でもファイルは残っている
• Autoptimizeの導入 — CSS・JavaScriptの結合・圧縮を自動で行うプラグイン。設定は「CSS最適化」「JS最適化」にチェックを入れるだけ
• 不要なブロックライブラリCSSの除外 — クラシックテーマでGutenbergを使っていないなら、wp_dequeue_style('wp-block-library') で読み込みを止められる

サーバー側でできること

プラグインだけでは限界がある。サーバー側の設定も確認しておきたい。

PHPバージョンの確認

意外と見落とされがちだけど、PHPのバージョンが古いとそれだけで処理速度が落ちる。PHP 7.4とPHP 8.2では、同じ処理でも実行速度が明確に違う。レンタルサーバーの管理画面から変更できることがほとんどなので、まずは現在のバージョンを確認する。

ただし、古いテーマやプラグインがPHP 8系に対応していないケースもあるので、バージョンを上げる前にステージング環境でテストすること。

Gzip圧縮の有効化

サーバーからブラウザに送るデータを圧縮する設定。 .htaccess に以下のような記述を追加する。

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/css application/javascript
</IfModule>

多くのレンタルサーバーではデフォルトで有効になっているけど、念のためPageSpeed Insightsの「テキスト圧縮の有効化」の項目を確認しておくといい。

ブラウザキャッシュの有効期間設定

画像やCSS・JSなどの静的ファイルに対して、ブラウザ側でのキャッシュ保持期間を指定する。これも .htaccess で設定できる。

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
</IfModule>

改善後の再計測と継続的なチェック

施策を一通り実行したら、最初と同じツールで再計測する。ここで大事なのは、1つずつ施策を実行して計測すること。全部まとめてやると、どの施策がどれだけ効いたのかがわからなくなる。

自分の経験だと、画像最適化だけでスコアが20〜30点上がることが多い。キャッシュを入れてさらに10〜15点。CSS・JSの最適化で5〜10点というイメージ。もちろんサイトの状態によって変わるけど、優先度としてはこの順番でほぼ間違いない。

それと、速度改善は一回やって終わりじゃない。プラグインの追加やコンテンツの増加で徐々に重くなっていくので、月に一度くらいはPageSpeed Insightsでチェックする習慣をつけておくと安心だ。

まとめ

WordPressの表示速度改善は、やることが多く見えるけど、優先度をつけて順番にやれば着実にスコアは上がる。特に画像の最適化は効果が大きいのに、やっていないサイトが本当に多い。

大事なのは「計測 → 施策 → 再計測」のサイクルを回すこと。感覚ではなく数値で判断する。地味だけど、この積み重ねがサイトの信頼性につながる。

※この記事はNPCの中の人の実務経験をもとに書いています。