画像の読み込みを現在写っている範囲内(スクロールせずに見えている範囲)だけにして、無駄な読み込みを抑え表示速度をあげられるプラグインです。
↓
画像を多用するサイトには必須機能で、「プラグインなしで実装する方法」や「他のプラグイン」もありますが、このプラグインの設定が一番簡単だったのでオススメします。
この「画像の遅延読み込み機能」は、読者側は見たい範囲だけ見れるので、無駄な読み込みが減るぶん表示速度が上がります。
そして、運営者側もページを開くたびに全画像をサーバーに読み込ませることがなくなるので、データ容量が大幅に減ります。
「読者」にも「運営者」にも嬉しい一石二鳥のプラグインなんですね。
目次・読みたい所へタップできます
BJ Lazy Loadの使い方①【インストール方法】
【管理画面】
↓
【プラグイン】
↓
【新規追加】
↓
【BJ Lazy Loadで検索】
↓
【インストール】
↓
【有効化】
BJ Lazy Loadの使い方②【Options設定】
「有効化」すると、「管理画面」の「設定」に「BJ Lazy Load」が追加されているのでクリックしてください。
設定方法を１つずつ解説していますが、基本は画像通りに設定していただければ問題ありません。
Apply to content
コンテンツの画像に適用。
ここを「Yes」することで、このプラグインが作動します。
Apply to text widgets
テキストウィジェットに適用(サイドバーにある新着記事や人気記事の画像など)
Yesにチェックします。
Apply to post thumbnails
サムネイルに適用(トップページの記事一覧画像など)
Yesにチェックします。
ただし、チェックをすると画像の読み込みが後回しになるため「PageSpeed Insights」などでトップページを分析させると表示が遅いと判断され、６〜８点くらい点数が下がることがあります。(体感ではそんなに変わりません。)
気になるようなら、ここだけ「NO」にしてください。
Apply to gravatars
主にコメント欄などで使用するアバター画像に適用。
Yesにチェックします。
Lazy load images
記事内の画像に適用。(一番重要)
「Yes」を選択。
Lazy load iframes
主にFacebookページやTwitterのタイムライン、YouTube動画の埋め込み、アフィリエイトなどで使用されているバナー画像に適用。
Yesにチェック。
Placeholder Image URL
画像が表示されるまでの間に、仮の画像を表示しておきたい場合はその画像のURLを入力します。
なくても違和感なく表示されるので、空白で大丈夫です。
Skip images with classes
読み込みを遅らせたくない画像があれば、そのURLを入力します。
例えば、トップページに表示される範囲の画像URLだけ入力したりもできます。
当サイトでは気にならないので特に設定していません。
Threshold
スクロールがどこまで来たら画像を表示させるかをピクセルで指定します。
(２００〜４００)あたりが違和感のない設定です。(当サイトは３００で指定しています。)
Use low-res preview image
画像を表示させるまでの間に、仮で表示したい画像があれば設定します。
当サイトは、NOにチェック。
上記で(２００〜４００)を設定しておけば、画像がなくても違和感なく表示されます。
「変更を保存」して終了です。
BJ Lazy Loadの使い方③【Google botに画像を認識させる設定】
設定も楽で、超便利なプラグインですが１つだけ欠点があります。
それは、検索エンジン＝Google botが画像を認識しないことがあることです。
当サイトでは今の所問題ないですが(今は平気なのかな？)、もしbotが認識してくれないようなら(確認方法はこちらへ)以下で紹介する方法を試してください。
もちろんそれにより、SEO的にマイナスになることはありませんが、画像検索結果に影響します。
例えば、料理やファッションなど画像からも検索流入があるサイトの場合、画像検索結果に表示されないのは困りますよね。
なので、その場合はこのプラグインに下記で紹介するコードを追加してください。
基本的に管理画面からプラグインの編集をすることは非推奨ですが、１行足すだけなので大丈夫なはずです。
心配な方は、FTPソフトから編集してください。
【管理画面】
↓
【プラグイン】
↓
【プラグイン編集】
↓
【編集するプラグインを選択でBj-Lazy-Loadを選択】
↓
【incフォルダをクリック】
↓
【class-bjll.phpをクリック】
↓
【検索機能でif ( is_feed()を検索(４６行目)】
↓
if ( is_feed() )
の部分を
if ( is_feed() || stripos($_SERVER['HTTP_USER_AGENT'], 'Googlebot'))
となるようにコードを追記してください。
これでGoogle botにも認識されます。
BJ Lazy Loadの使い方④【Google bot認識の確認方法】
Google botが認識してるのかを「Google Search Console」で確認できます。
「Google Search Consoleにログイン」
↓
「自分のサイトをクリック」
↓
「クロールをクリック」
↓
「Fetch as Googleをクリック」
↓
「確認したいページのパーマリンクを入力」
↓
「PCかモバイルどちらかを選択」
↓
「取得してレンダリングを選択」
↓
「パスがクリックできるまで待つ」
↓
「パスをクリックする」
Google botのレンダリングで画像が表示されていればOK。
BJ Lazy Loadの使い方⑤【Lazy-Loading設定】
これは、投稿編集画面の「表示オプション」内にある機能です。
この設定をしたページは「画像の遅延読み込み機能」を無効化できます。
チェックを入れる(デフォルトで入ってる)と投稿一覧のサイドバーに「Lazy Loading」が表示されます。
ここにチェックを入れると、「画像の遅延読み込み機能」が効かなくなります。
画像遅延を付けると、読み込みは早くなりユーザーには効果的です。
ただ、Googlebotは遅延させた画像を読み込めていないと言われています。
なので、画像が少ない記事はここにチェックを入れておくと記事内の画像全て読み込んでくれます。(当サイトでは遅延機能によりSEOにマイナスに働いたデータは取れていません。)
BJ Lazy Loadの使い方【まとめ】
サイトが大きくなればなるほど、表示速度は課題の１つになります。
今のうちから、こういったプラグインを使いこなしておくと、あとあと便利ですね。
WordPressのおすすめプラグイン・新旧19個を紹介
※日本語が含まれていないコメントは投稿できません。（スパム対策）