画像の読み込みを遅らせて表示速度を上げる【BJ Lazy Load】の設定方法と注意点

今回はWordPressの高速化のために画像の読み込みを遅らせるプラグインを紹介していきます。画像が多いページは読み込みに非常に時間がかかりますので、画像の読み込みを遅らせるだけでも表示スピードはかなり早くなります。

よく使われているプラグインとしては「Lazy Load」と「BJ Lazy Load」かと思います。私は「BJ Lazy Load」を利用してますが、一部パフォーマンスが下がるページがありましたので、その対処方法も紹介していきます。

現在「BJ Lazy Load」ではなく「Unveil Lazy Load」を利用してます。「Unveil Lazy Load」の場合は余計な設定などが必要なく、インストール⇒有効化だけでOKなので簡単で便利です。

スポンサーリンク

BJ Lazy Loadの仕組み

先に簡単な仕組みの話をしておくと、ページを表示する場合にはCSSとかjavascriptとか画像など色々なファイルを読み込みます。特にヘッダー部分にたくさんのファイルがあると読み込みを遅くする(レンダリングブロックの)原因になってしまいます。

通常のCSSとかjavascriptとかはフッターで読み込む設定にしてやればある程度表示速度の改善ができますが、画像ファイルの場合には読み込みを遅らせる(遅延させる)事で表示速度の改善ができます。

「Lazy Load」や「BJ Lazy Load」などのプラグインは画像の読み込みを後回しにする仕組みです。

ページが表示される領域の画像を読み込むので、アイキャッチ画像などページの先頭にある画像は最初に読み込まれますし、後はスクロールしていく領域の画像を順番に読み込んでいくようなイメージです。

BJ Lazy Loadでどれくらい表示スピードが上がる?

試しに画像をたくさん使っているページで試してみました。

■使用前

画像遅延-3

■使用後

画像遅延-2

使用前で「4.1s」だったのが、使用後には「1.5s」に大幅な改善をしていますし、Total Page Size(ページの合計容量)も減っていますので、かなりの改善ですよね。

Lazy Load系のプラグインはSEO的に不利?

非常に便利なLazy Load系のプラグインですが、前述したようにスクロールに合わせて画像を読み込みます。そのため、Googlebotなどで画像を認識できない場合があるようです(スクロールして読み込む訳ではないので)。

訪問者(人)には見えるけど、検索エンジン(Googlebot)には見えないというような感じですかね。

Lazy Loadの画像をGooglebotが認識できないことがあなたのサイトのウェブ検索での検索順位にマイナスに影響することはないはずだ。あるとすれば、画像検索にその画像を掲載できるかどうかに影響するだけだろう。

参考:Lazy LoadはSEOに不向き? Lazy Loadで表示する画像をGooglebotは認識できないことがある|海外SEO情報ブログ

以上がデメリットになりそうです。一応確認してみましたが、レンダリングでも特に問題なく読み込まれていました。あくまで私の場合ですし、全部のページを確認した訳ではありませんが気にせず使う事にしました。

BJ Lazy Loadの設定方法

BJ Lazy Loadはインストールして有効化しておきます。有効化できたらWordPressの管理画面から「設定」⇒「BJ Lazy Load」と進むと設定画面になります。

画像遅延-4

この部分はどの範囲で遅延する?という適応範囲を設定する事ができますが、基本的に全部「YES」でOKです。一応詳細を書いておくとこんな感じです。

  • Apply to content:遅延ロードを適応する
  • Apply to text widgets:ウィジェット部分に適応
  • Apply to post thumbnails:コンテンツのサムネイルに適応
  • Apply to gravatars:コメント欄の画像に適応
  • Lazy load images:画像ファイルを遅延ロード
  • Lazy load iframes:iframeも遅延ロード

その下にまた幾つか設定項目があります。

画像遅延-5

  • Placeholder Image URL:遅延ロードで画像を読み込むまでの間に表示される画像
  • Skip images with classes:遅延ロードさせたくない画像のクラス名
  • Threshold:読み込みを開始する画像までの距離

