WordPress

【WordPress】プラグイン「BJ Lazy Load」の設定方法【ブログを高速化しよう!】

こんにちは😀広瀬ユキです。

サイトやブログを見るときに、なるべく早く表示させたいですよね。

皆さんは、WordPressの表示を高速化するために、どのプラグインを使用していますか?

今回は、画像の読み込みを遅らせて、サイトの表示速度上げるプラグイン「BJ Lazy Load」の設定方法についてご紹介します。

プラグイン「BJ Lazy Load」をインストールしよう!

まずはじめに、プラグイン「BJ Lazy Load」をWordPressにインストールしましょう。

  1. WordPressにログインし、編集画面を開きます。
  2. 「プラグイン」→「新規追加」を開きます。
  3. 検索バーに「BJ Lazy Load」と入力し、キーワード検索しましょう。
  4. 見つけたら「今すぐインストール」をクリックしましょう。
  5. 「有効化」をクリックしましょう。

「BJ Lazy Load」の設定方法

「BJ Lazy Load」を設定しましょう。

  • WordPressの編集画面から「設定」→「BJ Lazy Load」を選択し、「BJ Lazy Load Options」を開きます。

するとこのような画面が表示されます。

設定項目

各項目を設定しましょう。

Apply to content

直訳:コンテンツに適用

記事内の画像の読み込みを遅らせる設定です。

  • Yes:記事内の画像の読み込みを遅らせる
  • No:記事内の画像の読み込みを遅らせない

Apply to text widgets

直訳:テキストウィジェットに適用する

サイドバーやフッターなどに設定したテキストウェジェット(テキストやカスタムHTML)で設定した画像の読み込みを遅らせる設定です。

  • Yes:テキストウィジェットの画像の読み込みを遅らせる
  • No:テキストウェジットの画像の読み込みを遅らせない

カテゴリー、人気記事ランキング、おすすめ記事、最新の投稿【アイキャッチ画像付き】 などのウィジェットは次のApply to post thumbnailsでの設定になります。

Apply to post thumbnails

直訳:投稿サムネイルに適用

サムネイル(アイキャッチ画像)で設定した画像の読み込みを遅らせる設定です。

  • Yes:サムネイル(アイキャッチ画像)の読み込みを遅らせる
  • No:サムネイル(アイキャッチ画像)の読み込みを遅らせない

Apply to gravatars

直訳:グラバターに適用

Gravatar(グラバター:コメントする際に名前のそばに表示される画像)で設定した画像の読み込みを遅らせる設定です。

  • Yes:Gravatarの読み込みを遅らせる
  • No:Gravatarの読み込みを遅らせない

コメントを非表示にしている場合やGravatarを使用しない場合は、必要ない設定なので、どちらを選択してもOKです。

Lazy load images

直訳:遅延ロード画像

画像の読み込みを遅らせる設定です。

  • Yes:画像の読み込みを遅らせる
  • No:画像の読み込みを遅らせない

ここをNoにすると「BJ Lazy Load」のすべての機能が使えないので、必ずYesにしましょう。

Lazy load iframes

直訳:遅延ロードiframe

Facebook、Instagram、Twitter、YoutubeなどのSNSやアフィリエイトをiframeを使って表示している画像の読み込みを遅らせる設定です。

  • Yes:iframeを使って表示している画像の読み込みを遅らせる
  • No:iframeを使って表示している画像の読み込みを遅らせない

【iframeとは?】HTMLタグのひとつ。

Placeholder Image URL

直訳:プレースホルダ画像のURL

画像が表示されるまでのあいだに仮に表示しておく画像の設定の欄です。何も設定しなくてもOKです。その場合、空白の画像が表示されます。

【仮に表示しておく画像を設定したい場合】

  1. WordPressの編集画面から「メディアライブラリ」を開き、仮に表示しておきたい画像を開きます。
  2. その画像の「ファイルのURL」をコピーし、「Placeholder Image URL」の設定の欄に貼り付けます。

【当ブログではコチラの画像を設定しています】

 

Skip images with classes

