画像の遅延読み込みをするWPプラグインBJ Lazy Loadの使い方・設定方法まとめ

Yasu
こんにちは!「Tekito+Style.me」を運営しているYasu(@98nasi_nori)です。普段は都内でWebディレクターなどをしています。
WordPressのサイトスピード改善で対策すべきなのが、画像の遅延読み込み(Lazy Load)。画像データは重く一気に読む込むと表示スピードに影響するので、画像を読み込むタイミングを調整することでサイトスピードを改善できます。

そこで便利なプラグインが「BJ Lazy Load」。導入することで簡単に遅延読み込み機能を実装できます。

今回はBJ Lazy Loadの使い方や注意点などを解説していくので、遅延読み込み機能を検討している方はぜひチェックしてみてください。

ネイティブLazy-loadについて
※先日ネイティブLazy-loadをWordPressで簡単実装するプラグインをGoogleが公開しました。Google提供のプラグインなので、これから導入を検討される方はこちらを実装した方が良さそうです。ただ僕も別のサイトで使ってみましたが、PageSpeed Insightsの結果に反映されていない場合もあったので、テストしつつ様子を見てみた方が良さそうです。僕も順次こっちのプラグインに移行する予定です。

Native Lazyload

BJ Lazy Loadってどんなプラグイン?

BJ Lazy Load
photo by:WordPress公式サイト

BJ Lazy Loadは画像の遅延読み込みを簡単に実装できるWordPressプラグイン。画面に画像を表示するタイミングで画像データを読み込む設定ができます。一気に画像データを読み込む必要がなくなるので、サイトの表示スピード改善が期待できます。

PageSpeed Insights

Googleが提供するサイトスピード計測ツール「PageSpeed Insights」で提案される改善項目で、「オフスクリーン画像の遅延読み込み」と出るのがそれです。

また遅延読み込み対策ができるプラグインは、以下のように色々と種類があります。

  • Lazy Load
  • BJ Lazy Load
  • a3 Lazy Load
  • Lazy Load by WP Rocket
  • Lazy Load Optimizer

ただしプラグインによっては、利用しているテーマと相性が悪い場合があります。現在僕が使っているテーマ「ストーク」だと正常に動作しないと指摘されているプラグインもあったので、今回は事前にリサーチし問題なさそうな「BJ Lazy Load」を選定しました。

BJ Lazy Loadで遅延読み込み設定できる項目

BJ Lazy Loadでは、以下の要素の遅延読み込み対応が可能です。コンテンツ内の画像データ以外にも、サムネイルや重くなりがちなiframeタグの遅延読み込みも可能です。

  • コンテンツ
  • テキストウィジェット
  • 投稿サムネイル
  • グラバター
  • 画像
  • iframe

BJ Lazy Load

BJ Lazy Loadの導入方法

BJ Lazy Loadの導入方法を確認していきましょう!他のWordPressプラグインと手順は同じです。

インストールと有効化

BJ Lazy Load

管理画面のメニュー「プラグイン」>「新規追加」から、「BJ Lazy Load」で検索。「いますぐインストール」をクリックし、有効化します。

設定欄からインストールされてるか確認

BJ Lazy Load

インストールを完了すると、管理画面の設定欄に「BJ Lazy Load」が追加されていればOKです。クリックして詳細を確認しましょう。

BJ Lazy Loadの使い方・設定方法

BJ Lazy Loadの使い方や設定方法はかなりシンプルです。一つ一つ確認していきましょう。

基本設定

BJ Lazy Loadの設定画面

基本的に全ての項目に「YES」で問題ないです。下記の項目にLazy loadが実装されます。

  • Apply to content(記事内の画像)
  • Apply to text widgets(ウィジットの画像)
  • Apply to post thumbnails(サムネイル画像)
  • Apply to gravatars(アバター画像)
  • Lazy load images(画像の遅延読み込み)
  • Lazy load iframes(iframeタグの遅延読み込み)

追加設定

BJ Lazy Loadの設定画面

もう少し細かい設定もできるので、確認していきましょう。

Placeholder Image URL

画像が表示されるまで、仮の画像を表示する設定ができます。特に設定しなくてもOKかなと思います。必要であれば、仮画像のURLを設定しておきましょう。

Skip images with classes

特定のクラスが付与されている画像を、遅延読み込みの対象から除外できます

例えば僕の使っているテーマstorkでは、ファーストビューで表示される画像やロゴ画像の読み込みが遅くなると、体感的に表示される速度が遅くなり微妙な感じになりました。ですのでそこだけ「no-bj-lazy」というクラスを割り当てて、遅延読み込みを解除しています。

遅延解除のために新規でクラスを追加するだけでなく、既存のクラスも指定できるので便利ですね。

メモ:アイキャッチ画像のみ解除する場合
使っているテーマにもよりますが、 Storkでアイキャッチ画像の遅延読み込みを解除した場合は下記のようにソースコードを変更します。

