画像を後から読み込むプラグインは「Lazy Load」にするべし！読み込み速度を改善し、表示をスムーズにする方法

【img via New WordPress Buttons and Stickers by Nikolay Bachiyski】

ページ表示速度の高速化に大きく影響するのは画像の読み込み速度。

特に僕の場合はスクリーンショットや商品写真を扱うことが多いので、「jQuery Image Lazy Load WP」を使ってページ全体の読み込み速度の改善を図っていた。ところがどうもここ最近動作が安定しないので気になって調べてみたところ、開発がストップしている疑惑が浮上したため、即座に「Lazy Load」に切り替えることにした。

結果、快適に動作するようになったことに加えて、表示をスムーズにするコツも覚えたので紹介する！

画像が画面内に表示され次第画像を読み込むプラグイン

「Lazy Load」は以前僕が使用していた「jQuery Image Lazy Load WP」と同様の機能を持つ。画像がユーザーの画面内に表示されてから画像を読み込む、ページ全体の読み込み速度を改善してくれるプラグインである。

ただし、今あは「WordPress高速化に必須!スクロールに応じて画像を読み込むプラグインBJ Lazy Load」という記事に行き着いてプラグインの変更を決意した。

gori.meも掲載してもらっているのだが、結論として開発ストップしている可能性が高いから「Lazy Load」をオススメする、という内容になっている。完全に正論なので僕も「Lazy Load」に切り替えることにした。

プラグイン開発者は確実すぎるメンバー

新たにインストールした「Lazy Load」の説明を読むと、プラグインの信頼が一気に上がる記述が書いてあった。

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).

WordPress.comとTechCrunchと10upのメンバーが開発したプラグインだそうだ。豪華過ぎて逆に今まで使ってこなかったことを怒られそうな気さえしてきた。

「Lazy Load」の設定方法

インストールはいつも通りプラグイン追加画面から。ただこれだけではページの表示がぎこちない。読み込み速度を改善しながらもページの表示をスムーズにする方法がHibilogに紹介されているので実行してみた。

「Lazy Load」を有効化後、プラグインの編集画面から「Lazy-load/js/lazy-load.js」選択し、「distance: 200」と書かれているところを「distance: 400」に変更する！これだけ！

200や400は画面下部のピクセル数を指定しているようだ。400ぐらいにしておけば少し早めにスクロールしても読み込みがスムーズに行われる、ということだ。

画像の読み込み速度を改善して全体の読み込み速度も改善！

ページの読み込み速度は早いことに越したことはない！

まだ自分のブログにインストールしていない人は、細かいことは考えずに「Lazy Load」をインストールすることを強くオススメする！