そこで便利なプラグインが「BJ Lazy Load」。導入することで簡単に遅延読み込み機能を実装できます。。
今回はBJ Lazy Loadの使い方や注意点などを解説していくので、遅延読み込み機能を検討している方はぜひチェックしてみてください。
Native Lazyload
BJ Lazy Loadってどんなプラグイン？
photo by：WordPress公式サイト
BJ Lazy Loadは画像の遅延読み込みを簡単に実装できるWordPressプラグイン。画面に画像を表示するタイミングで画像データを読み込む設定ができます。一気に画像データを読み込む必要がなくなるので、サイトの表示スピード改善が期待できます。
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の導入方法を確認していきましょう！他のWordPressプラグインと手順は同じです。
インストールと有効化
管理画面のメニュー「プラグイン」>「新規追加」から、「BJ Lazy Load」で検索。「いますぐインストール」をクリックし、有効化します。
設定欄からインストールされてるか確認
インストールを完了すると、管理画面の設定欄に「BJ Lazy Load」が追加されていればOKです。クリックして詳細を確認しましょう。
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タグの遅延読み込み）
追加設定
もう少し細かい設定もできるので、確認していきましょう。
Placeholder Image URL
画像が表示されるまで、仮の画像を表示する設定ができます。特に設定しなくてもOKかなと思います。必要であれば、仮画像のURLを設定しておきましょう。
Skip images with classes
特定のクラスが付与されている画像を、遅延読み込みの対象から除外できます。
例えば僕の使っているテーマstorkでは、ファーストビューで表示される画像やロゴ画像の読み込みが遅くなると、体感的に表示される速度が遅くなり微妙な感じになりました。ですのでそこだけ「no-bj-lazy」というクラスを割り当てて、遅延読み込みを解除しています。
遅延解除のために新規でクラスを追加するだけでなく、既存のクラスも指定できるので便利ですね。
「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」を選択し、incフォルダをクリック。
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ソフトで編集
WordPressの管理画面上では、プラグインの変更許可が下りない場合があります。そのときはFTPソフトで同様の変更をすればOKです！
上記のパスにアクセスし、「class.bjll.php」ファイルを同様に発見したらダウンロードします。
テキストエディタで同様にソースコードを編集し保存、その後アップロードして上書き保存すれば完了ですね！
再度サーチコンソールで確認してみると、問題なくクロールできていました！画像のレンダリングもできているようです。良かった〜！
BJ Lazy Loadを有効活用しよう！
BJ Lazy Loadを活用して遅延読み込み機能を実装してきましたが、いかがでしょうか？プラグインの操作・設定自体は難しくないのですが、少しコードの調整が必要ではあります。
実際にPageSpeed Insightsで再度サイトスピードの検証をしてみると、「オフスクリーン画像の遅延読み込み」の項目が合格し、スマフォ版サイトのスコアが20くらい上がりました！体感的にも表示速度が早くなっているので、プラグインを導入した甲斐はありましたね。
それでは！
画像の最適化対策については、以下のWordPressプラグインも参考にしてみてくださいね。
またサイトスピード改善で実施した施策とスコアの検証結果については、下記の記事で全てまとめていくので、よかったら施策の参考にしてみてください。
下記記事では、WordPressのおすすめプラグインを厳選して紹介しています ↓↓