という感じですが、最後の「Threshold」だけ設定しておけば他の部分は空欄でOKです。読み込みを開始する画像までの距離は初期値で200pxになってますが、ここは300pxか400pxで良いと思います。私は400にしてます。

以上BJ Lazy Loadの設定です。最後にちょっと注意点などを追加しておきます。

BJ Lazy Loadでの注意点

環境によってはLazy Load系のプラグインで逆に表示速度が遅くなる場合がありますので、「GTmetrix」と「PageSpeed Insights」などの無料ツールを使って複数のページチェックをして下さい。

私の場合ですが、一部のページだけスコアが悪くなりました。この「BJ Lazy Load」では個別の記事それぞれで遅延ロードの設定ができますので、それで対応ができます。

記事の編集で投稿画面の右下(アイキャッチ画像の設定の下)に個別に遅延ロードを適応するかの設定ができるようになってます。

画像遅延-6

ここにチェックを入れれば遅延ロードにはなりませんので、一部だけスコアの悪くなったページがある場合にはこの対処ができます。もし、全てのページのスコアが悪くなるのであればちょっと対策が必要になります。

PageSpeed Insightsでのモバイルのスコアが下がる?

これは私だけかもしれませんが、「BJ Lazy Load」を入れてからモバイルのスコアだけが悪くなってしまいました。

色々実験をしてみましたが、どうやら記事先頭のアイキャッチ画像の読み込みに関係があったようです。という訳で対策をしていきます。

  • アイキャッチ画像にclass名を付ける
  • BJ Lazy Loadの設定でアイキャッチ画像だけ除外する

この2点です。まずはアイキャッチ画像にclass名を付ける必要があります。私のテーマTwenty Twelveではcontent.phpでアイキャッチ画像を呼び出しています。

<?php the_post_thumbnail(); ?>

この記述がない場合はおそらくこの記述があります。

<?php if ( ! post_password_required() && ! is_attachment() ) :
				the_post_thumbnail();
			endif; ?>

この「php the_post_thumbnail();」という部分でアイキャッチ画像を呼び出しています。この呼び出すアイキャッチ画像は次のようにサイズを指定することができます。

the_post_thumbnail(‘thumbnail’) — サムネイル画像を表示
the_post_thumbnail(‘medium’) — 中サイズ画像を表示
the_post_thumbnail(‘large’) — 大サイズ画像を表示
the_post_thumbnail(‘post-thumbnail’) — アイキャッチ画像を表示
the_post_thumbnail() — アイキャッチ画像を表示(上と同じ)

それでですね、ここにclass名を付けたいので、次のような感じにしてclass名を付ける事ができます。サンプルです。

<?php the_post_thumbnail( 'post-thumbnail', array('class' => 'no-lazy') ); ?>

アイキャッチ画像のサイズの部分が第一引数で、arry(●●)の部分が第二引数といいますが、この第二引数でclass名を追加することができます。この例だと「no-lazy」というclass名が付きます。これで準備はOKです。

後は「BJ Lazy Load」の設定画面の「Skip images with classes」という項目でこのclass名の付いた画像は適応外にする訳です。

遅延ロード-9

これで保存して完了です。ちょっと難しいですが、これでアイキャッチ画像だけはそのまま読み込む設定にできます。

スコアが悪くなっていたモバイルのページも改善しました。

affinger
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

おすすめの無料セミナー

これまでお金に関する勉強をした事がない方は稼ぐサイト作りの前にお金に関する無料セミナーに参加してみて下さい。お金をためたり増やしたりするためにお金の知識があるとかなり有利。考え方の土台になる部分ですからね。

「1万円から始められる節約の方法」「お金に働いてもらう方法」「収入の2割を自動的に貯める方法」など、お金に関する基本的な知識が学べる2時間の無料のセミナーが毎日のように行われてますので、一度参加してみる事をおすすめします。

これまで全くお金の勉強していない方であればお金の知識を身につける事で考え方が大きく変化するはずです。無料の2時間程度のセミナーですが、内容は濃いのでおすすめです。
お金に関する教養無料セミナー

※入院生活から復活しました!!またできるだけ返信しますのでよろしくお願いします(^^)

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。