画像が多くなると、読み込み速度が遅くなりますが、今回紹介する「BJ Lazy Load」は、画面のスクロールに合わせて画像を読み込んでくれるプラグインです。ユーザーに見える部分以外の画像読み込みを遅延させることで、画像の表示速度をあげる機能になっています。それではプラグインの解説をしていきます。

「BJ Lazy Load」のインストール

管理画面から「BJ Lazy Load」を検索してインストールして下さい。

BJ03

もしくは、下記のサイトからプラグインをダウンロードし、wp-content/pluginsディレクトリにインストールしてください。
BJ04
BJ Lazy Load

「BJ Lazy Load」の設定

プラグインをインストールし、有効化したら、設定の項目に「BJ Lazy Load」が追加されていますので、確認して詳細設定を行って下さい。

BJ06
以下の画面が設定画面になります。
BJ05

Apply to content
コンテンツに遅延ロードさせるかの設定です。「Yes」にしないとこのプラグインが作動しません。

Apply to post thumbnails
サムネイル画像に遅延ロードさせるかを設定です。

Apply to gravatars
Gravatar(ブログへの投稿やコメントの際に名前の横に表示される画像)を使ったコメント欄の画像を遅延ロードさせるかの設定です。

Lazy load images
画像ファイルを遅延ロードさせるかを設定です。必ず「Yes」にしてください。

Lazy load iframes
ソーシャルメディアやアフィリエイトなどのiframeで表示させているコンテンツを遅延ロードさせるかの設定です。

Theme loader function
LazyLoadを起動するコードを記述する場所の指定です。通常はデフォルト設定の「wp_footer」で起動しますが、機能しない場合は「wp_head」に変更してみてください。

Placeholder Image URL
遅延ロードで画像を読み込むまでの間に表示される画像を指定します。基本的には何も入力しなくて良いです。その場合は空白ですが、すぐに画像が読み込まれますので問題ありません。表示させる場合は画像のURLを記入します。

Skip images with classes
遅延ロードさせたくない画像のクラス名を指定します。

Threshold
読み込みを開始する数値を画像までの距離(ピクセル)で指定します。スクロールに遅れなく表示させたい場合は 400 ぐらいにしておくと、遅延なく画像が表示されます。

これが設定画面になります。各項目は英語になっておりますが、説明を読み設定下さい。基本的には設定を変えず、そのままの状態でも使用できるかと思います。

TCDテーマでの効果の検証

「BJ Lazy Load」の設定ができましたら、効果の検証を行ってみます。今回は、ファーストビューで写真だけが表示されるWordPressテーマ「photek (tcd024)」でテストした結果となります。速度の測定にはGTmetrixというアプリケーションを利用しました。

プラグイン設定前

こちらがプラグイン設定前の値になります。Page load time(ページ読み込み時間)が16.9sという値になりました。
BJ01

プラグイン設定後

プラグイン設定後の値になります。Page load time(ページ読み込み時間)が14.1sとなりました。
BJ02

上図のように、Page load time(ページ読み込み時間):16.9s → 14.1sとなり、2.8秒の速度アップが数字上でました。今回のように、画像の多いサイトなどには効果的なプラグインになると思います。数字以上に、体感スピードが早くなっているように感じます。

まとめ

「BJ Lazy Load」のプラグインを用いることで、ページの読み込みスピードがあがり、ユーザビリティが向上します。その結果、ページの離脱率が下がる事でSEO効果もあがると言われています。しかしながらプラグインを多様しすぎると、それだけで表示速度が落ちる事もありますので、ご注意して使用ください。