画像の読み込みを後回しにするWordPressプラグイン「BJ Lazy Load」!

2015/01/04

こんにちは。
今回は画像の読み込みを後回しにするWordPressプラグイン「BJ Lazy Load」!です。

普通は画像を読みこんだ後にページが表示されるのですが、「BJ Lazy Load」を導入すると、画像の読み込みを後回しにする事でページが表示される速度を早くする事ができます。このサイトでも1秒くらい早くなりました。
「Lazy Load」というプラグインも入れて見たのですが、なぜかスクロールして戻った時に画像が表示されなくなる、設定する箇所もないので、使い勝手がこちらの方がよかったので、こちらを使わせて頂いています。

画像の読み込みを後回しにするWordPressプラグイン「BJ Lazy Load」!

BJ Lazy Load

bj-lazy-load

https://wordpress.org/plugins/bj-lazy-load/

 

ダウンロードしてみよう!

WordPressの管理画面から[プラグイン]→[新規追加]をクリックします。
「BJ Lazy Load」と検索し、「BJ Lazy Load」の
[いますぐインストール]をクリックしてインストールします。
[プラグイン]→[インストール済みプラグイン]をクリックし、「BJ Lazy Load」を有効化します。

 

設定

[設定]→[BJ Lazy Load]をクリックすると設定画面が表示されます。
下記の画像はこのサイトでの設定例になります。

bj-lazy-load2

順番に各項目を見ていきたいと思います。

Apply to content

読み込みを後回しにさせるかどうかを設定します。

Apply to post thumbnails

サムネイル画像の読み込みを後回しにさせるかどうかを設定します。

Apply to gravatars

Gravatarでのコメントの横の画像の読み込みを後回しにさせるかどうかを設定します。

Lazy load images

画像ファイルの読み込みを後回しにさせるかどうかを設定します。

Lazy load iframes

iframeの読み込みを後回しにさせるかどうかを設定します。

Theme loader function

LazyLoadを起動するコードの記述する場所を指定します。

Placeholder Image URL

読み込みを後回しにした画像を読み込むまでの間に表示される画像を指定します。
なしの場合は空白にします。

Skip images with classes

読み込みを後回しにしたくない画像のクラス名を指定します。

Threshold

読み込みを開始する数値を設定します。

Infinite scroll

無限スクロールにも対応させるかどうかをを設定します。

Load hiDPI (retina) images

MacのRetinaディスプレイに対応させるかどうかを設定します。

Load responsive images

レスポンシブ向けの画像に対応させるかどうかを設定します。

 

最後に「変更を保存」のボタンをクリックして設定を保存します。

 

WordPress 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座)
WordPress 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座)

 

いかがでしたか。表示速度を早くしたい場合は是非、導入したいプラグインですね。
以上で画像の読み込みを後回しにするWordPressプラグイン「BJ Lazy Load」!でした。

topへ戻る