最近サイトなどを見るとimgタグに「loading=”lazy”」と書いてあるのをよく見かけませんか？
これについてどういう意味があるのか、またどういうとこに使えば良いのかを解説致します。
「loading=”lazy”」ってなんじゃい
「loading=”lazy”」とは画像を遅延読みする属性になり、使い方としては下記のようになります。
<img src="01.jpg" loading=”lazy”>ちなみに、lazy以外に指定できる値を紹介します。
loading=”lazy”
画像の読込みを遅延させる
loading=”eage”
すぐに画像を読込む
loading=”auto”
初期値
画像遅延読込ってなに？ おいしいの？
画像遅延読込とはその名の通り、表示領域以外の画像を後で読込むことです。
通常ブラウザがWebサイトを開く際に、CSSや画像などを読み込みますが、その読み込んでいる間は画面の表示（レンダリング）がストップします。
それに対処するため、画像を後から非同期で読み込むことで、画面の読込を高速化させます。
高速化することで、SEOの評価はあがり、また素早く表示され操作ができるようになるため、ユーザビリティも向上します。
最新のブラウザでは、ほとんど「loading=”lazy”」に対応してますので、積極的に活用しましょう。
■can i use
https://caniuse.com/?search=loading
注意点について
「loading=”lazy”」は表示領域以外の画像を遅延読込させます。
ということは、FV（ページを開いたときに見える範囲）の画像を遅延読込させると、一瞬表示が崩れたり、レイアウトシフト（後から画像が読み込まれて、コンテンツがずれること）が起こりますので、FV範囲の画像には指定しないようにしましょう。
