ツイート
シェア
LINEで送る
B! はてぶでブックマーク
Pocketでブックマーク
RSSフィード

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

html5 image
イラストダウンロードサイト【イラストAC】
の画像をもとに加工しています。

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

(ただし、Safariは除く。Apple頼む!)

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

Lazy-Loadingとは?

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

これをLazy Loadingと言います。

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

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

WHATWG

Web Aypertext Application Technology Working Goup

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属性を指定するだけ。

eager遅延読み込みしない。
lazy遅延読み込みをする。

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

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

(autoはブラウザに任せる設定。)

widthとheightを設定しよう!

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

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

Cumulative Layout Shift

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

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

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

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

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

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

Googleはサイト評価にいろいろな指標を用意しています。CLSもそのひとつ。

(CLSはアクセシビリティに関する指標)

総合評価なのでCLSだけを直せば良いというものではありませんが、対応はかんたんなのでやっておいたほうが良いです。

(サイト評価の指標はひとつひとつ潰していく地道な作業が必要。)

CLS指標修正有無
0.1以下合格点。
0.11~0.24注意。
できれば直したほうが良い。
0.25以上エラー。
絶対直したほうが良い。

英語ですがGoogleの開発者ガイドです。

Cumulative Layout Shift (CLS)

Optimize Cumulative Layout Shift

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

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

ブラウザ
バージョン
Google Chrome
84.0.4147.125

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

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

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

(読み込み順は後ろになっていたが。)

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

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

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

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

サンプルページで何度も確認するときはCtrl + F5でリロードしてください。でないと画像を再読込しません。

(またはShift + F5)

Safari(Mac)はまだ未対応

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

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

Settings -> Advanced -> Experimental Features menu

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

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

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

(Edgeの中身はChromeなのであたり前。)

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

(Firefoxは<img>だけ使えます。<iframe>は使えません。)

HTMLの標準仕様になっても、ブラウザによって対応がまちまちなのに注意。

(HTMLやCSSではあたり前のこと。)

対応状況を上記のCan I Useで確認して実装してください。

CSS q, blockquote, 引用をカスタマイズする方法
次の投稿

HTML&CSSの本

post-cta-image

どうしてもインターネットで調べて勉強するのが苦手という人のために、HTMLとCSSの最新技術と基本を網羅できる本を2冊選びました。

この内容を身につければ、ほかの本は必要ありません。将来的には、自分の力で、書籍を使わずに、インターネットにある情報だけで学べます。

コメントを残す

*