2019年に「Lazyloadを使わずにdecoding="async"で画像を非同期読み込みする」という記事を書きました。あれから状況が大きく変わり、画像の遅延読み込みはブラウザとWordPressの標準機能になりました。
何が変わったのか
loading=“lazy” がブラウザ標準に
2020年以降、ほぼすべてのモダンブラウザがloading="lazy"属性をサポートしています。
<img src="image.jpg" loading="lazy" alt="説明文">
これだけで、ビューポート外の画像は自動的に遅延読み込みされます。JavaScriptのLazy Loadライブラリは不要になりました。
WordPress 5.5以降で自動付与
WordPress 5.5(2020年8月リリース)以降、imgタグに自動的にloading="lazy"が付与されるようになりました。つまり、WordPressを使っているなら何もしなくても画像の遅延読み込みが有効です。
さらにWordPress 5.9以降では、fetchpriority="high"属性にも対応。ファーストビューの画像には遅延読み込みを適用せず、優先的に読み込む制御もできるようになっています。
decoding=“async” もブラウザ標準に
2019年の記事で紹介したdecoding="async"も、現在はほぼ全ブラウザで対応しています。WordPress 6.1以降ではこちらも自動付与されます。
2026年の画像最適化ベストプラクティス
現在のベストプラクティスは、以下の属性を組み合わせることです。
ファーストビューの画像(ヒーローイメージ等)
<img src="hero.jpg" fetchpriority="high" decoding="async" alt="メインビジュアル">
loading="lazy"は付けない(すぐに表示したいため)fetchpriority="high"で優先読み込み
ファーストビュー以外の画像
<img src="content.jpg" loading="lazy" decoding="async" alt="コンテンツ画像">
loading="lazy"で遅延読み込みdecoding="async"でデコードを非同期化
WordPressでの実装
WordPress 5.5以降を使っていれば、基本的に何もしなくてOK。自動的に適切な属性が付与されます。
もしカスタマイズしたい場合は、wp_img_tag_add_loading_optimization_attrsフィルターで制御できます。
Lazy Loadプラグインは不要
以前はLazy Load系のプラグイン(Lazy Load、a3 Lazy Load等)が必要でしたが、2026年現在では不要です。むしろ、ブラウザネイティブのloading="lazy"とプラグインが競合して、かえって表示が遅くなるケースもあります。
Lazy Load系プラグインを入れている場合は、削除を検討してください。
まとめ
| 時期 | 画像の遅延読み込み方法 |
|---|---|
| 〜2019年 | JavaScriptライブラリ(Lazy Load系) |
| 2019年頃 | decoding="async"(一部ブラウザ対応) |
| 2020年〜 | loading="lazy"(ブラウザ標準) |
| 2020年8月〜 | WordPress 5.5で自動付与 |
画像の遅延読み込みは、もう「設定するもの」ではなく「最初から有効になっているもの」になりました。WordPressを最新版に保っていれば、特別な対応は不要です。