HTML5, 標準仕様になった画像の遅延読み込み(Lazy-Loading)

2020年、HTML5でloading属性（lazy-loading）が標準仕様になりました。これでJavaScriptでしていたことがHTMLだけでできるようになります。

（ただし、Safariは除く。Apple頼む！）

その内容と使うときの注意点をわかりやすく解説します。

Lazy-Loadingとは？

最近のWebサイトでは画像を最初に読み込まず、スクロールで画像のところに来てはじめて読み込みが行われます。

これをLazy Loadingと言います。

これまではJavaScriptで処理を行なっていましたが、2020年、HTML5の標準仕様になりました。

もともとGoogle Chromeが独自に開発した機能ですが、HTMLの仕様を策定するWHATWGが取り入れました。

HTML5の標準仕様

まずは使い方から。

<img src="2.jpeg" loading="eager" alt="2" height="150" width="360">
<img src="3.jpeg" loading="lazy" alt="3" height="150" width="360">

かんたんです。loading属性を指定するだけ。

<img>と<iframe>で使えます。（その他のタグに入れても無視される。）

Chromeでは"auto"もありますが標準仕様にはありません。

（autoはブラウザに任せる設定。）

widthとheightを設定しよう！

loading属性は、HTMLタグのwidth, heightかCSSのwidth, heightを併用しましょう。

画像サイズが必ずないといけないことはないですが、Googleのサイト評価（CLS）が下がります。

CLSは表示しているコンテンツが動くと評価が下がります。

たとえばユーザーがボタン押そうとしたら、コンテンツが動いて興味のない広告を押してしまったりとかありますよね？

これをGoogleはユーザーにとって良くないと嫌います。

（広告費を稼ぐため狙ってやる人もいる。）

lazy-loadingで画像サイズが未指定だと、スクロールで画像を後読みする前後で後ろのコンテンツが動きCLSが悪くなります。

せっかくいいコンテンツを提供しているのに低評価は残念です。lazy-loadingと画像サイズはセットだと覚えておきましょう。

後読みのタイミングはけっこう早い

サンプルページを用意して動きを見てみました。

最後の画像がサイズ未指定のCLS評価を下げるやり方です。

CSSはファイルを用意するまでもないのでインライン化しました。

思った以上に早めに読み込みます。最初は画像の上を2000px空けたのですが、初期表示（スクロールなし）で読み込んでいました。

（読み込み順は後ろになっていたが。）

いまは3000px空けてます。それで一気にスクロールしても画像の後読みは見えません。

PCで見ていてブラウザの性能もよく、コンテンツが少ないのでレンダリングも早いため、画像の読み込みも早いから。

ただしブラウザの開発ツールで確認すると、スクロールしたら画像読み込みが始まるのが確認できます。

あと、よく見る画像読み込み前のloadingマーク（クルクル回るやつ）はありません。

Safari（Mac）はまだ未対応

2020年11月14日現在、Mac、iPhoneの標準ブラウザSafariは未対応です。

ただし『デフォルトで未対応』なので、Safariのブラウザの設定で、

で設定すれば対応できます。

デフォルトでやってもらわないと意味ないですが、対応することは決まっているので待ちましょう。

Chrome, Edgeは対応しています。

（Edgeの中身はChromeなのであたり前。）

Firefox, IE11は未対応です。IE11は消えていくので期待しても無駄でしょう。

（Firefoxは<img>だけ使えます。<iframe>は使えません。）