今回の記事では、Lazy Load(画像遅延読み込み)について解説します。
必要性の考察や、実装するにあたり、サンプルコードを紹介しています。
Lazy Loadは、WEBサイトの速度を改善するための重要な概念になりますので、参考になりましたら幸いです。
Lazy Loadとは
リソースの遅延読み込みのことであり、特に画像の読み込み時に使用されている技術です。
例えば、ページがロードされた段階では画像を読み込まず、ユーザーがスクロールしたタイミンングで画像の読み込み ⇒ 表示までを行います。
つまり、部分的に読み込みが行われるので、初期描画時に対象の画像はロードしません。
そのため必然的にサイトの速度は早くなります。
ブラウザのリソース読み込みの仕組みがわかっていれば、さらに理解が深まるので、下記の記事も参照してみてください。
なぜ必要か
- 表示が遅いWEBサイトは、ユーザーが離脱しやすい
- パフォーマンスの低いサイトはSEOの評価が下がる
- リソースが膨大な場合に、サーバーやネットワークに負荷がかかる
Lazy Load(遅延読み込み)とSEOの関連性
サイトの表示速度(パフォーマンス)の向上はSEOに有利
Googleは、サイトの表示速度を重視しています。
そのため、Lazy Loadで画像の読み込みを最適化し、サイトの表示速度を向上させることはSEO対策になります。Lazy Loadに加えて、HTML5のsrcset属性やsize属性をセットで使用することで、リソースの読み込み速度の更なる向上が期待できます。
Lazy Load対象の画像がクローリングされない？
Lazy Loadを実装した画像については、ユーザー(人間)が画面をスクロールして初めて読み込まれるため、 Googlebotが認識できないという記事も見かけます。
本件は、Googlebotが認識できるように実装すれば問題ありません。
具体的に、デフォルトではサイズの小さいダミー画像を用意(alt属性は必ず指定)しておき、
Lazy Load発火のタイミングに合わせて、本体の画像を表示させるように実装すれば大丈夫そうです。
実装
画像遅延読み込みのコードを書いていきます。
初期描画時はサンプルの画像を表示させておき、ブラウザが全てのリソースのロードを完了したタイミングで、対象の画像を読み込みます。
ソースコード
<div class="container">
<div class="image"><img src="https://placehold.jp/400x320.png" data-img-src="https://cdn.pixabay.com/photo/2017/05/12/08/29/coffee-2306471__340.jpg" class="lazyload_img" alt="適切なalt属性"></div>
<div class="image"><img src="https://placehold.jp/400x320.png" data-img-src="https://cdn.pixabay.com/photo/2015/10/12/15/14/coffee-984328__340.jpg" class="lazyload_img" alt="適切なalt属性"></div>
<div class="image"><img src="https://placehold.jp/400x320.png" data-img-src="https://cdn.pixabay.com/photo/2017/04/19/13/03/coffee-2242213__340.jpg" class="lazyload_img" alt="適切なalt属性"></div>
<div class="image"><img src="https://placehold.jp/400x320.png" data-img-src="https://cdn.pixabay.com/photo/2016/11/29/12/54/cafe-1869656__340.jpg" class="lazyload_img" alt="適切なalt属性"></div>
<div class="image"><img src="https://placehold.jp/400x320.png" data-img-src="https://cdn.pixabay.com/photo/2017/11/11/21/18/food-2940553__340.jpg" class="lazyload_img" alt="適切なalt属性"></div>
</div>window.addEventListener('load', () => {
const images = document.querySelectorAll('.lazyload_img');
for (let i = 0; i < images.length; i++) {
images[i].setAttribute('src', images[i].getAttribute('data-img-src'));
images[i].onload = () => {
images[i].removeAttribute('data-img-src');
}
}
})解説
まず初期描画時は、サンプル画像のみが読み込まれている状態なのがわかります。
次に、ブラウザが全てのリソースをロードした後に、画像を読み込みます。
実際に動作確認をしてみると、初期描画時のローディングの時間は明らかに短縮されているのがわかります。
最後に
今回の記事では、全てのリソースのloadが完了したタイミングでLazy Loadを発火させましたが、
他にもユーザーのスクロールに合わせて画像を読み込むなど、タイミングは様々です。
しかし、スクロールイベントに合わせて遅延ローディングする際には、ロードを開始するタイミングなどを進捗に検討する必要がありますし、
スクロールイベントは発火し続けるので、パーフォーマンスも考慮する必要があります。
Lazy Loadの実装は、使い方を間違えるユーザビリティの低下を招いてしまうので、
実装する必要性をしっかりと見極める分析力も必要になってくると感じています。
