【JQuery】「LazyLoad.js」のメリット・デメリット

公開日：2013/10/20

更新日：2014/01/22

カテゴリー: JQuery

私が管理するサイトで「LazyLoad.js」を実装し、しばらく利用してみて感じた「LazyLoad.js」のメリット・デメリットを書きたいと思います。

なお、LazyLoad.jsの実装方法はこちらを参考にしてください。

１．「LazyLoad.js」の仕組み

ページに画像がある場合、ブラウザの仕様上、いっきに画像を読み込み、ページに全て表示させます。しかし「LazyLoad.js」では、いったん代替画像をブラウザに読み込ませ、それを画面に表示させます。そしてブラウザの画面が代替画像の場所まで来た瞬間、javascriptで本来の画像と差し替えます。

まずこのことが大前提です。

２．「LazyLoad.js」のメリット

ページの表示速度が早くなる

「LazyLoad.js」では、ページ表示の際、いったんブラウザに代替画像だけを読み込ませるので、ページの表示速度が速くなります（試してませんが、理論では次のようになるかと思います）。

【例】
あるページに100枚の画像があったとします。そのページにアクセスした際、100枚全ての画像がブラウザに読み込まれないとページの表示が完了しません（画像一枚の容量が大きければ大きいほど遅くなります）。

しかし「LazyLoad.js」を利用すると、100枚の画像の代わりに、いったん代替画像が読み込まれるので、ブラウザは代替画像を1枚だけ読み込めばページの表示が完了します。

昨今のSEOではページの表示速度が重要視されているため、大量の画像を使用するサイトには適している機能です。

サーバーの負荷を抑えることができる

もう一つの利点は、サーバの負荷が小さくなることです。

【例】
あるページに100枚の画像があったとします。そのページにアクセスがあった場合、サーバーは100枚の画像を転送しなければなりません。画像1枚の容量が2MBだったとしたら、1アクセスにつき200MBの転送量となります。

しかしその訪問者が、画像を3枚だけ見て他のページに行った場合、残りの97枚、つまり194MB分の転送量は無駄になってしまいます。

しかし「LazyLoad.js」を利用すると、代替画像が画面に表示されたときだけ画像（本来の画像）がサーバーから読み込まれるので、訪問者が途中で他のページに移動しても、その他の画像は読み込んでいないため、サーバーからの無駄な転送を抑えることができます。

21時～23時くらいのアクセスが急増する時間帯ではサーバーの負荷が大きくなるので、この機能があればサーバーの負荷を減らせることが考えられます。

３．「LazyLoad.js」のデメリット

javascriptが無効の場合は機能しない

「LazyLoad.js」はjavascriptを利用しているため、訪問者がjavascriptの機能を外している場合、代替画像と本来の画像の差し替えが機能しなくなります。つまり、代替画像がずらりと並んだ状態で、本来の画像は一切表示されません。

わざわざjavascriptの機能を外している人はごく少数ですし、外している人はネット上級者である確率が高いため必要に応じて「on」に切り替えてくれると思います。なのであまり気にする必要はないかもしれません。

画像検索にひっかからなくなる

googleなどの検索エンジンは（おそらく）javascriptの機能を無視しますので、HTMLソース上、ページに表示されている画像は「代替画像」ということになります。なので、検索エンジンは本来の画像を認識することができず、画像のインデックスがされない可能性があります（ここは憶測です。一応ソース上には本来の画像のURLもあるので、もしかしたら読み込んでくれる？）。

画像検索からのアクセスがどのくらいあるのかわかりませんが、少しでもアクセスを取りこぼしたくない場合は「LazyLoad.js」は不向きかもしれません。

また、HTMLソース上、ページに表示されている画像は代替画像のみなので、SEO的なページ評価に影響があるかもしれません。

以上、「LazyLoad.js」のメリット・デメリットについて書きましたが、謙遜でも何でもなく、私の知識は拙いので間違っている可能性が十分あります。もし間違っていたら教えてください。

あわせて読んでほしい！

Follow @ysklog_net 　