2019年7月現在、当記事は3年前の情報ですので、下記記事も参考にしていただけると幸いです。
ウェブサイトを閲覧していて、サイトの表示速度が遅いと煩わしいですよね。むろん、表示速度が遅いとユーザーは早い段階で離脱します。SEO的にも良くないです。...
画像が多くなると、読み込み速度が遅くなりますが、今回紹介する「BJ Lazy Load」は、画面のスクロールに合わせて画像を読み込んでくれるプラグインです。ユーザーに見える部分以外の画像読み込みを遅延させることで、画像の表示速度をあげる機能になっています。それではプラグインの解説をしていきます。
「BJ Lazy Load」のインストール
管理画面から「BJ Lazy Load」を検索してインストールして下さい。
もしくは、下記のサイトからプラグインをダウンロードし、wp-content/pluginsディレクトリにインストールしてください。
「BJ Lazy Load」の設定
プラグインをインストールし、有効化したら、設定の項目に「BJ Lazy Load」が追加されていますので、確認して詳細設定を行って下さい。
以下の画面が設定画面になります。
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という値になりました。
プラグイン設定後
プラグイン設定後の値になります。Page load time(ページ読み込み時間)が14.1sとなりました。
上図のように、Page load time(ページ読み込み時間)：16.9s → 14.1sとなり、2.8秒の速度アップが数字上でました。今回のように、画像の多いサイトなどには効果的なプラグインになると思います。数字以上に、体感スピードが早くなっているように感じます。
まとめ
「BJ Lazy Load」のプラグインを用いることで、ページの読み込みスピードがあがり、ユーザビリティが向上します。その結果、ページの離脱率が下がる事でSEO効果もあがると言われています。しかしながらプラグインを多用しすぎると、それだけで表示速度が落ちる事もありますので、ご注意して使用ください。
