昨今、回線の性能がよくなっているにせよ自分が今視覚で見ている部分から読み込んだ方が効率的という発想。いきなり画面に見えないフッターコンテンツから表示させても無駄。
wordPressにもそういうプラグインがあります。
仕組み
基本目に見える部分から処理される。一気にページの画像をすべて読み込むのではなく、スクロールするたびに画像が読み込まれるような挙動になります。
メリット
直帰率と離脱率が下がる。
また、技術的な視点にしてもページをスクロールしなければ無駄な通信量がかからなくなるのでメリットが大きいです。（昨今のクラウドベースの分析ツールとかは通信量が課金の基準になっているSaaSが多いですし。）
loading="lazy"
imgタグすべてに対してloading="lazy"を指定してあげれば遅延読み込みの実装が簡単にできます。ただ、古めのブラウザとかiOSとかだと対応していなかったりするのが弱点です。（Chromeでいえば、2019年の77以降、iOSなら15.4以降しか対応していません。特にiOSは古いまま使っている人もいるでしょう。）
|
1 |
<img loading="lazy" src="images/620023642.jpg" alt="" width="400" height="300" /> |
lazysizes.js
以下のレポジトリから入手できます。属性でdata-srcを指定するのとclassに"lazyload"と指定すれば実装可能です。ライブラリを使えば古いブラウザでも遅延読み込みに対応させることが可能です。
https://github.com/aFarkas/lazysizes
|
1 |
<img data-src="画像1.jpg" class="lazyload" > |
Reactの遅延読み込み
- ダイナミックインポート（import('モジュール名'))
- React.lazy
- suspense
ダイナミックインポートとは、モジュールが必要になった時点で動的に読み込むことを指します。非同期的な処理になります。通常Reactだと静的インポート（import AAA from "モジュール名"）が使われることが多いのですが、ダイナミックインポートなら描画時にすべてロードしたうえで描画するということをしなくてよくなるので初期描画が早くなります。
ただ、その際に、React.lazyやsuspenseで画面上まだloading中であることを表示してあげる実装が推奨されています。
この記事へのコメントはありません。