【WordPress】画像データを遅延読込するプラグイン「Lazy Load」

lazyloadr_header

この記事は約 2 分で読めます。


1.「Lazy Load」とは

ページに含まれる画像のデータの読み込みを後から読み込ませることにより、ロード時間を短縮することができるプラグイン。
ブラウザの表示領域/画面外の画像はユーザーがスクロールするまで読み込まれないので、特に画像が多いページに有効です。
ページの表示速度の向上に繋がるので、導入をお勧めします。

「Lazy Load」はWordpressのプラグインとプラグインではない「lazy load plugin for jquery」があるので注意。
Wordpressを利用していない場合は後者を使用すると良いでしょう。

今回はWordpressのプラグインのインストール方法をご紹介していきます。

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

1.プラグイン>新規追加の画面へ移動します。
2.キーワードに「Lazy Load」と入力し、検索します。
3.「Lazy Load」が表示されるので、「今すぐインストール」をクリックし、インストールします。

lazyload_02 4.プラグインの設定画面で「プラグインを有効化」をクリックします。

これでインストール完了です。
このままで大丈夫なのですが、「早くスクロールすると画像がチラつく」って方の為に、読み込みのタイミングの設定方法ご説明していきます。

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

lazyload_03「プラグイン」をクリックすると、インストール済みのプラグインの一覧が表示されます。
「LazyLoad」の編集をクリックします。

プラグインの編集画面から右側にある「Lazy-load/js/lazy-load.js」選択します。

lazyload_05デフォルトで【distance: 200】と書かれているところを【distance: 400】に変更します。

【distance: 200】とは「画面下部の200pxを読み込み対象としますよ」と言う設定になっています。
なので早くスクロールすると読み込みのタイミングが合わずチラついてしまうのです。
【distance: 400】にすることで、早めに画像を読み込むので画像のチラつきも解消されます。

LP(ランディングページ)制作の教科書4ステップガイド

本書を読むとできるようになること
・LPの基礎知識と制作手順が分かります。
・ユーザーが求めるLPデザインの制作方法が分かります。
・LPのコンバージョン率UPさせるコツが分かります。

主な内容
1.LP(ランディングページ)とは?
・1-1.Web サイトとLP の目的の違い
・1-2.制作の流れ
2.戦略設計
・2-1.ターゲットユーザー像(ペルソナ)の設定
・2-2.競合調査
3.情報設計
・3-1.シナリオを考える
・3-2.レイアウトを考える
4.デザイン
・4-1デザインに入る前の3 ステップ
・4-2.デザインの5つのコツ
・4-3.訴求力の高いファーストビューの制作方法
・4-4.効果的なコンバージョンエリアの制作方法

ダウンロード

最新の記事情報が取得できます。