こんにちは、マサシです😊

「WordPressのサイト、なんか重いな…」
そんなとき、やみくもにプラグインを入れても逆効果です。

ポイントは、順番。
順番を間違えずに、上から順に進めれば、知識がなくてもかなり速くできます！

まずは「速い」ってどんな状態？

Googleが出している「Core Web Vitals（コアウェブバイタル）」という基準があります。
ざっくり言うと、見えるのが速い・動くのが軽い・ズレない の3つ。覚えなくても大丈夫ですが、目安だけ貼っておきます。

指標	意味	目安
LCP	ページが表示される速さ	2.5秒以内
INP	クリックや入力の反応速度	0.2秒以内
CLS	ページがガタッと動かないか	0.1以下

まずは「LCP（表示の速さ）」を良くすることを目標にしましょう。
ここが良くなると、体感の速さが一気に変わります。

7ステップの全体像（この順でやるだけ）

1️⃣ 計測して現状を知る
2️⃣ 画像を軽くする（ここが一番効く）
3️⃣ フォントを軽くする
4️⃣ JavaScriptを整理する
5️⃣ キャッシュで一気に速く
6️⃣ サーバー設定を整える
7️⃣ 「計測→記録→確認」を回す

足すより減らす。これがコツです。

ステップ1：計測してみよう（まず現在地）

まずは「いまの速さ」を知ることから。
ページのURLを入れるだけでOKです。

• PageSpeed Insights
• GTmetrix
• WebPageTest （テスト条件を細かく指定できる）

点数やグラフが出てくるので、現状を記録しておきましょう。
おすすめは、スプレッドシートに「日付/URL/LCP/INP/CLS/メモ」を1行で書く方法。
あとから何を変えて、どう良くなったかが分かります。

ステップ2：画像を軽くしよう（ここが一番効く！）

画像が重いと、どんなに良いサーバーでも遅くなります。
やることはシンプルです。

• WebP形式で保存（JPEGより軽い）
• サイズを合わせる（大きすぎる画像はNG）
• 遅延読み込み（lazy load）をON
• ファイル名を整理（例：about_20251010_w1200.webp）

画像最適化プラグイン例：

• EWWW Image Optimizer
• ShortPixel
• WebP Express

もしサーバー側に最適化機能（例：LiteSpeedの画像最適化やCDN変換）があるなら、プラグインを増やさず活用するのが安全です。

ポイントは、表示サイズに合わせること。
本文の横幅が720pxなら、1200pxの画像は過剰です。
LCPに関わるヒーロー画像は遅延しないで表示します。

HTMLの例：

<img src="/images/hero.webp" width="1200" height="630" alt="サービスのメイン" fetchpriority="high">

ステップ3：フォントを軽くする（日本語は特に重い）

おしゃれなフォントは魅力ですが、実は重いです。
日本語フォントは特に容量が大きいので、見出しだけ特別フォントにする方法が定番。

• 見出しだけWebフォント、本文はシステムフォント
• 英字・数字だけ使うサブセットを活用
• CSSに font-display: swap; を入れて、読み込み中も文字を表示

CSSの例：

@font-face {
  font-family: "MyFont";
  src: url("/fonts/myfont.woff2") format("woff2");
  font-display: swap;
  font-weight: 700;
}

先にフォールバックだけで組んで、上からWebフォントで化粧するイメージです。
これだけで体感がかなり軽くなります。

ステップ4：JavaScriptを整理しよう（足さない勇気）

動きのあるサイトは楽しいけれど、スクリプトが多いと重くなります。
まず止める/遅らせるから。

• 不要なプラグインを削除（使ってないもの、重複しているもの）
• 下層ページで不要なスクリプトは読み込まない
• 解析タグ（Googleタグなど）は遅延読み込み

制御に便利なプラグイン：

• Asset CleanUp
• Perfmatters

小規模サイトであれば、プラグインを増やさずテーマ側で読み込み制御（必要なテンプレートだけ読み込む）でも十分です。

defer/async の使い分けも効果的です。
UIに必須でないJSは後段へ。クリック計測は送信を待たない実装が軽いです。

ステップ5：キャッシュを使って一気に速く

キャッシュとは、前に読み込んだページを覚えておく仕組みです。
これを使うと、同じ人が再訪したときに爆速になります。

おすすめプラグイン：

• WP Rocket（有料だけど簡単）
• W3 Total Cache（設定多め）
• LiteSpeed Cache（サーバー対応してるなら最強）

設定の基本は「静的ファイル（画像/CSS/JS）は長く、HTMLは短く」。
検索結果や会員ページはキャッシュ対象から外すのが安全です。

ステップ6：サーバー設定を見直す（土台が大事）

