ブログを開くたび、ページが“ガタガタ”っと動く感じがしていました。
PageSpeed Insightsでも「CLS（Cumulative Layout Shift）」の警告が出ており、
調べたところ原因のひとつは画像の読み込みタイミング。
そこで導入したのが「EWWW Image Optimizer」。
これは、WordPressの画像を自動で圧縮し、遅延読み込み（Lazy Load）まで対応してくれるプラグインです。
導入前後でCLSは 0.14 → 0.08 に改善し、ファーストビューも安定しました。
この記事では、実際に私が設定した手順と、改善の結果を紹介します。
1. プラグインのインストール
1️⃣ WordPressの左メニューから「プラグイン → 新規追加」を開く
2️⃣ 検索欄に「EWWW Image Optimizer」と入力
3️⃣ 「今すぐインストール」→「有効化」をクリック
有効化すると、管理メニューに「EWWW Image Optimizer」が追加されます。
2. 基本設定（画像サイズとメタデータ）
1️⃣ 管理画面左メニュー「設定 → EWWW Image Optimizer」をクリック
2️⃣ 画面中央の「Max Image Dimensions（最大画像サイズ）」に移動
→ 幅・高さともに「1920」と入力（大きすぎる画像を自動リサイズ）
3️⃣ 「メタデータを削除」にチェック
→ 撮影情報やコメントなど不要なデータを削除し、ファイルサイズを軽量化
💡 ポイント
幅1920pxはPC表示に十分。これ以上は重くなるだけで、見た目の差はほぼありません。
3. 遅延読み込み（Lazy Load）の設定
1️⃣ 「遅延読み込み（Lazy Load）」の項目を探す
2️⃣ チェックを入れる
→ 「画像が画面に入ったときだけ読み込む」仕組みを有効化
3️⃣ 「Above the Fold（最上部の画像数）」を「1」に設定
→ ファーストビュー（画面上部）だけ先に読み込む
📌 これで、ページが開いた瞬間に上部画像だけ素早く表示され、
下にある画像はスクロール時に読み込まれるようになります。
4. WebP変換の設定（次世代フォーマット）
1️⃣ 「WebP 変換」をON
2️⃣ 「リライトルールを挿入」をクリック（.htaccessに自動追加）
3️⃣ 表示テスト欄で「WEBP」と白い文字が出れば成功！
📌 WebPはJPEGやPNGよりも30〜50％軽量。
対応ブラウザ（ChromeやSafari）では自動的にWebPを配信してくれます。
5. 一括最適化（過去画像をまとめて圧縮）
1️⃣ 管理メニュー「メディア → 一括最適化」を開く
2️⃣ 「最適化されていない画像をスキャン」→「最適化を開始」をクリック
💡 過去にアップした画像も一気に圧縮されます。
完了後、「最適化済み：〇枚」と表示されたらOKです。
6. 実際の改善結果
| 指標 | 変更前 | 変更後 |
|---|---|---|
| CLS | 0.14 | 0.08 |
| LCP（表示速度） | 2.1秒 | 1.8秒 |
| ページサイズ | 2.5MB | 1.6MB |
PageSpeed Insightsでも、「CLS：Good」判定に。
特にモバイル表示でのチラつきが激減しました。
7.注意点
CDN（Cloudflareなど）を使っている場合、
Easy IO（EWWWのCDN機能）はOFF推奨（重複圧縮の恐れあり）.htaccess編集権限がない場合、WebP配信は無効化される場合あり
まとめ
EWWW Image Optimizerを正しく設定するだけで、
CLS（レイアウトずれ）改善
ページ読み込みの安定化
画像サイズの自動圧縮
この3つが一度に叶いました。
「画像が多いブログほど恩恵が大きい」ので、
まだ導入していない方は、まずこれから始めるのが断然おすすめです✨
コメント