「single.php」ファイルの43行目


【参考記事】
・the_post_thumbnail
https://elearn.jp/wpman/function/the_post_thumbnail.html

※まだ未確認ですが、シンプルに「Apply to post thumbnails」の項目のチェックを外すだけでいけるかもです……!

Threshold

画像を読み込ませるタイミングを指定することができます(単位はピクセル)。例えば100とかに設定すると、画像が表示される100px手前で読み込みが開始されるので、かなり直前で読み込まれることになります。

逆に1,000とかだと、画像が表示されるずっと前に読み込まれることになります(あまりLazy Loadの意味がなくなる)。

デフォルトだと200ですが、早く画面をスクロールすると画像表示の挙動が遅く感じるので、僕は500に設定しています

ある程度ゆとりをもたせて先に読み込ませた方が、自然な挙動でストレスなく画像の表示ができますよ。

Use low-res preview image

実際の画像が完全に読み込まれるまでに、同一画像で画質が低いものを先に表示できる設定。まず低画質の画像を読み込んで、高画質の画像を読み込む感じですね。

僕は特に設定していませんが、必要であれば調整してみてください。またこの設定を有効化する以前アップロードされた画像は、画像サイズを再生成する必要があります。

Google botのクロール対応

遅延読み込みを実装した場合、懸念されるのがSEOへのマイナスな影響が発生する可能性があること。

遅延読み込みの設定をした場合、遅延読み込みされる画像データが適切にGoogleのbotにクロールされない場合があります。つまり画像データがコンテンツ内にあるとGoogleに正しく認識されないということです。

サーチコンソール

一応サーチコンソールで確認してみましたが、BJ Lazy Load導入後何やらエラーが発生していました。ライブテストで画像のレンダリングも上手くできていませんでした。

ですのでクロールエラーを回避し、遅延読み込みする画像をクロールされるために、プラグインのソースコードを少し調整する必要があります。

BJ Lazy Loadの編集

WordPress管理画面のサイドバー「プラグイン」欄から、「プラグインエディター」 を選択します。

BJ Lazy Loadの編集画面

今回編集するプラグイン「BJ Lazy Load」を選択し、incフォルダをクリック。

BJ Lazy Loadの編集画面

incフォルダ内に「class.bjll.php」というファイルがあるので、45行目にあるコードを下記の用に変更します。

変更前のコード

	/* We do not touch the feeds */
	if ( is_feed() ) {
		return;
	}
変更後のコード

	/* We do not touch the feeds */
	if ( is_feed() || stripos($_SERVER['HTTP_USER_AGENT'], 'Googlebot')) {
		return;
	}

変更できたら「ファイルを更新」ボタンをクリックし保存します。

管理画面で変更できない場合は、FTPソフトで編集

BJ Lazy Loadの編集画面

WordPressの管理画面上では、プラグインの変更許可が下りない場合があります。そのときはFTPソフトで同様の変更をすればOKです!

/home/◯◯◯/www/wp/wp-content/plugins/bj-lazy-load/inc

FTP

上記のパスにアクセスし、「class.bjll.php」ファイルを同様に発見したらダウンロードします。

FTP

テキストエディタで同様にソースコードを編集し保存、その後アップロードして上書き保存すれば完了ですね!

サーチコンソール

再度サーチコンソールで確認してみると、問題なくクロールできていました!画像のレンダリングもできているようです。良かった〜!

BJ Lazy Loadを有効活用しよう!

BJ Lazy Loadを活用して遅延読み込み機能を実装してきましたが、いかがでしょうか?プラグインの操作・設定自体は難しくないのですが、少しコードの調整が必要ではあります。

PageSpeed Insights

実際にPageSpeed Insightsで再度サイトスピードの検証をしてみると、「オフスクリーン画像の遅延読み込み」の項目が合格し、スマフォ版サイトのスコアが20くらい上がりました!体感的にも表示速度が早くなっているので、プラグインを導入した甲斐はありましたね。

それでは!

画像の最適化対策については、以下のWordPressプラグインも参考にしてみてくださいね。

画像圧縮・最適化プラグインEWWW Image Optimizerの使い方・設定方法まとめ

2019-09-16

WordPressサイトで画像をWebP(ウェッピー)対応し軽量化する方法

2019-09-28








Aboutこの記事を書いた人

「Tekito+Style.me」の中の人。都内で働くWebディレクター/マーケター。早稲田大学卒。時々旅人な27歳です。主にサービスの企画・ディレクション、グロースハック、SEO対策、UX設計などしてます。開発やデザインも細々と挑戦してます… 学生時代は世界一周してました(過去約40ヶ国訪問)。お気に入りの国はベトナム、モロッコ、台湾など。南国のビーチでまったり余生を過ごしたい派。好物はビールと生ハム、あとカニカマ。