2026年5月20日
2026年5月20日
Smushで画像を最適化してWordPressを高速化する方法
はじめに
Smush(WP Smush)はWordPressの画像を自動圧縮・WebP変換・遅延読み込みできるプラグインです。既存の画像も一括最適化でき、ページ読み込み速度の改善に直結します。
症状・原因
- WordPressのページが画像のせいで重い
- 画像をアップロードするたびに手動で圧縮したくない
- WebP形式に変換してCore Web Vitalsを改善したい
- 画像の遅延読み込み(Lazy Load)を設定したい
解決手順
ステップ1:Smushをインストールする
wp plugin install wp-smushit --activate
ステップ2:基本設定を行う
Smush → ダッシュボード:
→「アップロード時に自動圧縮」: ON
→「メタデータを削除」: ON(GPS情報・撮影情報を削除)
→「ロスレス圧縮」: ON(無劣化圧縮)
→「すべてのサムネイルを圧縮」: ON
圧縮レベル:
→ スーパー(最大圧縮・推奨)
→ 通常(バランス)
→ カスタム
ステップ3:既存画像を一括最適化する
Smush → ダッシュボード →「一括最適化」
→「一括圧縮を開始」をクリック
→ メディアライブラリの全画像を順次圧縮
WP-CLIで確認(処理状況):
# Smushで最適化済み・未済の画像数を確認
wp smush stats
# 特定の画像IDを最適化
wp smush smush-attachment --id=123
# 未最適化画像を一括処理
wp smush bulk-smush
ステップ4:WebP変換を有効化する(Smush Pro)
Smush → WebP変換:
→「WebP変換を有効化」: ON
→ 配信方法:
- CDN(推奨・Smush Pro): CloudFront経由でWebPを配信
- サーバー(.htaccessルール): 対応ブラウザにWebPを配信
.htaccessに追加されるルール:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</IfModule>
ステップ5:遅延読み込みを設定する
Smush → 遅延読み込み:
→「画像の遅延読み込みを有効化」: ON
→ 除外設定:
- ファーストビュー上の画像を除外(LCPへの影響を防ぐ)
- ロゴ・ヒーロー画像のクラスを除外リストに追加
// functions.php — 特定クラスをSmushの遅延読み込みから除外
add_filter('smush_skip_lazy_load', function(bool $skip, string $src): bool {
// ヒーロー画像とロゴはLazy Load除外
if (str_contains($src, 'hero') || str_contains($src, 'logo')) {
return true;
}
return $skip;
}, 10, 2);
ステップ6:最適化結果を確認する
# 圧縮統計を表示
wp smush stats
# 出力例:
# Total Images: 342
# Smushed: 298 (87.1%)
# Super-Smushed: 198
# Savings: 12.4 MB (34.2%)
# メディアライブラリのSmushメタデータを確認
wp post meta get 123 _smush_data --format=json
注意事項
- 無料版は1画像あたり5MBまで・月間制限なしで圧縮できます
- WebP変換とCDN配信はSmush Pro(有料)が必要です
- 遅延読み込みはファーストビューの画像(LCP要素)には適用しないでください
- バックアップを取ってから一括最適化を実行することを推奨します
まとめ
Smushはアップロード時に自動圧縮・メタデータ削除を設定するだけで画像サイズを大幅削減できます。既存画像は一括最適化で対応し、遅延読み込みでLazy Loadも一括設定できます。