こういった画像を必要な数だけ読み込むのにとどめるのを遅延読み込みといい、英語ではLazyLoadというらしい。
一ページに見もしないのに無駄にたくさんの画像をロード/読み込みするのはサーバの付加的にももったいない。そこで一般的には、imgタグでsrcを指定するだけでなく、ライブラリを使用して必要があれば読み込むように変更します.
ここでは有名なライブラリを一つ紹介します.
LazySizes
以下のライブラリを使用する.使い方がシンプルなのでお勧め.
またSEOから画像が隠されてしまうのも防ぐので素晴らしい.また画像だけでなくiFrameにも対応しているので、他のサイトの読み込みを可能な限り省略できる.
https://github.com/aFarkas/lazysizes
使い方
- 画像遅延読み込みライブラリの読み込み
‘<script src=”lazysizes.min.js” async=””><‘/script>’
上記のファイルをロードするようにする.
2. 遅延読み込みしたい画像を通常の書き方から下記のように変更する
‘<img data-src=”image.jpg” class=”lazyload” />’
簡単。srcではなくdata-srcになっていることに注意
おわりに
こういうのって検索して見つけるのが難しい気がするので、webページを改善するTipsとかに本当はまとまっているべきだと思いますね。
