初心者でもできた！画像圧縮とキャッシュでページ速度を上げた手順

ブログを続けていくと画像や広告が増え、読み込みが遅くなります。私のブログでも CLS（Cumulative Layout Shift） が 0.18 を超え、検索順位が落ちた時期がありました。CLSとは「読み込み中にレイアウトがズレる現象」。読者の体験を守るために、速度改善＝読者への思いやりが必要だと痛感しました。

実際にやった高速化プラグイン3種

今回は、初心者でも導入しやすい次の3つを使いました。

• EWWW Image Optimizer： 画像を自動圧縮して軽量化。見た目を保ったまま容量を削減。
• Autoptimize： CSS/JSの読み込み順を最適化。Googleフォントの遅延にも対応。
• W3 Total Cache： ページやブラウザにキャッシュを作り、再訪時の表示を高速化。

EWWW Image Optimizerの設定

1. 設定 → EWWW Image Optimizer を開く。
2. メタデータ削除 をオンにして不要情報を削除。
3. Max Image Dimensions を 幅1920px／高さ1920px に設定し、過大サイズを防止。
4. 遅延読み込み をオン（Cocoon側のLazy Loadと重複しないよう後述の統一に注意）。
5. WebP配信 はサーバーで mod_headers 警告が出たため、JS WebPリライト に切替えて安定化。

Autoptimizeの設定

1. 設定 → Autoptimize を開く。
2. 最初は結合・圧縮をやりすぎない（表示崩れの原因）。
3. JavaScriptの遅延読み込み をオン。
4. CSSは結合オフのまま、まずは最小限の最適化で様子を見る。
5. Googleフォント → 「結合とヘッダーで遅延リンク（display:swap含む）」 を選択（CLS低減に有効）。

W3 Total Cacheの設定

1. Performance → General Settings を開く。
2. Page Cache をオン → 保存 → 動作確認。
3. Browser Cache をオン → 保存 → 動作確認。
4. Minify は最初はオフ（Autoptimizeと競合しやすい）。必要になったら個別に有効化。

初心者がつまづきやすいポイントと対策

• 競合に注意： EWWWとCocoonのLazy Loadが重複すると画像が出ないことあり → どちらか片方に統一。
• 一気に設定しない： 1つ変えたら保存→表示確認。崩れたら直前の設定を戻す。
• フォント最適化： display:swapで見出しのガタつきを軽減し、CLSを抑える。

実際の効果｜CLS・LCPの数値がこう変わった

• CLS：0.18 → 0.08
• LCP：4.5秒 → 2.8秒

モバイルのPageSpeedスコアが60台→90台に改善。体感でも初期表示が明らかに速くなり、直帰率が下がりました。

まとめ｜これだけやればOKな高速化チェックリスト

1. 画像圧縮（EWWW）： メタ削除＋1920px上限＋遅延をオン。
2. フォント最適化（Autoptimize）： 結合は様子見、遅延＋display:swap を先に。
3. キャッシュ（W3 Total Cache）： Page Cache → Browser Cache の順にオン。