LazyLoadの設置｜画像の遅延読み込みでWEBページを高速化

WEBサイトの表示が遅いとユーザーにとってはストレスになるので離脱率が上がり、CVにも影響が出てきます。
また、検索結果にも影響が出ますので、SEOの観点からも改善が必要です。

今回はWEBサイトの画像の読み込み遅延をさせるプラグイン「LazyLoad」の設置で表示速度を上げる方法をご紹介いたします。

関連記事：WordPressの表示速度改善に！高速化におすすめのプラグインまとめ

LazyLoadの設置方法

ライブラリーのダウンロード

まずは以下のURLより必要なファイルをダウンロードします。

URLはこちら：https://github.com/tuupola/lazyload

ダウンロードしたファイルを読み込む

LazyLoadをダウンロードしたら、headタグの中かbodyタグの閉じタグの直前に入れて読み込みます。

<script src="assets/js/lazyload.min.js"></script>

CDNを利用する場合は以下のタグを入れて読み込みます。

<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.min.js"></script>

ファイル読み込ませたらLazyload関数を呼び出す

ファイルを読み込ませたらLazyloadを実行させる関数を使い呼び出します。

ここまでができましたら次は遅延させる画像にクラス名を記述していきます。

<script>
    $("img.lazyload").lazyload();
</script>

imgタグにクラスを追加し、data-srcを記述します

読み込み遅延を行いたいimgタグに以下のように記述を行います。

<img class="lazyload" data-src="assets/images/image.jpg" width="100" height="100" alt="image">

imgタグに「lazyload」というクラス属性を入れ、src属性を「data-src」属性に変更します。

以上がLazyloadの設定になります。
ここまでが完了しましたら後は実際に表示速度を確認し、速度が上がっていたら無事設置完了となります。

Page Speed Insightsで確認ができます

Googleの表示速度チェックツール「Page Speed Insights」でWEBサイトの表示速度が確認できます。
このツールでは表示速度の他に、どの部分にどれくらい時間がかかっているかなどの分析もできますので、是非一度使ってみましょう。

URL：Page Speed Insights

LazyLoadのオプション

LazyLoadにはオプションが用意されていて、読み込ませるタイミングなども調整が可能です。

以下のパラメーターを使って読み込みを調整していきます。

	threshold	表示画面に入る200px手前で読み込まれます
	event	デフォルトはscrollとなっていて他にclickで画像表示が可能
	effect	fadeinで画像がフェードインして読み込まれます
	effect_speed	エフェクトのタイミングを数値で調整できます

loading属性で遅延表示も可能

これまではjsファイルを読み込ませて画像の遅延表示を行っていましたが、loading属性を使用する事で画像遅延を行う事も可能です。

ただし、現状は一部のブラウザのみのサポートとなっているので、使用には十分に注意して使いましょう。

<img loading="lazy" src="assetsimages/image.jpg" width="100" height="100" alt="image">

まとめ

画像の遅延読み込みのできるプラグインLazyLoadについて、使い方などをご紹介いたしましたが、いかがだったでしょうか？
ユーザーにとって使いやすいWEBサイトである事はSEOの観点からも良い事ですので、ご興味のある方は是非一度試してみましょう。