あつ森動画随時UPしてます!
ブログ運営初心者

「JIN」使用者向け!プラグインBJ Lazy Loadのおすすめの設定方法

記事説明用画像
まなぶくん
まなぶくん
WordPressプラグインのBJ Lazy Loadってどんなプラグインなの?あと設定方法とかも知りたいんだけど。

なんてあなたにおすすめの記事です!

 

えもまる
えもまる

ご覧いただきありがとうございます!!「JIN」を崇拝してやまないえもまるです。

今回はJIN」を使用している方のためのBJ Lazy Loadの設定方法を紹介していきます。

この記事の内容

プラグインBJ Lazy Loadの主な役割を図を多用して解説

JIN使用者向けのBJ Lazy Loadの設定方法を紹介

この記事を読むべき人

プラグインBJ Lazy Loadの役割や設定方法を知りたい人

JINでスマホの「文字被り現象」を経験したことがある人

 

結論から言うと、BJ Lazy Loadはサイト表示速度を改善してくれる優秀なプラグインです。

そして、設定はほんの5分ほどの簡単なものなのでぜひ試してみてくださいね~

それではどうぞ!!

そもそもBJ Lazy Loadとは

えもまる
えもまる

BJ Lazy Loadを簡単に説明すると、

ページの画像表示遅延を行ってサイト表示速度を高速化してくれる便利プラグインだよ!!

まなぶくん
まなぶくん

画像表示遅延」ってなんぞ?

えもまる
えもまる

画像表示遅延については下の画像を使って説明していくよ!!

例えば下のように画像がたくさん貼ってある記事があったとします。

プラグイン説明用画像5
まなぶくん
まなぶくん

100選って画像そんなに貼ったらめちゃめちゃページの読み込み速度が遅くなりそうだね

えもまる
えもまる

プラグインとか何も使わずにページを開くたびに100枚全て画像を表示する設定なら、めちゃめちゃ遅くなると思うよ。

でも上の画像みたいにBJ Lazy Loadを使用すると、ユーザーに見えているページの画像だけを表示して、ユーザーに見えていない部分に貼っている画像はあえて表示させないようにできるんだ。

まなぶくん
まなぶくん

特定の位置までスクロールしないと画像が表示されないような設定にできるってことか!

えもまる
えもまる

さすがまなぶくん。まなびが速いね!

まさに「画像が表示されるのを遅延させる」ことができるわけなんだ!

あえて遅延させることで、サイトの表示速度の向上が見込めるってことだね!!

まなぶくん
まなぶくん

オッケーわかったよ♪

BJ Lazy Loadはサイトに貼られている画像などのデータをすべて表示させるのではなく、ユーザーに見えていない位置のデータはあえて表示させない

これによりサイトの表示速度が速くなる!!

「JIN」使用者向けBJ Lazy Loadの簡単な設定方法

念のためBJ Lazy Loadのインストールから順に説明していきますね♪

Pluginインストール説明画像1

①WordPrss管理画面の左側の「プラグイン」をクリック

Pluginインストール説明画像2

②プラグイン画面上部の「新規追加」をクリック

プラグイン説明用画像7

③検索欄に「BJ Lazy Load」と入力

プラグイン説明用画像8

④表示されるBJ Lazy Loadで「今すぐインストール」をクリックして、しばらくすると表示される「有効化」をクリック

プラグイン説明用画像9

⑤⑥WordPress管理画面の設定にカーソルを合わせ右側に表示される「BJ Lazy Load」をクリック

プラグイン説明用画像10

上記画面の6つの項目はデフォルトではすべて「Yes」になっているかと思います

⑦基本的にはすべてYesのままでOKです。ですが、JINを使用している方でしばらく使用していて「文字被り」現象が起きた場合は上から3番目の「Apply to post thumbnails」のみ「No」を推奨します。理由は下でお話します。

念のため項目ごとの説明をしておきます

Apply to content

記事などのコンテンツに貼られている画像に適用するかどうかなのでYes!

Apply to text widgets