直訳:クラスを含む画像をスキップする

画像の読み込みを遅らせないようにする設定です。通常の表示速度で表示したい画像を指定します。2つ以上項目を入力したい場合は「, (カンマと半角スペース)」で区切りましょう。

【オススメの設定】

  • 特定の画像の読み込みを遅らせないようにする設定
  1. 「メディアライブラリ」を開き、「ファイル名」をコピーします。
  2. 「Skip images with classes」の設定の欄に、先ほどコピーした「ファイル名」の「.jpg」を除いた部分を入力します。
  • ブログカードの画像の読み込みを遅らせないようにする設定

「Skip images with classes」の設定の欄に、「blogcard」または「blog-card」と入力します。

WordPress有料テーマJINでは、内部ブログカード(自分のブログ内のリンクをカードのように貼る機能)がありますが、先ほどの「Placeholder Image URL」を設定すると、そこで設定した画像がアイキャッチ画像として表示されてしまいます。

そこで「Skip images with classes」にこの設定をすることで、記事ごとに設定しているアイキャッチ画像を表示できるようにすることがオススメです。

≪Before≫

≪After≫

Threshold

直訳:しきい値

画像の表示をし始めるまでの距離の設定です。単位はpx(ピクセル)で、数値が大きいほど早めに画像を表示し始めます。推奨数値は200~400です。

Use low-res preview image

直訳:低解像度のプレビュー画像を使用する

画像を表示するまでのあいだに低解像度のプレビュー画像を使用する設定です。

Regenerate Thumbnailsなどの低解像度のプレビュー画像を設定できる別のプラグインのインストールが必要です。

  • Yes:低解像度のプレビュー画像を使用する
  • No:低解像度のプレビュー画像を使用しない

基本、NOを選択しておけばOKです。

「変更を保存」を選択する

すべて設定出来たら、画面左下の「変更を保存」を選択しましょう。

テーマエディターを編集する

「BJ Lazy Load」は便利なプラグインですが、これを使うとGoogle botに認識されず、画像が検索結果に表示されない場合があります。そうなると、集客に影響が出ますよね。Googleからの評価を上げるためにも、Google botには画像を認識させたいので、「BJ Lazy Load」のテーマエディターを編集しましょう。

  1. WordPressの編集画面から「プラグイン」→「プラグインエディター」を開きます。
  2. 画面右側「編集するプラグインを選択」で「BJ Lazy Load」を開きます。
  3. 画面右側「プラグインファイル」から「inc」→「class-bjll.php」を開きます。
  4. 46行目を以下のように変更します。
    if ( is_feed() )​

    if ( is_feed() || stripos($_SERVER['HTTP_USER_AGENT'], 'Googlebot'))​
  5. 「ファイルを更新」を選択します。

上の写真を拡大

「BJ Lazy Load」設定完了です‼

WordPress有料テーマ【JIN】でも推奨されています!

WordPress有料テーマJINでは「BJ Lazy Load」がブログの表示速度を高速化させるための相性の良いプラグインとして紹介されています。

私は「BJ Lazy Load」で問題なく使用できましたが、現在では「Lazy Load」の使用も推奨されています。

また、現在はBJ Lazy Loadではなく「Lazy Load」のプラグインを推奨していますので、宜しければこちらもお試しください。

引用元:https://jin-forum.jp/topic/148/jinの高速化プラグインで奨励されている-bj-lazy-load-について/3

編集後記

参考になれば幸いです。「Placeholder Image URL」は何も設定しなくてもOKですが、私はこの設定がお気に入りです。

【WordPress】親テーマから子テーマにファイルを追加する方法【JIN】【Xserver】親テーマから子テーマにファイルを追加する方法について書きました。サーバーからWordPressにファイルをアップロードする方法としてもご覧いただけます。...

☆クリックで応援お願いします☆

PVアクセスランキング にほんブログ村

ブログランキング・にほんブログ村へ にほんブログ村 スイーツブログ コンビニスイーツへ にほんブログ村 ブログブログ ブログ初心者へ