突然、知人から↓このような写メが送られてきました。
画像を確認すると、Largest Contentful Paint（LCP）が27.0秒と非常に遅すぎて、ページの読み込みが遅いことが分かります。
これは、画像の読み込みがめちゃめちゃ遅いことが原因だと思われます。
そこで今日は、このような画像の読み込みを改善するプラグインの使い方をご説明します。
よかったら参考にして下さい。
画像の読み込みを改善する方法
画像の読み込みを改善するには、いくつかの方法があります。
まずは、基礎的なお話からさせていただきます。
（わかっている人は、読み飛ばして下さい）
画像の最適化
①WebPやAVIFフォーマットに変更
• 今、メディアに保存されている画像の保存フォーマットは、JPEGやPNGになっていると思われます。
このJPEGやPNGよりも軽量なWebPやAVIFに変えることで、表示速度が早くなります。
②画像の圧縮
• TinyPNG（https://tinypng.com/） や Squoosh（https://squoosh.app/） などのプラグインを使って、画質を落とさずにファイルサイズを削減する方法がとても簡単です。
しかし、この優秀なTinyPNGは無料枠が月500枚分しかありません。
（月毎に500づつ使えます）
沢山画像がある場合は、少し精度は落ちますがEWWW Image Optimizer（無制限無料）をTinyPNGと並行して使うのもおすすめです。
＊私はこの方法を使っています。
適切なサイズの画像を使う
• サイト上で 表示サイズが小さいのに、大きな画像を使っていると表示速度は遅くなる ため、適切なサイズに調整するのもおすすめです。
Lazy Load（遅延読み込み）を有効にする
WordPressならプラグインを利用
• 「Lazy Load by WP Rocket」 や 「a3 Lazy Load」 を導入すると、スクロール時に画像を読み込むので、初期表示が早くなります。
テーマの設定を確認
• 使っているテーマに Lazy Load機能がある場合はONにしましょう。
キャッシュを活用
ブラウザキャッシュを有効化
• 「WP Fastest Cache」や「W3 Total Cache」 などのプラグインを使うと、画像やCSS、JavaScriptのキャッシュを効率化できます。
CDN（コンテンツデリバリーネットワーク）の利用
• Cloudflare や Jetpack CDN を利用すると、画像の読み込み速度が向上します。
不要なプラグインを削除しよう！
• 不要なプラグインが多いとサイトの読み込み速度が遅くなるため、使っていないプラグインは無効化しましょう。
特に、重複しているプラグインは、どちらかを削除することをおススメします。
＊まとめに互換性を考えたプラグインの組み合わせの例を表にしています。参考にしてみて下さい。
既存の画像をTinyPNGで最適化する方法
方法1：プラグインを使う（おすすめ）
TinyPNGの公式WordPressプラグインを使うと、アップロード済みの画像を一括圧縮 できます。
＜ 手順＞
1. プラグインをインストール
• WordPressの「プラグイン」→「新規追加」で「TinyPNG – JPEG, PNG & WebP image compression」を検索してインストール＆有効化します。
2. TinyPNGのAPIキーを取得
• プラグインの設定ページで、TinyPNGの無料アカウントを作成 するとAPIキーを取得できます。
（無料枠で月500枚まで圧縮可能）
＊APIキーは名前とメールアドレスを入れるだけでアカウントは作れます。
3. 既存の画像を一括圧縮
• WordPressの「メディア」→「一括最適化」を選択し、画像を圧縮。
＊圧縮中は、その画面を開いたままにしておいて下さい。閉じると圧縮が中断されますのでご注意を！
方法2：手動で圧縮（少し手間がかかる）
もしプラグインを使いたくない場合は、手動でTinyPNGに画像をアップロードし、圧縮後に再アップロードする方法 もあります。
＜手順＞
1. WordPressのメディアライブラリから画像をダウンロード
• 「メディア」→ 該当画像を開いてダウンロード。
2. TinyPNG（https://tinypng.com/）で圧縮
• ダウンロードした画像をTinyPNGにアップロードし、圧縮後の画像をダウンロードします。
3. 圧縮した画像を再アップロード
• 画像をWordPressに再アップロード。
• 古い画像を削除し、新しい画像に差し替えて下さい。
どちらの方法がいい？
結論⇨プラグインを使えば、簡単に改善できます！
特に、ブログ運営を続けるならTinyPNGのプラグインを入れておくと、今後も画像を自動圧縮できる のでおすすめです！
しかしこのTiny PNGですが、無料で使えるのは月500枚だけなので注意が必要です。
ではTinyPNGの無料圧縮限度（500枚/月）を超えてしまった場合、どうしたら良いのか。
次の方法で対処できます！
1. 無料枠をリセットするまで待つ
TinyPNGの無料枠（500枚/月）は毎月リセットされるので、翌月まで待てば再び無料で圧縮できます。
• 急ぎでない場合は、翌月の無料枠 を使うのもアリ。
2. 別のメールアドレスで新規登録（新しいAPIキーを取得）
TinyPNGは1つのアカウントで500枚/月ですが、新しいメールアドレスで別のAPIキーを取得すれば、追加で500枚圧縮できます。
＜ 手順＞
1. TinyPNGの公式サイトへアクセス（https://tinypng.com/developers）
2. 別のメールアドレスで新規登録（GmailやYahooメールなど）
3. 新しいAPIキーを取得し、WordPressの設定に追加
• 「設定」→「TinyPNG」→ APIキーを新しいものに変更
4. 圧縮を再開する
3. 代替プラグインを使う（無料で続けたい場合）
TinyPNGの無料枠を使い切った場合でも、他の画像最適化プラグインで無料圧縮が可能 です。
「なんとか無料でできないでしょうか」
という方のために、TinyPNGと互換性も良い無料プラグインをご紹介します。
おすすめの無料画像圧縮プラグイン
① EWWW Image Optimizer（無料＆無制限）
• 無料で画像を無制限に圧縮可能
• WordPressに最適化された圧縮をしてくれる
• インストール方法
1. WordPress管理画面 → 「プラグイン」→「新規追加」
2. 「EWWW Image Optimizer」で検索＆インストール
＊設定⇨で下の表を参考にして設定画面に入力。
| 設定項目 | 推奨設定 | 理由 |
|---|---|---|
| メタデータを削除 | ON | 画像のEXIFデータ（撮影情報）を削除し、ファイルサイズを軽量化 |
| 遅延読み込み（Lazy Load） | ON | スクロール時に画像を読み込むことで、ページの表示速度を向上 |
| WebP変換 | ON | 画像を軽量なWebP形式に変換し、表示速度を最適化 |
| 画像のリサイズ | 最大幅 1920px / 最大高さ 1920px | アップロード時に不要に大きな画像を適切なサイズにリサイズ |
| 画像のバックアップ | ON（サーバー容量が十分なら） | 元画像を保持し、万が一のためにバックアップを作成 |
| 圧縮レベル | Lossy（非可逆圧縮） | 高圧縮でファイルサイズを大幅に削減（画質劣化はほぼなし） |
| 一括最適化 | ON（定期的に実行） | メディアライブラリ内の過去の画像も最適化し、サイトを軽量化 |
| CDN（Easy IO） | OFF（無料プランなら） | 有料版のみ利用可能。無料の場合はCDNなしで設定 |
3. 設定を開き、「一括最適化」を実行します。
② Smush（無料版は月50枚まで）
• 無料版でも 手動で1回に50枚まで圧縮可能
• Lazy Load機能（画像の遅延読み込み）もあり、サイトの表示速度向上もしてくれます。
• インストール方法
1. WordPress管理画面 → 「プラグイン」→「新規追加」
2. 「Smush」で検索＆インストール
3. 設定から圧縮を実行
TinyPNGの有料プランにアップグレードしよう
• もし大量の画像を最適化する必要があり、無料枠では足りない場合は、TinyPNGの有料プラン（$39/年） も選択肢。
• ただし、無料のEWWW Image Optimizerなどで十分なら、無理に有料にする必要はないと思っています。
→ 「EWWW Image Optimizerをインストールして無料で圧縮を続ける」が最も簡単でコストもかかりません！
まずはEWWW Image Optimizerを試してみて、もし不便があれば他の方法を考えましょう！
上手な画像圧縮プラグインの併用方法
TinyPNGの無料枠（500枚/月）を使い切っている場合、今月はEWWW Image Optimizerをメインに使い、来月からTinyPNGと併用するのがベストです！
おすすめ設定（TinyPNGの無料枠が回復するまで）
1️⃣ EWWW Image Optimizerで新規アップロード画像を圧縮する
• 「新規画像の自動圧縮」をON
• 「一括最適化」で既存画像を圧縮
2️⃣ TinyPNGのプラグインはそのまま（設定変更不要）
• TinyPNGの設定をオフにしなくてもOK（来月に再開するだけ）
無料枠回復後( 翌月)の設定
✅ TinyPNG
• 「新規アップロード画像の自動圧縮」をON
• 「既存画像の最適化」はOFF
✅ EWWW Image Optimizer
• 「新規画像の自動圧縮」はOFF（TinyPNGが担当）
• 「既存画像の最適化」はON（引き続きEWWWでカバー）
この方法なら、無料で効率よく画像圧縮ができます！
おすすめの併用方法を表にしてみました。
（文字より表の方がわかりやすいかな・・と。）
| プラグイン | 設定項目 | 推奨設定 | 理由 |
|---|---|---|---|
| TinyPNG | 新規画像の自動圧縮 | ON | 新しくアップロードした画像を高品質に圧縮 |
| 既存画像の圧縮 | OFF | 過去の画像はEWWWに任せる | |
| EWWW Image Optimizer | 新規画像の自動圧縮 | OFF | TinyPNGと競合しないようにする |
| 既存画像の圧縮 | ON | 過去の画像を最適化 | |
| WebP変換 | ON | 画像の軽量化で高速表示 | |
| Lazy Load | 遅延読み込み | ON | ページの表示速度向上 |
🔧 EWWW Image Optimizerの推奨設定（用途別）
調整するべきポイント
①「WebP変換」をONにする
• WebPはJPEG/PNGよりファイルサイズが30〜50%軽くなるので、表示速度UP！
• WebP変換をONにする場合：プラグインを
1. 「WebP変換」にチェックを入れる。
2. サイトのキャッシュを削除（ブラウザキャッシュが古い画像を表示するのを防ぐ）。
3. 動作確認をする（古いブラウザではWebPが対応していないことがある）。
📌 もしWebP変換がうまく機能しない場合
• プラグイン「WebP Express」を使うと、より確実にWebPを導入できます。
② 画像のバックアップを「有効」にする（必要なら）
• 元の画像を保存したいならON（再圧縮時に役立つ）。
• サーバーの容量を節約したいならOFF
この設定なら、サイトの表示速度UP＆SEO向上が期待できます！
設定後に「設定を保存」をクリックし、動作を確認してみてください。
画像圧縮でSEO対策のまとめ
今日は沢山のプラグインの話をしてしまいましたが、プラグイン同士の役割と、おすすめの組み合わせを表にしてみました。
| プラグイン | 役割 | おすすめの組み合わせ | 競合する可能性のあるプラグイン |
|---|---|---|---|
| TinyPNG | 高圧縮で新規画像を最適化 | ✅ EWWW Image Optimizer（新規圧縮OFF） ✅ Lazy Load | ❌ Smush（類似機能） ❌ ShortPixel（類似機能） |
| EWWW Image Optimizer | 既存画像の圧縮 + WebP変換 | ✅ TinyPNG（新規圧縮のみ） ✅ Lazy Load | ❌ Smush（類似機能） ❌ Imagify（類似機能） |
| Lazy Load | 画像の遅延読み込みでページ高速化 | ✅ TinyPNG ✅ EWWW Image Optimizer | ❌ WP Rocket（同様の機能がある） |
| WP Rocket | サイト全体のキャッシュと高速化 | ✅ Lazy Load（WP RocketのLazy LoadをOFFにする） ✅ EWWW Image Optimizer | ❌ Lazy Load（両方ONにすると競合） |
| Smush | 画像圧縮 + 遅延読み込み | ✅ Lazy Load（SmushのLazy LoadをOFFにする） | ❌ TinyPNG（類似機能） ❌ EWWW Image Optimizer（類似機能） |
| ShortPixel | 画像圧縮 + WebP変換 | ✅ Lazy Load | ❌ TinyPNG（類似機能） ❌ EWWW Image Optimizer（類似機能） |
他にも方法はありますが、今日は私が実際にやっているプラグインを使った対策を解説しました。
画像を使うと分かりやすくて良いのですが、表示時間が遅くなってしまうとSEOに良くありません。
一度、自分のサイトをチェックして、ページの読み込み速度に問題があれば、この対策を試して下さい！
＜関連ページ＞