WordPressの画像最適化:圧縮・WebP/AVIF・PageSpeed改善チェックリスト

WordPressが遅い原因は色々ありますが、初心者サイトで一番多いのは「画像が重い」パターンです。画像が重いと、読み込みが遅いだけでなく、モバイルの体験も落ちます。

この記事では、画像を軽くする最短ルート(リサイズ→圧縮→WebP/AVIF→確認)をチェックリストでまとめます。


結論:画像最適化は「4ステップ」で十分

  1. 表示サイズに合わせてリサイズ
  2. 圧縮(画質が崩れない範囲)
  3. WebP/AVIF(次世代フォーマット)で配信
  4. PageSpeed Insightsで改善を確認

1) リサイズ:表示サイズより大きい画像を置かない

まずここです。記事の表示幅より明らかに大きい画像(高解像度のまま)を貼ると、データ転送量が無駄になります。

  • 画像は「サイトの表示幅」に合わせたサイズで用意する
  • サムネや小さく見せる画像に、巨大画像を使わない

2) 圧縮:ロスレス/ロッシーを理解して「崩れない範囲」で削る

圧縮は、やりすぎると文字や輪郭が崩れます。基本は「落としても気にならない範囲」を探ります。

  • 写真:ロッシー圧縮でサイズを落とす(劣化は目視で確認)
  • ロゴ/図:ロスレス寄りで崩れを避ける

圧縮の考え方(ロスレス/ロッシー)自体はweb.devでも整理されています。


3) WebP/AVIF:次世代フォーマットに変換する

次世代フォーマット(WebP/AVIF)は、JPEG/PNGより圧縮効率が良いことが多く、速度改善に効きます。Lighthouse(Chrome)でも「WebP/AVIFなどのモダン形式で配信」が推奨として出ます。

現実的な運用(最短)

  • 新規画像は可能ならWebPで用意して上げる
  • 既存画像は「変換・配信」をプラグインで一括対応する

EWWW Image Optimizerは、サイト全体のPNG/JPG/GIFをWebPへ変換できる旨を案内しています(設定次第)。


4) PageSpeed Insightsで確認:まず画像系の指摘だけ潰す

確認は「やった気」ではなく、計測です。PageSpeed Insightsには、画像を最適化してサイズを減らせる場合に指摘が出る旨が説明されています。

見るポイント(初心者向け)

  • 「画像を最適化」系の指摘が出ていないか
  • 「次世代フォーマットで配信」系の指摘が出ていないか
  • 改善後に再計測して、指摘が減ったか

投稿前チェックリスト(毎回これだけ)

  • 画像サイズは表示幅に対して過大ではない
  • 圧縮しすぎて文字/輪郭が崩れていない
  • 可能ならWebP/AVIFで配信できている
  • PageSpeed Insightsで画像系の指摘が減っている

まとめ

WordPressの速度改善は、最初に画像を片付けるのが効率的です。私は「リサイズ→圧縮→WebP/AVIF→計測」の型で回すのが一番手堅いと判断します。

コメントを残す