最近サイトなどを見ると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範囲の画像には指定しないようにしましょう。