WordPressカスタマイズまとめ←クリック

BJ Lazy Loadの設定と使い方【画像遅延】

BJ Lazy Load設定

BJ Lazy Loadとは?

画像の読み込みを現在写っている範囲内(スクロールせずに見えている範囲)だけにして、無駄な読み込みを抑え表示速度をあげられるプラグインです。

Lazy Loadの仕組み①

Lazy Loadの仕組み②

画像を多用するサイトには必須機能で、「プラグインなしで実装する方法」「他のプラグイン」もありますが、このプラグインの設定が一番簡単だったのでオススメします。

この「画像の遅延読み込み機能」は、読者側は見たい範囲だけ見れるので、無駄な読み込みが減るぶん表示速度が上がります。

そして、運営者側もページを開くたびに全画像をサーバーに読み込ませることがなくなるので、データ容量が大幅に減ります。

「読者」にも「運営者」にも嬉しい一石二鳥のプラグインなんですね。

1・BJ Lazy Loadをインストール

Bj-Lazy-Loadインストール方法

管理画面

【プラグイン】

新規追加

BJ Lazy Loadで検索

インストール

有効化

2・BJ Lazy Load Options設定

有効化」すると、「管理画面」の「設定」に「BJ Lazy Load」が追加されているのでクリックしてください。

設定方法を1つずつ解説していますが、基本は画像通りに設定していただければ問題ありません。

Bj-Lazy-Loadの設定画面

2-1・Apply to content

コンテンツの画像に適用。

ここを「Yes」することで、このプラグインが作動します。

2-2・Apply to text widgets

テキストウィジェットに適用(サイドバーにある新着記事や人気記事の画像など)

Yesにチェックします。

2-3・Apply to post thumbnails

サムネイルに適用(トップページの記事一覧画像など)

Yesにチェックします。

補足

ただし、チェックをすると画像の読み込みが後回しになるため「PageSpeed Insights」などでトップページを分析させると表示が遅いと判断され、6〜8点くらい点数が下がることがあります。(体感ではそんなに変わりません。)

気になるようなら、ここだけ「NO」にしてください。

2-4・Apply to gravatars

主にコメント欄などで使用するアバター画像に適用。

Yesにチェックします。

2-5・Lazy load images

記事内の画像に適用。(一番重要)

「Yes」を選択。

2-6・Lazy load iframes

主にFacebookページやTwitterのタイムライン、YouTube動画の埋め込み、アフィリエイトなどで使用されているバナー画像に適用。

Yesにチェック。

2-7・Placeholder Image URL

画像が表示されるまでの間に、仮の画像を表示しておきたい場合はその画像のURLを入力します。

なくても違和感なく表示されるので、空白で大丈夫です。

2-8・Skip images with classes

読み込みを遅らせたくない画像があれば、そのURLを入力します。

例えば、トップページに表示される範囲の画像URLだけ入力したりもできます。

当サイトでは気にならないので特に設定していません。

2-9・Threshold

スクロールがどこまで来たら画像を表示させるかをピクセルで指定します。

(200〜400)あたりが違和感のない設定です。(当サイトは300で指定しています。)

2-10・Use low-res preview image

画像を表示させるまでの間に、仮で表示したい画像があれば設定します。

当サイトは、NOにチェック。

上記で(200〜400)を設定しておけば、画像がなくても違和感なく表示されます。

変更を保存」して終了です。

3・Google botに画像を認識させる方法

設定も楽で、超便利なプラグインですが1つだけ欠点があります。

それは、検索エンジン=Google botが画像を認識しないことがあることです。

当サイトでは今の所問題ないですが(今は平気なのかな?)、もしbotが認識してくれないようなら(確認方法はこちらへ)以下で紹介する方法を試してください。

もちろんそれにより、SEO的にマイナスになることはありませんが、画像検索結果に影響します。

例えば、料理やファッションなど画像からも検索流入があるサイトの場合、画像検索結果に表示されないのは困りますよね。

なので、その場合はこのプラグインに下記で紹介するコードを追加してください。

メモ

基本的に管理画面からプラグインの編集をすることは非推奨ですが、1行足すだけなので大丈夫なはずです。

心配な方は、FTPソフトから編集してください。

【管理画面】

【プラグイン】

【プラグイン編集】

【編集するプラグインを選択でBj-Lazy-Loadを選択】

【incフォルダをクリック】

【class-bjll.phpをクリック】

【検索機能でif ( is_feed()を検索(46行目)】

Bj-Lazy-Loadプラグイン編集

if ( is_feed() )

の部分を

if ( is_feed() || stripos($_SERVER['HTTP_USER_AGENT'], 'Googlebot'))

となるようにコードを追記してください。

これでGoogle botにも認識されます。

4・Google bot認識の確認方法

Google botが認識してるのかを「Google Search Console」で確認できます。

search-consoleでレンダリングの確認方法

「Google Search Consoleにログイン」

「自分のサイトをクリック」

「クロールをクリック」

「Fetch as Googleをクリック」

「確認したいページのパーマリンクを入力」

「PCかモバイルどちらかを選択」

「取得してレンダリングを選択」

「パスがクリックできるまで待つ」

「パスをクリックする」

Google botのレンダリングで画像が表示されていればOK。

search-consoleでレンダリングの確認方法2

5・Lazy-Loading設定

これは、投稿編集画面の「表示オプション」内にある機能です。

この設定をしたページは、「画像の遅延読み込み機能」を無効化できます。

Bj-Lazy-Load-lazy-loadingを表示

チェックを入れる(デフォルトで入ってる)と投稿一覧のサイドバーに「Lazy Loading」が表示されます。

Bj-Lazy-Load-lazy-loadingの設定

ここにチェックを入れると、「画像の遅延読み込み機能」が効かなくなります。

画像遅延を付けると、読み込みは早くなりユーザーには効果的です。

ただ、Googlebotは遅延させた画像を読み込めていないと言われています。

なので、画像が少ない記事はここにチェックを入れておくと記事内の画像全て読み込んでくれます。(当サイトでは遅延機能によりSEOにマイナスに働いたデータは取れていません。)

まとめ

サイトが大きくなればなるほど、表示速度は課題の1つになります。

今のうちから、こういったプラグインを使いこなしておくと、あとあと便利ですね。

他のプラグインもこれくらいシンプルだと分かりやすいんですけどね〜。

画像関連の記事はこちら

一歩先にいくWordPressのカスタマイズがわかる本

ご質問・ご感想・受付中

「メールアドレス入力欄」を削除した為「返信通知」は届きません。
確実に返信が必要な場合は「お問い合わせ」または「TwitterのDM」よりご連絡ください。

他の方にも有益になると判断した質問やコメントは記事に引用させて頂く場合がありますのであらかじめご了承下さい。