【WordPress】画像データを遅延読込するプラグイン「Lazy Load」｜株式会社シーズ・クリエイト｜WEB制作・マーケティング

1.「Lazy Load」とは

ページに含まれる画像のデータの読み込みを後から読み込ませることにより、ロード時間を短縮することができるプラグイン。
ブラウザの表示領域/画面外の画像はユーザーがスクロールするまで読み込まれないので、特に画像が多いページに有効です。
ページの表示速度の向上に繋がるので、導入をお勧めします。
「Lazy Load」はWordpressのプラグインとプラグインではない「lazy load plugin for jquery」があるので注意。
Wordpressを利用していない場合は後者を使用すると良いでしょう。
今回はWordPressのプラグインのインストール方法をご紹介していきます。

2.「Lazy Load」のインストール方法

1.プラグイン＞新規追加の画面へ移動します。
2.キーワードに「Lazy Load」と入力し、検索します。
3.「Lazy Load」が表示されるので、「今すぐインストール」をクリックし、インストールします。
4.プラグインの設定画面で「プラグインを有効化」をクリックします。
これでインストール完了です。
このままで大丈夫なのですが、「早くスクロールすると画像がチラつく」って方の為に、読み込みのタイミングの設定方法ご説明していきます。

3.読み込みのタイミングの設定方法

「プラグイン」をクリックすると、インストール済みのプラグインの一覧が表示されます。
「LazyLoad」の編集をクリックします。
プラグインの編集画面から右側にある「Lazy-load/js/lazy-load.js」選択します。
デフォルトで【distance: 200】と書かれているところを【distance: 400】に変更します。
【distance: 200】とは「画面下部の200pxを読み込み対象としますよ」と言う設定になっています。
なので早くスクロールすると読み込みのタイミングが合わずチラついてしまうのです。
【distance: 400】にすることで、早めに画像を読み込むので画像のチラつきも解消されます。