画像を後から読み込むプラグイン「Lazy Load」導入、画像が多いページの表示速度が改善!

こんばんわ、ブログの表示速度改善に燃えているhide10( @hideto )です。

最近、記事サムネイル付きの過去記事表示ロジックを実装したら、ババッと画像が増えて表示が重めになってしまいました。

対策として画像の遅延表示プラグイン「Lazy Load」を導入してみたのですが、これが中々に良い感じなので紹介させてください。

Lazy Loadプラグインとは

Lazy Loadは、ブラウザのスクロールに併せて画像を表示することで、ページの表示速度を改善するプラグインです。

特筆したいのは開発陣で、WordPress開発元であるAutomattic社のWordPress.com VIPチームと、TechCrunchの2011再設計チーム、そして10upのJake Goldmanと豪華メンバーがそろい踏み。

こりゃもう使うしかないでしょ!

Lazy Loadプラグインの導入

Lazy Loadプラグインの導入は簡単です。

  1. WordPress管理画面から「プラグイン」の「新規追加」を開く
  2. 「Lazy Load」で検索
  3. “Lazy Load”を探して「いますぐインストール」を選択

2013-04-18_2223

インストール後は有効化するだけで、あとは勝手に処理してくれます。便利ですね!

もちろんプラグイン公式サイトからダウンロードしてインストールする事も可能です。ご自身に都合の良い方をお選びください。

WordPress: 管理画面への不正アクセスを予防する「Simple Login Lockdown」 | Hinemosu

FlickEXのバッティング問題も解決済み

実はLazy Load導入時、ちょっとした問題がありました。

Lazy Loadを有効にすると、Flickr画像にEXIF情報を付けてくれる便利なブログパーツ「FlickEX」が動かなくなってしまうのです。

しかし、この問題も無事に解決!

ブログパーツ作者のdrikin(@drikin)さん経由で、MovableType用Lazy Loadの対応を行ったヤガー(@yager)さんに連絡して頂き、WordPress用Lazy Loadにも対応するよう修正して頂きました!

これで心置きなくLazy Loadが使えます。やったね!

FlickrExがWordPressのLazy Load Pluginに対応しました! [C!]
[D] Flickr画像に自動的にExif情報を付加するブログパーツ FlickrEx – Drift Diary XV

まとめ

画像が多めのブログなら、Lazy Load導入の効果は大きいはず。

表示速度が早くなって悪いことは無いと思うので、積極的に導入を検討してみてください。

そんな感じで!

Twitter で