2015/07/14 (更新日: 2017/09/18)

WordPressプラグインなしでLazy Loadを実装する方法

画像読み込みを遅延させたほうがSEOに良いとのことで、遅延読み込みを実装しました。実装先は現在運営中のPhil Portalです。全記事に実装していますので、デモ変わりにご覧ください。
» デモ用記事：フィリピン留学で失敗する『ゆるふわ留学生』が続出している件【出合いに感謝！】

Lazy Loadプラグインを利用

Lazy Loadプラグインを利用します。数多くのサイトで紹介されており信頼できるプラグインです。
» Lazy Load Plugin for jQuery

ダウンロードはgithubからどうぞ。ファイルがいっぱいありますが、使うのは「jquery.lazyload.min.js」だけです。
» tuupola/jquery_lazyload · GitHub

では、さっそく実装していきます。

Headerでスクリプトを読み込む

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.lazyload.min.js"></script>

FooterでLazy Load プラグインを実行する


(function($){
  $("img.lazy").lazyload();
})(jQuery);

function.phpで画像の自動置換をする

ここが若干ややこしい部分です。画像の遅延読み込みをする場合は、次の処理を行います。

１．最初にダミー画像（gray.gif）を表示する
２．ページがスクロールされたら、ダミー画像から元画像に置き換える

その処理を行うのが以下のコード。function.phpにコピペで利用できます。


function filter_lazyload($content) {
  return preg_replace_callback('/(]+)(srcs*=s*"[^"]+")([^>]+>)/i', 'preg_lazyload', $content);
}
add_filter('the_content', 'filter_lazyload');

function preg_lazyload($img_match) {

  // get_template_directory_uri は必要に応じて変更してください（※1）
  $img_replace = $img_match[1] . 'src="' . get_template_directory_uri() . '/images/gray.gif" data-original' . substr($img_match[2], 3) . $img_match[3];

  $img_replace = preg_replace('/classs*=s*"/i', 'class="lazy ', $img_replace);

  $img_replace .= '<noscript>' . $img_match[0] . '</noscript>';
  return $img_replace;
}