遅延読み込みでWebページを高速化！jQuery Lazy Loadの使い方

みなさんこんにちは！
デザイナーの伊東です。

一生懸命作ったWebサイトがめちゃくちゃ重い！
デザイナー・コーダーのみなさんなら、そんな悩みを一度でもお持ちになったことだと思います。

表示速度が遅いのには、容量の大きい動画を配置していたり、数万pxのボリュームのあるページだったり、様々な理由があると思います。

今回はそんなお悩みを解決する方法の一つとして、「画像の遅延読み込み」という方法をご紹介します。
昔からよく知られた技術ですが、実は「SEOに不向きだ」という意見も数多くありました。
しかしGooglebotの技術向上により、その不安は解消されつつあるようです。

読み込んでいる画像の数が多いサイトの場合、非常に有効な手段だと思いますので、ぜひお試しください。

遅延読み込みとは

遅延読み込みという技術は、Webサイトに表示される画像を一度に読み込まず、必要に応じて必要な分だけ読み込むというものです。不必要な画像の読み込みを後回しにして、画像以外のCSSやJSファイルの読み込みが先に行われます。そうすることで、表示速度を速くすることができます。

jQuery Lazy Loadの使い方（基本編）

遅延読み込みを実装するにあたり、一番ポピュラーな”Lazy Load”というjQueryプラグインをご紹介します。
Lazy Loadは、読み込みを遅延させたい画像を一旦ダミー画像にすり替えて、表示させるタイミングで本物の画像に差し替えるという動きをします。
画像が差し代わるタイミングは、デフォルトでは画像がブラウザの表示領域内に入った時です。

実装はとてもシンプルで、比較的用意に遅延読み込みの仕組みを取り入れることができます。

それでは、設定方法やオプションなどを詳しく見ていきましょう。

ダウンロードと読み込み

以下のページからダウンロードできます。
（以前は公式サイトからダウンロードできたのですが、現在はgithubからダウンロードする形になっているようです）
https://github.com/tuupola/jquery_lazyload

まずはjQueryと、ダウンロードしたlazyload.jsを読み込みます。
これで前準備は完了です。

imgタグの設定

次に遅延読み込みさせたい画像の設定を行います。
特定のimgタグに、以下のようにclassとプロパティを設定します。

“lazy”というclassがついたimgタグに対してLazy Loadを適用していきます。
data-originalというプロパティで、実際に読み込む画像を指定します。
src属性には、画像が読み込まれる前に表示させておくダミー画像を設定します。

実は、lazyload.jsにはダミー画像を自動的に生成するプログラムが組み込まれています。なのでsrc属性の指定はなくても表示上は問題ないのですが、imgタグにsrc属性を指定しないとW3Cのチェックに引っかかってしまうので、上記の形をオススメします。

Lazy Loadの実行

それではいよいよlazyload.jsを実行していきます。
先ほどのJSファイルを読み込ませた記述の後に、以下のソースを記述します。

これだけで基本的な遅延読み込みの設定は完了です。
とても簡単です！

jQuery Lazy Loadの使い方（応用編）

ここからはより高度な遅延読み込みの設定をご紹介します。

threshold

画像が読み込まれるタイミングをずらすことができます。
マイナスの値を大きくすればするほど、読み込まれるタイミングは遅くなっていきます。

event

通常、Lazy Loadが発動するタイミングは画像が表示領域に入った時ということを先ほどご説明しました。
このオプションを使えば、他のイベントに対して画像を表示させることができます。
下記の例では、指定した領域がクリックされた時にJSが動くようになっています。
クリックイベントの他にはマウスオーバーイベントなどに対応しているようです。

effect

画像が表示される時のエフェクトを設定することができます。
“effect_speed”を合わせて指定することで、エフェクトの速さもコントロールすることができます。

skip_invisible

通常であれば”display:none;”になっている画像に対してもLazy Loadは発動します。
このオプションを有効にしておけば、そもそも非表示になっている画像に対してはLazy Loadは効かなくなります。
細かいことかもしれませんが、不必要なJSの動きを控えて、さらに軽量化を後押ししてくれます。

placeholder

画像表示前に見せておくダミー画像をオプションとして指定することも可能です。
個別に設定する場合は、先ほどご説明したようにsrc属性で指定する形になります。

 

いかがだったでしょうか。
画像を多用しているサイトにとってはなくてはならないプラグインだと思います。
他のプラグインと比べて比較的導入も簡単だと思うので、まだ使ったことがない方はぜひ一度試してみることをオススメします。