閲覧ありがとうございます。
この記事では、SEOを考慮して画像表示をさせる方法として読み込みを遅らせる「loading=”lazy”」と非同期で読み込む「decoding=”async”」の違いと使い分けを紹介しています。
- サイトの表示速度をアップさせたい
- SEOを意識したコーディングをしていきたい
- ユーザビリティーとSEOを両立させたい
こんな問題を解消できます。
目次
表示速度アップ！「loading=”lazy”」と「decoding=”async”」を使い分ける
loading=”lazy”の効果
「decoding=”async”」の効果
使い方
<img src="***" alt="***" loading=”lazy”>
＊使えるのは<img>タグと<iframe>タグの両方
<img src="***" alt="***" decoding=”async”>
*使えるのは<img>タグのみファーストビューの画像を非同期で読み込むとそれ以降の画像と一緒に読み込むことになり表示が送れる恐れがあります。そこで基本的には次のようなイメージで使い分けると良いと考えています。
- ファーストビューは同期・遅延なしで優先的に読み込む
- ファーストビュー以下の静的なレイアウトの画像はloading=”lazy”
- ファーストビュー以下の表示・非表示の有る動的なレイアウトではdecoding=”async”
このイメージで、実際自作したHTMLサイトに適用したところ、PageSpeed Insightsでパフォーマンスが４３➡５４に改善しましたので一定の効果は見込めると考えています。
参考になれば幸いです。
私はこちらの記事を参考に設定できました。ありがとうございました。
