blog

BLOGブログ

ARCHIVES

VAX

サイト読み込み改善にlazyloadを改めて使用してみたず。

20160427_thumb

 

全国1000万2016人のファンのみなさま。
お世話になっております。VAXだず。

サムネの猫ちゃんかわいいず。
先週 4/14(木)、帰りに貝づくしというタイムセールお寿司を買って3つほど食べたところでえらい目に遭いました。
当時はライフラインもやられてましたがついに昨日うちもガスが復活し、なんとか生活できるようになってきました。あざす。
さて、

ネット回線がイマイチな時、画像が重たいとやはり見る気がなくなったりと離脱してしまいがちです。
避難所を探すのもちょっと大変でした。
なので今日はlazy loadを使って遅延読み込みの動作検証を行ってみます。

 

 

これはどういうものかというと

 

使用されているサイトも多いとは思いますが
サイト内をスクロールした時に画像が遅れて出てくるよってやつです。

正確には遅れて出てくるのではなく、そこで初めて読み込んで表示するということです。
これで何が変わるかというと
最初にページを読み込む際のデータ量が減るので表示速度が上がるということになります。

 

実際にどのくらい違うかというものを検証してみたいと思います。

 

 

まずは

 

20160427000

 

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

 

 

では、
A:普通に画像を並べただけのページ

 

デモ1

 

 

B:続いて Lazy Loadを使用したページ

 

デモ2

 

 

 

表示速度検証のためにこちらを使用します。

GTmetrix

 

 

無料でページ表示速度などが検証できるツールです。

 

 

 

では実際の結果はというと

 


 

20160427003

 


 

20160427004

 

 

PageSpeed Score

Page Load Time

Toatal Page Size

 

これを見ると差は歴然としてますね。

 

 

 

 

使い方も簡単なのでjavascriptが使えるサイトならぜひ導入してみてはいかがでしょうか?
wordpress で使うときはブログなどでループ処理を使って
サムネイル画像を吐き出す処理の箇所に入れると楽ちんですね。

 

 

 

また Lazy Load とは違うのですがエフェクト効果を付けた読み込み方法もあります。

 

是非こちらもご覧ください。

 

エフの制作実績

 

では。

 

 

この人が書いた記事

VAXの記事をもっと見る

関連する記事