ウィジットの部分(主にサイトのサイド部分)に表示されるプロフィールやおすすめ記事などの画像に適用するかどうかなのでYes!

Apply to post thumbnails

記事のアイキャッチ画像に適用するかどうかという設定ですがこちらはJINの方は様子を見ながらYes/Noを切替えてみてください!!

僕はBJ Lazy Loadを初期導入時この項目もYesにしていました。ですがここをYesにしているとスマホでサイトを見た時にスクロールしていくと文字被り現象が確認されました。

Apply to post thumbnailsをNoにして以降この「文字被り」は起きていません。

文字被り」が起きた記事は非常に読みづらくユーザー離れにつながる可能性も高いです。なのでJINを使用している方はまずはYes設定にしておいて定期的にスマホで自分のサイトを確認してみてください!!!

確認時に文字被りが頻発しているようであればこの部分の設定をNoにしてみてくださいね!

Apply to gravatars

ページ下部のアバター画像に適用するかどうかなのでYes!

Lazy load images

記事の画像に遅延読み込みを適用するかどうかなので当然Yes!!

むしろこれは必ずYes!!!

Lazy load iframes

記事内に埋め込む動画や広告の画像、SNSページの画像などに対して適用するかなのでYes!

プラグイン説明用画像11

⑧ページを下にスクロールして「Threshold」を200~400程度の値を入力

この数値の単位はピクセルで読み込みを開始するときの画像までの距離を表しています。

200ピクセルなら画像まで割と近い位置までスクロールしないとその画像を読み込んでくれません。

400ピクセルならそこそこ離れている位置までスクロールされれば画像の読み込みが開始されます。

スマホユーザーはスクロールに慣れている傾向にあるので、200ピクセルだと少し読み込みが遅いかもしれません。400ピクセルくらい離れた位置から読み込みさせるくらいで丁度よいのではないかと個人的には考えています。

残りの項目は特に何も入力しなくてOKです!!一応説明はしておきますね!!

Placeholder Image URL

表示遅延をさせている画像が表示されるまでに仮の画像を表示させたい場合のURLを入力します。

Skip images with classes

特定の画像にCSSのクラスをつけてその画像だけは表示遅延されないように設定できます。

Use low-res preview image

表示遅延をさせている画像が表示されるまでの仮の画像を設定します。

⑨最後に「設定を保存」を忘れずにクリック

えもまる
えもまる

以上で終了!!簡単な設定でしたね♪

BJ Lazy Loadの設定はほとんどデフォルトのままでOK!

しかし、JINを使用している人はApply to post thumbnailsは様子を見ながらYes/Noを切り替え!!

*2020年3月追記

JIN使用者でApply to post thumbnailsをYesにして、スマホの「文字被り現象」が生じた場合、原因の多くがWP Super Cacheなどのキャッシュプラグインとの干渉であるとわかりました。

WP Super Cacheはサイト高速化を手助けしてくれる有能なプラグインです。もし、BJ Lazy LoadのApply to post thumbnailsをYesにしたい場合、記事投稿や更新を行うたびにキャッシュ削除を行うようにしてください。

キャッシュ削除を行うことで、「文字被り現象」が発生していたとしても解消されることがわかりました。

まとめ

いかがでしたでしょうか?

BJ Lazy Loadはサイト表示速度の高速化に非常に重要な役割を果たしてくれるプラグインですのでぜひ適切な設定で利用してくださいね♪

ちなみに「JIN」を使っている方向けのおすすめプラグインを下の記事で紹介していますので参考にしてみてくださいね♪

記事説明用画像
【2020年版】テーマ「JIN」でおすすめなプラグイン17選JINの方向けのおすすめのプラグインを17個紹介しています。設定方法を紹介しているリンクも貼ってありますのでご参考にしてみてください!...

サイト高速化に関してはこちらもどうぞ!エックスサーバーでできる、意外と見落としがちなサイト高速化設定!

サイト高速化記事説明画像
エックスサーバーでできるプラグイン以外でサイト表示速度を上げる3つの方法 そんなあなたにおすすめの記事です。 この記事の内容 エックスサーバー使用者がプラグイン以...