表示速度アップ！「loading=”lazy”」と「decoding=”async”」を使い分ける

2024年4月21日2026年2月2日

閲覧ありがとうございます。

この記事では、SEOを考慮して画像表示をさせる方法として読み込みを遅らせる「loading=”lazy”」と非同期で読み込む「decoding=”async”」の違いと使い分けを紹介しています。

こんな問題を解消できます。

必要なタイミングまで画像の読み込みを遅らせることでファーストビューも読み込み容量を減らせるのでスムーズに表示させることが期待できます

スライダーなど非表示部分のある動的なレイアウトを含む場合、表示されるタイミングでいちいち読み込む必要があり、遅延や表示崩れを起こす場合があります

同時進行での情報処理が増えるので逆に遅くなる可能性もあります

<img src="***" alt="***" loading=”lazy”>
＊使えるのは<img>タグと<iframe>タグの両方

<img src="***" alt="***" decoding=”async”>
*使えるのは<img>タグのみ

ファーストビューの画像を非同期で読み込むとそれ以降の画像と一緒に読み込むことになり表示が送れる恐れがあります。そこで基本的には次のようなイメージで使い分けると良いと考えています。

このイメージで、実際自作したHTMLサイトに適用したところ、PageSpeed Insightsでパフォーマンスが４３➡５４に改善しましたので一定の効果は見込めると考えています。

参考になれば幸いです。

私はこちらの記事を参考に設定できました。ありがとうございました。

このサイトはテーマ「SWELL」を使っています

「SWELL」はWordpress初心者も慣れた人も使い続けられるテーマだと思います。

この記事を書いた人

WordPressでサイトを作り、壊し、また作る。
フリーランスとしてココナラで実案件に向き合いながら、その経験をそのまま言葉にしています。
うまくいった設定も、試したら失敗した話も、ぜんぶここに書いています。
すでにWordPressを持っていて、もう一歩進めたい人に届けば。