画像を遅延ロードすることでサイトの表示速度を改善する Lazy Loadの導入

最近、本サイトの表示が重たいのであれこれチューニングをしています。

（本サイト「mislead.jp」はWordPressで構築しているので、サイトの表示改善策としてはいろいろありそうです）

 

中でも、画像が多いページの表示は、画面が開くまで2秒以上かかっていたので、取り急ぎこの問題から解決していこうと調べていたら、Lazy Loadという便利なプラグインを見つけました。

 

サイトにアクセスしページを開く際、該当ページで利用されているすべての画像・Javascript・CSSがサーバから呼び出され、すべてのダウンロードが完了して初めて画面に表示されるのですが、このプラグインは、

 

モニターで見えている範囲の画像だけが表示されるようになる

 

ため、ページ表示時の時間短縮が期待できるというものです。

（つまり、縦長や横長のサイトで画像をたくさん使っている場合、画像があるところまでスクロールしないと、画像のロードが始まらないということです）

 

結構効果がありそうだったので、本日はLazy Loadプラグインの導入について説明したいと思います。

 

実装方法

では、早速導入手順です。

 

まず、WordPressの管理画面からプラグインを追加する画面にアクセスし、キーワード「Lazy Load」で検索すると下の画像の通りプラグインが出てきますのでインストールします。

 

インストールが完了したら有効化します。

 

以下の画面が表示されたら完了です。

 

これで画像表示のあるページを開いて下にスクロールすると画像がフェードインで現れるのがわかると思います。

（コチラのページを参照）

 

ただ、有効化しただけだと設定はデフォルトのため、あまりにも早くスクロールすると画像の表示が追いつかないことがあります。

そこで、もっと早いタイミングで画像のフェードイン表示が始まるように調整します。

 

プラグイン一覧の「Lazy Load」の編集をクリックします。

 

すると以下のとおり、ソースファイルを編集する画面が表示されるので、右の一覧から「lazy-load/js/lazy-load.jp」を選択肢ます。

 

「distance:200」と記述されている箇所があるので、ここを「distance:400」にします。

これにより、もっと早いタイミングで画像表示がなされるようになるため早くスクロールしても大丈夫です。

distanceを400にと書きましたが、デフォルトの200との違いを確認したい人もいるかと思います。

コチラの検証サイトはdistance:200にしているので、気になる方はスクロールしてみてください。

 

Lazy Loadの欠点とその対策

画像にはSEOを意識してALTタグを記述していると思います。

ところが、このプラグインを利用すると画像がGoogleにインデックスしてもらえないという欠点もあります。

 

Googleは「重要な情報であれば常に表示されているべきだ」という考えから意図的にインデックスをしていないとのことです。（実際は、隠しテキストによるスパムの対策かと思います）

 

そこで、回避策として「GoogleBotからのアクセスの場合、Lazy Loadが動かないようにする」という処理を追加する方法がありますのでそちらを紹介します。

 

プラグイン編集から「lazy-load.php」の以下画像の箇所を、

 

// Don't lazyload for feeds, previews, mobile
if( is_feed() || is_preview() )
	return $content;

 

の部分を

 

// Don't lazyload for feeds, previews, mobile
if( is_feed() || is_preview() || stripos($_SERVER['HTTP_USER_AGENT'], 'Googlebot') )
	return $content;

 

とif文の条件に

stripos($_SERVER['HTTP_USER_AGENT'], 'Googlebot')

の部分を追記してやればOKです。

 

これで、SEOで不利になることもありません。

 

最後に

画像が少ないページでは、あまり効果は期待できません。

記事によって画像の利用枚数は異なりますが、このサイトの画像の多いページでは心なしか表示スピードが上がったと感じています。

 

サイトの表示速度を図るツールとして、以下の２つがあるので導入後の結果を確認してみました。

 

PageSpeed Insights（Google Developer)

 

GTmetrix

 

う～ん、まだまだ改善の余地はありますね。。。

引き続き別の方法でトライしていきたいと思います。