loading="lazy"を書くだけでimgやiframeが遅延読み込みになる

TIPS 0 Takuya Kobayashi

画面外の画像の読み込みにのせいで、ページ全体が重くなったりガタついたりすることはユーザーからしたら不快極まりない。

そこで画面外の画像は読み込まず、スクロール中に表示領域近くの画像を動的に読み込むという遅延読み込みの仕組みが望ましい。

今までは画像の遅延読み込みはjsを使用していたが、最近のウェブブラウザはimgやiframeにloading=”lazy”を書くだけで遅延読み込みが可能になっている。

この仕様はこれから標準になっていくようで、WordPressは5.5から書き出すimg要素などにloading属性がつくようになった。

loading属性対応ブラウザ

https://caniuse.com/?search=loading-lazy

Edge,Firefox,Chrome主要ブラウザがサポート。ただユーザー数が結構多いSafariがまだ。

loading属性の書き方

loading=”lazy”:遅延読み込みさせる

<img src=”img/image1.jpg” loading=”lazy” alt=””>
<iframe src=”//hoge.com” loading=”lazy”></iframe>

loading=”eager”:遅延させず読み込む

<img src=”img/image1.jpg” loading=”eager” alt=””>
<iframe src=”//hoge.com” loading=”eager”></iframe>

loading=”auto”:lazyかeagerの判断をブラウザに任せる

<img src=”img/image1.jpg” loading=”auto” alt=””>
<iframe src=”//hoge.com” loading=”auto”></iframe>

デフォルトはauto

<img src=”img/image1.jpg” loading alt=””>
<iframe src=”//hoge.com” loading></iframe>

試してみた

loading=”lazy”を付与したimgをdiv囲った画像を表示するだけのソースを書いてインスペクタで見てみた。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>lazy load</title>
<style media="screen">
* { box-sizing:border-box; }
.wrap {
overflow-x: scroll;
white-space: nowrap;
}
.wrap .item {
width: 100vw;
display: inline-block;
}
.wrap .item img {
width: 100%;
}
</style>
</head>
<body>
<div class="wrap">
<div class="item">
<img src="img/DSC00146.jpg" loading="lazy" alt="">
</div>
<div class="item">
<img src="img/DSC00147.jpg" loading="lazy" alt="">
</div>
<div class="item">
<img src="img/DSC00148.jpg" loading="lazy" alt="">
</div>
<div class="item">
<img src="img/DSC00149.jpg" loading="lazy" alt="">
</div>
<div class="item">
<img src="img/DSC00151.jpg" loading="lazy" alt="">
</div>
<div class="item">
<img src="img/DSC00152.jpg" loading="lazy" alt="">
</div>
<div class="item">
<img src="img/DSC00153.jpg" loading="lazy" alt="">
</div>
<div class="item">
<img src="img/DSC00154.jpg" loading="lazy" alt="">
</div>
<div class="item">
<img src="img/DSC00155.jpg" loading="lazy" alt="">
</div>
<div class="item">
<img src="img/DSC00156.jpg" loading="lazy" alt="">
</div>
<div class="item">
<img src="img/DSC00157.jpg" loading="lazy" alt="">
</div>
<div class="item">
<img src="img/DSC00158.jpg" loading="lazy" alt="">
</div>
<div class="item">
<img src="img/DSC00159.jpg" loading="lazy" alt="">
</div>
<div class="item">
<img src="img/DSC00160.jpg" loading="lazy" alt="">
</div>
<div class="item">
<img src="img/DSC00161.jpg" loading="lazy" alt="">
</div>
<div class="item">
<img src="img/DSC00162.jpg" loading="lazy" alt="">
</div>
<div class="item">
<img src="img/DSC00164.jpg" loading="lazy" alt="">
</div>
<div class="item">
<img src="img/DSC00166.jpg" loading="lazy" alt="">
</div>
</div>
</body>
</html>

動作しない。すべて読み込まれてしまった。

どうやら画像の高さによってコンテンツの高さが決まる作り(良くない作り)では高さが取得できないのかすべて読み込まれてしまうようだ。jsのonload対策か?

divに高さを決めてやったら期待通り動作した。

画像の読み込み数が少ないことがわかる。スクロールすると次々とGETしていく。

ちなみに横スクロールでも同じだった。widthを決めてやらないと、延滞読み込みせず全部読み込んでしまう。

横スクロールでも親要素のwidthを決めてやれば、loading=”lazy”は動作する。

 

jQueryなしで遅延読み込みができていい

まだ一部環境では使えないが、jQueryなしで小手先で使えるloading=”lazy”は良いかもしれない。

99%の環境で動作させたいというのであれば、jQueryのlazyloadを使う。