WEBサイトでページの表示速度を気にしたことがありますか？

ギャラリーページのように画像を多く使用しているページなどでは、ページが表示されるまでに時間がかかってしまうことがあります。

Queryのプラグイン「Lazy Load」を使用すると画像を遅延して読み込ませることができるので、ページの表示速度を上げることができます。

「Lazy Load」はページをスクロールし、画面に表示される時に画像を読み込むプラグインです。

今回はjQueryのプラグイン「Lazy Load」の使用方法をご紹介します。

「Lazy Load」の使用方法

下記のページから「Lazy Load」をダウンロードします。

Lazy Load Plugin for jQuery

ファイル読込

jQuery、ダウンロードした「Lazy Load」を読み込みます。

HTML

遅延させて読み込ませる画像を「data-original」に指定します
※下記はclassに「lazy」を指定しています。

※幅と高さを設定しないと正常に動作しない場合があるので注意してください。

JS

classで「lazy」を指定した画像を遅延ローディングするように設定します。
下記はエフェクトで画像をフェードインするように「effect: “fadeIn”」を指定しています。

画面をスクロールし画像が表示されると、遅延して読み込まれるようになります。

サンプル

下記より、「Lazy Load」を使用した画像の遅延ローディングを確認できます。
スクロールして、画面に表示されると画像が読み込まれます。

「Lazy Load」のデモページ

まとめ

「Lazy Load」使用すると、ページに表示する画像を遅延させて読み込むことができるので、ページの表示速度を上げることにつながります。

WEBサイトでページの表示速度を上げるとSEOの向上にもなります。
他にもページにアクセスしてくれたのに表示が遅くて離脱してしまうということが少なくなると思います。
なのでWEBサイトの表示速度は非常に重要です。

ギャラリーページや画像を多く使用しているページなど、そのページの内容によって、取り入れてみるといいかもしれません。

オプションを使用すれば、クリックやマウスオーバーで画像を表示させることもできます。
また、エフェクトのスピードを変更することも可能です。

ホームページの表示速度が遅いなどで悩んでいる場合、このような対策をすると解決することもあるので、是非チェックしてみてください。