SimplicityではデフォルトでテーマにLazy Loadが実装されています。
このブログは画像も多いし、このブログにも「Lazy Loadを実装したい」とずっと思っていました。
調べてみるとプラグインで簡単に実装できますが、プラグインなしでもjQueryで実装できるようです。
Lazy Laodを実装することでページの表示速度が速くなるので、画像やYou Tubeをよく埋め込むサイトでは特に実装したい機能です。
Lazy Loadとは？
Lazy Loadとはスクロールに応じて画像を読み込むことを言います。
かなり幼稚な画ですが（笑）、イメージとしてはこんな感じです。
このように画像を遅延して読み込むため、ページを表示するときに読み込むデータ量が減るのでページの表示速度が速くなります。
Lazy Load系のプラグインはWordPressに沢山ありますが、調べたところ機能的にBJ Lazy Loadが良さそうに思えます。
BJ Lazy Loadの設定方法
BJ Lazy Loadをインストールして有効化します。
プラグインを有効化後、「設定」→「BJ Lazy Load」でプラグインの設定をします。
設定項目は沢山ありますが、デフォルトでは全て「yes」になっています。
普段なら「英語じゃわかんねーよ笑」となるところですが、○○を適用すると簡単な内容。
たつじんｗもこの程度なら理解できます（笑）。
設定項目をよく眺めると、ウィジェットやサムネイルにアバター、そしてiframeで呼び出すYouTubeなどに適用するかどうか、という設定だとわかります。
デフォルトの設定で全て「yes」になっているので、このままでいいと思います。
そして次の項目をみると、大事なのはThresholdという項目。
「どのくらいの位置から読込みを開始するか」設定する項目で、デフォルトでは200になっています。
Simplicityでも400px前に設定しているので、400に変更しました。
「Placeholder Image URL」では読込むまでに代わりに表示する画像を設定。
デフォルトでも画像は用意されているので、特に使いたい画像がないなら空欄でいいと思います。
「Skip images with classes」ではLazy Loadを除外するクラス名を記入します。
1番下の「USE low-res preview image」では読み込むまでに低解像度の画像を使用するかを選択します。
BJ Lazy Loadの設定はこれで終了ですが、BJ Lazy Loadに限らずLazy Load系のプラグインには1つ問題があります。
Lazy Loadの問題点
Googleが処理できないLazy Loadによってウェブ検索のランキングに直接的な悪影響はないだろうとミューラー氏は言っています。
それでもクエリによっては間接的に、そのページとクエリとの関連性が本来よりも低く評価されてしまうかもしれません。
そして画像検索には直接的に影響を与えるかもしれません。引用元:海外SEOブログ Lazy LoadはSEOに不向き？ Lazy Loadで表示する画像をGooglebotは認識できないことがある
Lazy Loadはページをスクロールしてから画像を読み込みます。
そのため画像情報をGoogle botは正確に読み込むことができないので「画像検索には直接的な影響を与えるかもしれない」らしいです。
画像にalt設定してSEO対策している人はLazy Loadを使うとアクセスに影響がでるかもしれません。
そこで、遅延読込みの対象からGoogle botを除外する必要があります。
「Googlebot」を除外
BJ Lazy Loadのプラグインのファイル「class-bjll.php」を編集します。
class-bjll.phpは「wp-content/plugins/bj-lazy-load/inc/class-bjll.php」にあるのでFTPソフトで編集するか、
管理画面から「プラグイン」→「プラグイン編集」→「BJ Lazy Load」→「bj-lazy-load/inc/class-bjll.php」でも編集できます。
/* We do not touch the feeds */
if ( is_feed() ) {
return;
}
そして、class-bjll.phpにあるこの部分を、
/* We do not touch the feeds */
if ( is_feed() || stripos($_SERVER['HTTP_USER_AGENT'], 'Googlebot') ) {
return;
}
に書き換えます。
これでLazy Loadの対象からgoogle botを除外することができるそうです。
参考サイト：ネットセキュリティブログ「「BJ Lazy Load」を設定する方法について」
プラグインなしでLazy Loadを実装する
「Lazy Load Plugin for jQuery」という、jQueryのプラグインを使用して画像の遅延読込みを実装できるようです。
プラグインはGitHubでダウンロードできます。
そして、ダウンロードしたファイルの中で「jquery.lazyload.min.js」だけを使用します。
tuupola/jquery_lazyload · GitHub
実装方法も書こうと思ったのですが、きちんと動作しているのか確認できませんでした。
PageSpeed InsightsのレンタリングをブロックしているJavaScript/cssに「jquery.lazyload.min.js」が表示され、ソースを見ても呼び出しているように思えます。
ただ表示が速くなったことも数値でわかりませんでしたし、ページを実際スクロールしてみても、遅延しているのかよくわかりません。
BJ Lazy Loadでもイマイチわからなかったので、もしかしたらきちんと動作していたかしれません（笑）。
実装方法はmanablog「WordPressプラグインなしでLazy Loadを実装する方法」で解説されています。
まとめ
実装できたのか不明なので「jquery.lazyload.min.js」については書かないほうが良かったと思います（笑）。
「jquery.lazyload.min.js」ではエフェクトや読み込む位置を変更したり、様々なオプションがありますが初心者には設定が少し難しいかもしれません。
今日のたつじんへの一歩
たつじんｗ 「初心者には設定が少し難しい＝たつじんｗができなかった」ということです（笑）。
もう少し勉強して再挑戦したいと思います。
