Lazy Load：画像ファイルを遅延ロードできる
サイトやブログを閲覧していて、
画面をスクロールした時に画像がワンテンポ遅れて表示されることないですか？
簡単に書くと画像ファイルを遅延読込処理をしています。
スクロールした時に必要となる画像ファイルを読み込んでいます。
大きいサイズの画像が 1 記事に大量にあると読み込み完了まで時間が掛かります。
読み込み完了までに時間が掛かると Google のインデックスにも影響を与えかねません。
画像を多く使っているサイトやブログを運営している場合には、導入しておきたいところです。
そのような時に便利な WordPress 用プラグインがあります。
それは「Lazy Load」です。
そのインストール手順から日本語化・使い方と設定などを解説していきます。
Lazy Load
Lazy Load は、画像ファイル（jpeg, gif, png など）を遅延ロードできます。
iframe や 動画系ファイルは対象外です。
ただし、注意点もあります。
Lazy Load で表示する画像を Googlebot が認識できないことがあります。
対処法も使い方のところに載せておきます。
記事を作成もしくは更新時点でのバージョン：v 0.6.1
マルチサイトでの利用:可
インストール手順
下記の URL から ZIP ファイルを入手して、管理画面からアップロードして有効化するか
Lazy Load – WordPress.org
もしくは、WordPress.org の公式プラグインディレクトリにリリースされているので、
管理画面から入手できます。
ダッシュボードから「プラグイン」メニューの「新規追加」を選択し、
プラグイン追加画面右上の検索窓に「Lazy Load」と入力します。
検索結果の一番左上に表示されると思うので、「今すぐインストール」をクリックします。
インストールが完了したら、プラグインを「有効化」します。
プラグインのインストールに慣れていない方は、
下記の記事にて詳しく解説していますので、御覧ください。
WordPressプラグインのインストール手順を解説 – WordPress活用術
使い方
Lazy Load の使い方は、有効化するだけで何もすることは無いです。
ただし、前述したように Googlebot 対策を施す必要があります。
/wp-content/plugins/lazy-load/ 内の lazy-load.php を修正する必要があります。
lazy-load.php をローカルで修正して、FTP クライアントソフトなどでアップロードするか、
ダッシュボードの「プラグイン」メニューから「インストール済みプラグイン」を選択して、
「Lazy Load」行の編集から直接修正する手順があります。
※何か起きたとしても自己責任で御願いします。
// 2016/12/27 ADD START if( stripos($_SERVER['HTTP_USER_AGENT'], 'Googlebot') !== false ) return $content; // 2016/12/27 ADD E N D
上記のコードを
if ( ! self::is_enabled() ) return $content; // Don't lazyload for feeds, previews, mobile if( is_feed() || is_preview() ) return $content;
48 行目にコピーアンドペーストなどをするなりして記述します。
if ( ! self::is_enabled() ) return $content; // 2016/12/27 ADD START if( stripos($_SERVER['HTTP_USER_AGENT'], 'Googlebot') !== false ) return $content; // 2016/12/27 ADD E N D // Don't lazyload for feeds, previews, mobile if( is_feed() || is_preview() ) return $content;
追加するコードの解説を少しだけ書いておきます。
「HTTP_USER_AGENT」は、
簡単に書くとアクセスした際のブラウザーやクローラーなどの情報が設定されています。
今回の場合は、Googlebot かどうかを判定するために利用しています。
「stripos」は、PHP の関数で、ある文字列から特定の文字列が無いかを検索するために使います。
検索した結果、特定の文字列がない場合には、「false」を返し、
逆に特定の文字列が見つかった場合には、「false」以外を返してくれます。
以上のことから、
「$_SERVER['HTTP_USER_AGENT’]」に「Googlebot」という文字列が見つかるかどうかを判定し、見つかった場合には、$content を返しています。
代替プラグイン
Lazy Load にほしい機能が無かった場合には、
Lazy Load 以外にも遅延ロード（遅延読込）できるプラグインを記事にしています。
以下では、Lazy Load を含めて 9 個を簡単に紹介しています。
遅延ロード（遅延読込）できるWordPressプラグイン一覧