• PHPのバージョン：最新（8.2以上）に
• HTTP/2 or 3：ONになっているか確認
• 圧縮（Gzip/Brotli）：ON
• CDN（コンテンツ配信ネットワーク）：海外からも速くなります（Cloudflareがおすすめ）

画像やフォントなどの静的ファイルをCDNから配信すると、地理的に近い場所から届くので速いです。
ニュースやメディアのように画像が多いサイトは特に効果が出やすいです。

ステップ7：1つずつ変えて「計測→記録→確認」

最後は、運用の型を作ること。

• ステージング（テスト環境）で変更
• 変更前と後でPageSpeedを計測
• 数値をメモ
• 問題があれば戻す（ロールバック）

小さく直して効果を確かめる。これが最短ルートです。
速くして壊すは本末転倒。戻せる前提で進めましょう。

さらに一歩（よくある悩みと解決）

Q. 画像だけ最適化したのに、まだ遅い…
A. フォントが犯人なことが多いです。font-display: swap とサブセット化を試してください。

Q. INP（反応速度）だけ悪いです
A. 解析タグやチャットウィジェットなどのサードパーティJSを同意後/遅延に切り替えます。イベントの重複発火も要チェック。

Q. CLS（レイアウトのズレ）が消えません
A. 画像のwidth/heightを必ず指定。広告枠や動くブロックには固定の高さを設定します。

Q. どのページを改善すればいい？
A. トップ、重めの記事、テンプレ（記事・一覧・LP）の3種類から。上位だけを繰り返し改善するのが効率的です。

スプレッドシートの書き方（コピペOK）

列はこれだけでOKです。
日付 / URL / ページ種別 / 変更内容 / LCP / INP / CLS / 合否 / 副作用 / 次の一手 / 担当
1回の変更ごとに1行。あとから再現できます。

つまずきやすいポイント（先に知っておくと楽）

• 画像だけ速くしてフォント地獄 → サブセット＋swap。
• キャッシュ更新忘れ → 公開時に自動パージ（プラグインやCDNの設定）。
• プラグイン増やしすぎ → 役割重複は脱落。テーマで代替できるなら置き換える。
• 解析タグの多重発火 → GTMに集約、発火条件を整理。
• カルーセル/動画をどこでも使う → 下層限定にするか使わない勇気。

小ワザ集（初心者でもできる範囲）

• 画像は横幅を3サイズで用意（480/720/1200pxなど）。
• アイコンはSVGで作る（PNGより軽い・きれい）。
• 画像の代替テキスト（alt）は15〜30字で何が写っているかを書く。
• Webフォントは見出しだけ。本文はシステムフォントで十分。
• クリック計測は送信を待たない方式に（ユーザー体験が軽い）。

ちょっと実務寄り（でもできる）

• OGP/メタはプラグインを増やさずテーマ側で統合（重複を避ける）
• サムネは比率を固定（例：1.91:1）して文字量は15字以内に
• テンプレートの最初に見える範囲はクリティカルCSSを最小だけインライン
• ログインは2要素にして、投稿は「下書き→レビュー→公開」の流れを固定
• 画像/フォント/JSの変更は必ずステージング→本番の順で

これだけで事故りにくい運用になります。速度は運用の結果でもあります。

ミニテンプレ（HTML/CSSの例）

LCP画像を優先して表示：

<img src="/images/hero.webp" width="1200" height="630" fetchpriority="high" alt="サービスのメインメッセージ">

Webフォントの基本設定：

@font-face {
  font-family: 'Heading';
  src: url('/fonts/heading-subset.woff2') format('woff2');
  font-display: swap;
  font-weight: 700;
}

まとめ：やる順番を守るだけでOK！

1️⃣ 計測（PageSpeed Insights）
2️⃣ 画像を軽く
3️⃣ フォントを調整
4️⃣ JSを減らす
5️⃣ キャッシュを使う
6️⃣ サーバーを整える
7️⃣ 計測して確認

この順番で進めるだけで、
プラグインを増やさなくてもサイトはびっくりするほど速くなります。
増やす前に減らす。それが近道です。

さらに余裕が出てきたら、ヘッドレス構成（管理はWP、配信は静的）やSSG（Next.js/Astro）も選択肢です。
ただし、まずはいまの構成での最適化をやり切るのが先かなと思います😌

さいごに（焦らず、育てる）

「速さ」は一度で終わりじゃなく、育てるものです。
毎週少しずつ改善していけば、WordPressでも十分Core Web Vitalsをクリアできます。
焦らず、楽しく整えていきましょう😊

---

※補足：本記事は2025年10月時点の一般的な方針です。テーマやサーバー環境によって最適解は変わります。大きな変更はステージングで検証し、必ず「計測→記録→ロールバック」の手順を用意してください。