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

BJ Lazy Loadの使い方と設定【画像遅延プラグイン】

BJ Lazy Load設定

BJ Lazy Loadとは?

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

Lazy Loadの仕組み①

Lazy Loadの仕組み②

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

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

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

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

BJ Lazy Loadの使い方①【インストール方法】

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

管理画面

【プラグイン】

新規追加

BJ Lazy Loadで検索

インストール

有効化

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)を設定しておけば、画像がなくても違和感なく表示されます。

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

BJ Lazy Loadの使い方③【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にも認識されます。

BJ Lazy Loadの使い方④【Google bot認識の確認方法】

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

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

「Google Search Consoleにログイン」

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

「クロールをクリック」

「Fetch as Googleをクリック」

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

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

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

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

「パスをクリックする」

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

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

BJ Lazy Loadの使い方⑤【Lazy-Loading設定】

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

画像関連の記事はこちら

一歩先にいくWordPressのカスタマイズがわかる本
★Amazonは現金チャージがお得★

チャージ額に応じてポイントが貯まります。

プライム会員」なら最大2.5%ポイント還元!!貯まったポイントは次回のお買い物から使えます。さらに、今なら初回購入1000ポイントキャンペーン中!!

※キャンペーン条件がやや複雑なので不安な方は下記の手順を確認してください

STEP1

キャンペーンページへ

Amazonギフトポイント付与キャンペーン

STEP2

エントリー完了後、「Amazonギフト券チャージタイプ」をクリック

Amazonギフトポイント付与キャンペーンエントリー

STEP3

キャンペーン条件の5000円以上を選択または自由金額を5000円以上に入力次へをクリック

Amazonギフトチャージタイプ購入

STEP4

Amazonギフトチャージタイプ支払い方法選択PC

「コンビニ・ATM・ネットバンキング払い・電子マネー払い」を選択次に進むをクリック


STEP5

注意×10

特に何もせず注文を確定するをクリック

Amazonギフトチャージタイプ購入PC

以下キャンペーン条件から外れてしまうトラップについて。

  • 支払い方法の「電子マネー」はNG
  • Amazonギフト券・Amazonショッピングカード・クーポンも使用できるようになっていますがNG
  • 2000円以上で200ポイントも初回特典ですが、チャージは対象外なのでこちらを選択すると本来1000ポイントもらえるのに200ポイントになってしまうのでNG

私はAmazonヘビーユーザーですが、このキャンペーンに関してはユーザーを欺くようなUX(導線)でよろしくないなと思いました。


STEP6

Amazonギフトチャージタイプ購入確認メール

Amazonに登録してるメールアドレスに「お支払い番号のお知らせ」メールが届きます。お支払い方法別の手順」のリンクをクリックしてください。


STEP7

Amazonギフトチャージタイプ支払い確定PC

もう一度言っておきますが、ここで「電子マネーでの支払い」を選択しないように注意してください。

それ以外の支払い方法をクリックすると詳細が載っているので、期限である6日以内に支払いを済ませて完了です。

以上がキャンペーンの手順です。注意点に気をつけながらぜひこの機会に1000ポイントGETしてください。

プライム会員」なら最大2.5%ポイント還元!!

※チャージした金額の有効期限は安心の10年間

ご質問・ご感想・受付中

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

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