どうも。葉です。

 

今日は、画像読み込みを遅延させるプラグインLazy Loadについて

紹介していきますよ!

 

画像遅延って?Lazy Loadを入れるとこうなります

画像遅延表示がよくわからに人もいると思うので、

まずは、実際に体験してもらいます。

 

この記事を下にスクロールしていくと

画像がその場その場で

表示されていくはずです。

 

これが画像遅延表示です。

ではどうぞ!

Lazy Load

 

 

Lazy Load

 

 

Lazy Load

 

 

どうでしたか???

画像は次々と表示されましたよね???

 

で、これに何の意味があるのかと言うと、

ページの読み込み速度が早くなるんです。

画像は、文字に比べて容量が大きいですからね。

表示されるまでに時間がかかるんです。

 

でも画像をその場その場で表示させることで

待ち時間を短くしてあげるんです。

 

こうすることで、

訪問者さんは、

さくさくと記事を見れるので

記事が読まれる可能性が上がるってわけです。

 

プラグインLazy Loadを導入しよう!

ということで、ここからは、

実際にプラグインLazy Loadをインストールしていきます。

 

WordPress管理画面の左メニューより、

【プラグイン>新規追加】をクリックします。

Lazy Load

 

プラグインの検索に【Lazy Load】と入力し

エンターボタンを押します。

Lazy Load

 

Lazy Loadの【今すぐインストール】をクリックします。

Lazy Load

 

【プラグインを有効化】をクリックします。

Lazy Load

 

以上で、プラグインLazy Loadのインストールは完了です。

 

 

Lazy Loadの設定

では、ここからは、Lazy Loadの設定を

行っていきましょう!

 

設定するのは、次の画像を読み込むまでの

ピクセル数を伸ばすことです。

 

デフォルトだと、画像の200ピクセル前に来た時点で、

画像の読み込みをはじめます。

 

 

ただ、これだと直前すぎるので、

400ピクセル前から画像を読み込むように設定変更です。

 

では、実際に設定を行っていきます。

WordPress管理画面の左メニューより

【プラグイン>インストール済みプラグイン】をクリックします。

Lazy Load

 

Lazy Loadの【編集】をクリックします。

Lazy Load

 

右側にある【lazy-load/js/lazy-load.js】をクリックします。

Lazy Load

 

コード上部に表示されている

distanceの横の【200⇒400】に変更し

【ファイル更新】をクリックします。

Lazy Load

 

以上で、設定完了です!

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします