全国1000万2016人のファンのみなさま。
お世話になっております。VAXだず。
サムネの猫ちゃんかわいいず。
先週 4/14(木)、帰りに貝づくしというタイムセールお寿司を買って３つほど食べたところでえらい目に遭いました。
当時はライフラインもやられてましたがついに昨日うちもガスが復活し、なんとか生活できるようになってきました。あざす。
さて、
ネット回線がイマイチな時、画像が重たいとやはり見る気がなくなったりと離脱してしまいがちです。
避難所を探すのもちょっと大変でした。
なので今日はlazy loadを使って遅延読み込みの動作検証を行ってみます。
これはどういうものかというと
使用されているサイトも多いとは思いますが
サイト内をスクロールした時に画像が遅れて出てくるよってやつです。
正確には遅れて出てくるのではなく、そこで初めて読み込んで表示するということです。
これで何が変わるかというと
最初にページを読み込む際のデータ量が減るので表示速度が上がるということになります。
実際にどのくらい違うかというものを検証してみたいと思います。
まずは
Lazy Load のダウンロード
こちらのページを見ていただくと
赤枠部分 Download ZIP というボタンがあるのでダウンロードします。
Zipファイルを解凍するといろいろとファイルがあるのですが
jquery.lazyload.js
jquery.lazyload.min.js(圧縮したもの)
上記ファイルのどちらかを使用します。
(今回のデモでは圧縮したものを使用してます。)
jquery.lazyload.min.jsをサーバーにアップし、
html内で読み込むようにします。
■使用方法
1 html
<img src="読み込み前の画像パス" data-original="画像パス" class="lazy">
※デモでは
src="読み込み前の画像パス"を省略しています。
<img data-original="images/-shared-img-thumb-20140601-P6010043_TP_V.jpg" class="lazy">
実際にはこんな感じですね。
2 javascript
jQuery(function($){
$('.lazy').lazyload();
});
画像に付けている class="lazy" このクラス名に対応しています。
これでオッケーです。
詳しくは デモ 2 のソースをご確認ください。
また、オプションもいろいろあるのでこちらを確認してみてください。
//www.appelsiini.net/projects/lazyload
では、
Ａ：普通に画像を並べただけのページ
デモ1
Ｂ：続いて Lazy Loadを使用したページ
デモ2
表示速度検証のためにこちらを使用します。
GTmetrix
無料でページ表示速度などが検証できるツールです。
では実際の結果はというと
Ａ
Ｂ
PageSpeed Score
Page Load Time
Toatal Page Size
これを見ると差は歴然としてますね。
使い方も簡単なのでjavascriptが使えるサイトならぜひ導入してみてはいかがでしょうか？
wordpress で使うときはブログなどでループ処理を使って
サムネイル画像を吐き出す処理の箇所に入れると楽ちんですね。
また Lazy Load とは違うのですがエフェクト効果を付けた読み込み方法もあります。
是非こちらもご覧ください。
エフの制作実績
では。
