vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです

[WordPress] 画像をあとから読み込んで表示速度アップ!「Lazy Load」プラグイン

      2017/01/31

LINEで送る
Pocket

wp-lazy-load
こんにちは、okutani(@okutani_t)です。皆さんはブログ記事を書くときに、画像を記事に使っていますか?画像を多めにして記事を書けば、見やすくて分かりやすい記事になります。

ここで気をつけなればいけないことは、「画像をたくさん使うとサイトの読み込み時間が遅くなる」ということです。

WordPressではページにアクセスした時点で、記事内の画像が一気に読み込まれてしまうので、ページの表示速度が落ちてしまいます。

そこで、画像の読み込みのタイミングを「スクロールされたときに読み込む」設定にできる「Lazy Load」プラグインを導入して、ページ表示速度を向上させましょう。

スポンサーリンク

Lazy Loadの導入

ダッシュボードから「プラグイン」→「新規追加」を選択します。

wp-plugin-install

右上の検索バーに「Lazy Load」と入力して検索、「いますぐインストール」をクリックします。

wp-lazy-load

インストールが完了したら「プラグインを有効化」をクリック。

wp-lazy-load2

これでLazy Loadの導入が完了しました。

導入しただけですぐ利用できるのですが、読み込みタイミングの設定だけ行っていきます。

lazy-load.jsに設定を記述

画像読み込みのタイミングは、デフォルトで「画像の200px上にスクロールが来たら読み込む」と設定されています。そのため、速くスクロールすると画像がチラついてしまうので、その調整をおこないましょう。

設定をおこなうファイルは

/wordpress/wp-content/plugins/lazy-load/js/lazy-load.js

にあります。

下記の行のdistanceの隣が200になっていると思いますので、これを400に変更しましょう。

$( 'img[data-lazy-src]' ).bind( 'scrollin', { distance: 400 }, function() {

以上で設定は終了です。速くスクロールしても画像のチラつきがなくなったかと思います。

これでたくさんの画像を使って記事を書いても安心ですね。

LINEで送る
Pocket

okutani (okutani_t) のヒトコト
Lazy Loadは設定することもほとんどなく、ページの表示速度をあげることができて便利です。まだ導入していない方は是非この機会にどうぞ。

 - WordPressプラグイン

スポンサーリンク

PC用AdSense

PC用AdSense

  こちらもどうぞ

vdeepのトップページへ戻る画像です。風船の形をした島を女の子が掴んでいます。