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

Wordpress lazyload 【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」に変更する!これだけ!

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

WordPressの読み込みを高速化させる、「LazyLoad」の活用法 | Hibilog | 世界一周と日常と考察ブログ

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

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

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

サイト内を検索して記事を探す

wordpress-lazyload.jpg

gori.meの最新情報をチェック!!

15件のコメント

  1. attrip より:

    速い方がいいんで何度かとらいしたけど、画像が出ないこともあるんだよね。あと実はあまり速さ変わらないという落ちもある。また、この記事も画像出ていない部分もあるよ。なので僕はパスした。

    • g.O.R.i より:

      え、ホントですか?!確かに読み込むまで若干タイムラグがあるので表示に時間はかかるようですが、まったく意味がないということはないと思ってました……。全然無意味なですかね?!

この記事にコメントする

投稿内容を確認し、問題がなければ下記の「コメントを投稿する」ボタンを押してください。