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

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

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

 

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

 

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

 

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

 

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

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

 

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

 

実装方法

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

 

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

Lazy Load プラグイン 検索

 

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

Lazy Load プラグイン インストール

 

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

Lazy Load プラグイン インストール完了

 

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

コチラのページを参照)

 

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

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

 

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

Lazy Load プラグイン 一覧

 

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

Lazy Load プラグイン 編集画面

 

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

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

Lazy Load プラグイン js編集

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

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

 

Lazy Loadの欠点とその対策

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

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

 

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

 

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

 

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

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で不利になることもありません。

 

最後に

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

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

 

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

 

PageSpeed Insights(Google Developer)

PageSpeed Insightsの結果

 

GTmetrix

GTmetrixの結果

 

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

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

 

Author:yukio iizuka
プロフィール画像
フリーランスとしてUX視点で業務支援しています。 HCD-Net認定 人間中心設計専門家 LEGO®︎ SERIOUS PLAY®︎ メソッドと教材活用トレーニング修了認定ファシリテーター Hi-Standard好きです。
http://yukioiizuka.com
mislead
MISLEADの記事に共感いただけましたら
いいねをお願いします。

コメント一覧

コメントはありません

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください



       

© yukio iizuka All Rights Reserved...