ブログの高速化に貢献！画像をあとから読み込むプラグイン「jQuery Image Lazy Load WP」が便利！

【img via WordPress Pencil and Pins-07 by thisismyurl】

ブログの表示速度は早ければ早い方が良い！

そう思って様々なWordPress用プラグインを試しているのだが、最近、画面内に画像が表示された段階で画像を読み込むような動作をしているメディアが気になっていた。

調べてみたところ、そのような処理をしてくれる「jQuery Image Lazy Load WP」というプラグインがあった。実際に導入してみたらそれなりに効果を発揮したので、紹介する！

「jQuery Image Lazy Load WP」のインストール

「jQuery Image Lazy Load WP」を入れることによってどういう効果があるかというと、本来であればページ内にある全画像を最初に読み込むため特に画像数が多い記事やページは読み込み速度が遅くなりがちなのだが、このプラグインを入れることによって画像が画面内に表示され次第画像を読み込む、という処理をしてくれる。これによってページ全体の読み込み速度を改善することが可能なのだ。

ダウンロードはこちらからどうぞ。もちろん、普通にWordPress内から検索してインストールすることも可能。

WordPress › jQuery Image Lazy Load WP « WordPress Plugins

インストールしたあとにちょっと設定を！

プラグインをインストールすると自動的に可視部分のみ画像を読み込むようになるが、そのまま利用するとサイドバーの画像も同じように処理されてしまう。その回避方法があんとんさんちで取り上げられていたので、紹介する！

jQuery Image Lazy Load WP – コンテンツ部分以外の画像にフェード効果をつけない | あんとんさんちjQuery(“img”).not(“.cycle img”).lazyload({ …

プラグインファイルに「jq_img_lazy_load.php」があるはずなので、それをエディタで開き以下の記述を探す！

jQuery("img").not(".cycle img").lazyload({

その1行を以下のように書き換える！

function jquery_lazy_load_ready() {
  $placeholdergif = plugins_url('images/grey.gif', __FILE__);
  echo <<<EOF
<script type="text/javascript">
jQuery(document).ready(function($){
  if (navigator.platform == "iPad") return;
  jQuery("#content img").not(".cycle img").lazyload({
    effect:"fadeIn",
    placeholder: "$placeholdergif"
  });
});
</script>
EOF;
}

これでサイドバーが同じように読み込まれることは無くなる！！

ブログの読み込み速度高速化に貢献！

体感の効果もそれなりにあるが、数値にもしっかりと反映している。以下がGTMetrixで測定した数値。

「jQuery Image Lazy Load WP」無しの場合

「jQuery Image Lazy Load WP」有りの場合

数値で見ても明らかに向上している！！

導入も簡単でページ表示速度の高速化に貢献してくれる「jQuery Image Lazy Load WP」を使わない手はないだろう！まだ導入していない人お試しあれ！！