WordPress でスクロールによる画像遅延読み込みするプラグイン Lazy Load

2015/09/29

WordPress のプラグインを利用すると、画面描画時点で見えない画像は読み込まず、画面をスクロールし画像を表示するタイミングに達する直前に非同期で読み込むことができるようになります。ファイルサイズの大きい画像ファイルを時差で読み込むことにより、次のようなメリットがあります。

  • 無駄な転送を抑えることができる
  • 初期描画のページ読み込み速度が高速化される
  • 読み込み動作が閲覧者の目に止まるので、無意識的に画像に目がいく

サイト転送量の80%は画像ファイル

僕のサイトの場合、Web サイト内の転送データの 8割強が png や jpg の画像ファイルです。通常は、ページの閲覧途中で離脱しても、ページ内の画像は全てダウンロードされブラウザにキャッシュされます。つまり無駄な転送が発生していると言うことです。これはページ閲覧者にとってもサイト運営者にとっても良いことはありません。

サーバーによっては一日あたりの転送上限が決められているので、出来ることならば無駄な転送は抑えたいと言うのが正直なところではないでしょうか。無駄な転送が抑えられれば、サイト表示の高速化にもつながります。

転送量軽減、サイト表示の高速化を実現する Lazy Load

Lazy Load は画像遅延読み込みを実現する WordPress のプラグイン

そこで登場するのが、今回紹介する WordPress のプラグイン「Lazy Load」です。画像遅延読み込みのプラグインはいくつか存在します。Lazy Load の機能を拡張し各設定が出来るようなプラグインもあります。一番シンプルなのは、こちらのプラグインです。

インストールして有効化するだけ!最も簡単なプラグイン「Lazy Load」です。

WordPress › Lazy Load « WordPress Plugins

このプラグインの作成者には、WordPress.com の VIP team のメンバーも含まれているので、信頼できるプラグインと捉えて良いでしょう。

This plugin is an amalgamation of code written by the WordPress.com VIP team at Automattic, the TechCrunch 2011 Redesign team, and Jake Goldman (10up LLC).

Lazy Load は更新されていない古いプラグイン?

Lazy Load の最終更新日は 2012年9月4日でした。この時のバージョンは 0.5 です。Lazy Load 関連のプラグインを紹介するサイトは、更新されていないプラグインは脆弱性のリスクがあるため、別のプラグインを利用した方が良いと勧めるサイトが多くありました。しかし安心してください。更新が止まったわけではありません。来る 2015年9月25日に、Lazy Load バージョン 0.6 がリリースされました。

そんな複雑な機能ではないので、更新が不要だったと考えるのが妥当でしょう。とは言え、ソースコードを読めないと何が安全で何がリスクと成り得るか判断は出来ないので、より新しいプラグインを選択するのは間違いではありません。

Lazy Load の利用方法

プラグインの追加から「Lazy Load」を検索し、インストール。あとはプラグインを有効化すれば OK です。もうこれで画像遅延読み込みが行われるようになります。

wordpress-plugin-lazy-load01

Lazy Loaed バージョン 0.6 からスマホにも対応

これまでのバージョン 0.5 では、is_mobile() 関数を実装しているサイトは、Lazy Load が機能しないような仕組みになっていました。しかし、最新バージョンからはスマホから閲覧しても、機能するように変更されています。ただ、スマホから閲覧した場合、画像読み込みのタイムラグがスクロールに追いつかず、逆に体感速度が遅くなるため、一部プラグインに修正を加え対応してみました。

旧バージョン同様スマホを対象外にする方法

まず、スマートフォンからのアクセスの場合に Lazy Load を起動させない方法です。インストール済みプラグインの一覧から Lazy Load の [編集] を選択し、ソースコードを表示します。最初に lazy-load.php のファイルのコードが表示されているので、50行目のコードを次のように書き換えます。

変更前

// 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() || wp_is_mobile() )
	return $content;

wp_is_mobile() は、スマホ等のモバイル端末からのアクセスを識別するための、WordPress 標準関数です。49行目のコメントには、フィードとプレビューとモバイルには適用しないと記載がありますが実装と異なっているので、おそらくコメントの修正漏れではないでしょうか。

この設定では完全にスマホからのアクセスには Lazy Load が起動しなくなるため、アクセスの大半がスマホの場合は意味を成さなくなってしまいます。そこでスマホへの対応を考慮した方法が次の修正となります。

遅延読み込みのタイミングを早め、スマホの体感速度を遅くさせない方法

前述の修正は行わず、プラグインのソースの中の lazy-load.js を開いて、画像読み込みのタイミングを早めるようにソースの改修を行います。

修正箇所は 6行目の distance の設定値です。初期設定では、画面スクロールして、画像ファイルの 200px 手前まで来たら読み込むようになっていますが、これを倍の 400px に変えてあげることで、画像を読み込み始めるタイミングが早くなります。

変更前

$( 'img[data-lazy-src]' ).bind( 'scrollin', { distance: 200 }, function() {
	lazy_load_image( this );
});

変更後

$( 'img[data-lazy-src]' ).bind( 'scrollin', { distance: 400 }, function() {
	lazy_load_image( this );
});

この数値は 400px にこだわらず、実際に自身のサイトを確認して数値を調整すると良いでしょう。

Googlebot に認識させないと SEO 的に不利?!

Lazy Load を導入すると、Googlebot 上では画面下部の画像を認識してくれません。海外SEO情報ブログには、次のような記事が掲載されていました。

Lazy LoadはSEOに不向き? Lazy Loadで表示する画像をGooglebotは認識できないことがある

確かに、レタリングして確認すると認識されていません。

ミューラー氏が提案する代替策は次の2つです。

  • Googlebotが処理できるLazy Loadを実装する
  • 素直に画像を直接埋め込む

理想は言うまでもなく1つ目でしょう。高速化という優れたユーザー体験を提供しつつ、インデックス性も確保できます。

技術的に難しいのであれば、Lazy Loadをあきらめる2つ目の選択肢になります。ユーザー体験よりもSEOを重視します。

なるほど。それでは Googlebot に認識してもらえるよう、技術的に解決してみましょう。

Googlebot に画像ファイルを認識させるように Lazy Load を設定する

つまり、Googlebot からアクセスがあった場合に、Lazy Load が動かなければ良いのです。これは前述の lazy-load.js に wp_is_mobile() 関数を設定した箇所へ、同じように修正を加えれば解決することができます。

変更前

// 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;

これでユーザーエージェントが Googlebot だった場合に、Lazy Load が発動しないようになりました。その他の bot に対して対応する場合は、同様にして記述を追加することで対応できるようになります。

Microsoft Edge との相性が悪い?

画像イメージの非同期読込み全般において影響があるのかもしれませんが、Edge で閲覧すると動きがおかしくなることがあったので、こちらの対策も入れておくと無難です。

Lazy Load と Edge の相性が良くないので遅延読込みを対象外にした
Windows 10 の利用ユーザーが増え、それに比例するように Micorosoft Edge を利用するユーザーも増えてきました。当ブログのアクセス解析を見ても2...

Name :
気力・体力勝負なシステム業界のエンジニアを経て、個人事業主として独立。Web サイト運営、動画制作など活動の場を広げています。目指すところへの道のりは険しいですが、自分が自分らしくあるために、一歩ずつ進んでいきます!

このブログでは、困ってたどり着いた人に、分かりやすく答えを提供できるように心掛けています。更新情報は、Twitter や Facebook ページを参照ください。よろしければフォローお待ちしています。

Facebook ページ NJ-CLUCKER
このブログが役に立ったら
「いいね!」お願いします
PAGE TOP ↑