WordPressでプラグインなしで画像を遅延読み込みする方法 - lozad.jsの使い方
今回はWordPressにある遅延読み込み用のプラグインを使わないで、lozad.jsを使って実装します。jQueryに依存していないのでlozad.js単体で動作します。
説明する環境は以下の通りです。
- macOS Mojar v10.14.6
- Visual Studio Code v1.39.2
WordPressでプラグインなしで画像を遅延読み込みする方法
通常のlazyloadはscrollイベントを使って遅延読み込みを行いますが、lozad.jsはIntersection Observer APIを使って行います。
そのためscrollするたびにイベントが発生せず、画像が表示領域に入ったときだけイベントが発生するのでブラウザへの負担が少ないのが特徴です。
lozad.jsを読み込む
githubからは以下のリンクからダウンロードできます。
今回は直接ダウンロードはせずに、CDNから読み込みます。以下の１行を読み込みましょう。
<script src="https://cdn.jsdelivr.net/npm/lozad@1.14.0/dist/lozad.min.js"></script>functions.phpから読み込む場合は以下のように書きます。これで</body>の直前に出力されるようになります。
if (!is_admin()) {
function register_script(){ // 登録の項目
wp_register_script('lozad', '//cdn.jsdelivr.net/npm/lozad@1.14.0/dist/lozad.min.js', array(), null, true);
}
function add_script() { // 装備の項目
register_script();
wp_enqueue_script('lozad');
}
add_action('wp_enqueue_scripts', 'add_script');
}JavaScriptで書くこと
lozad.jsはjQueryが必要ないので以下のように書きます。init.jsと適当な名前のファイルを作成して以下をコピペします。クラス名にlozadとある画像を、表示される200px手前で読み込む設定です。
(function () {
var observer = lozad(".lozad", {
rootMargin: "200px 0px",
threshold: 0.1,
load: function load(el) {
el.src = el.dataset.src;
}
});
observer.observe();
})();init.jsもfunctions.phpから読み込むましょう。
if (!is_admin()) {
function register_script(){ // 登録の項目
wp_register_script('lozad', '//cdn.jsdelivr.net/npm/lozad@1.14.0/dist/lozad.min.js', array(), null, true);
wp_register_script( 'init', get_template_directory_uri() . '/js/init.js',array('lozad'), null, true);
}
function add_script() { // 装備の項目
register_script();
wp_enqueue_script('lozad');
wp_enqueue_script('init');
}
add_action('wp_enqueue_scripts', 'add_script');
}functions.phpに書くこと
画像にクラス名lozadがつくことで遅延読み込みができるようになります。サムネル画像と投稿ページ画像にクラス名lozadをつける処理をfunctions.phpに書きます。
/*
* サムネイルにlozadを適用
*/
add_filter('wp_get_attachment_image_attributes', function ($attr, $attachment) {
// Bail on admin
if (is_admin()) {
return $attr;
}
$attr['data-src'] = $attr['src'];
$attr['class'] .= ' lozad';
unset($attr['src']);
return $attr;
}, 10, 2);
/*
* コンテンツの画像にlozadを適用
*/
add_filter('the_content', function( $content ) {
$content = preg_replace('/(<img[^>]*)\s+class="([^"]*)"/', '$1 class="$2 lozad"', $content);
$content = preg_replace('/(<img[^>]*)\s+src=/', '$1 data-src=', $content);
return $content;
});IE11の対策
Intersection ObserverはIE11に対応していません。対応させるためにpolyfillを読み込みます。polyfillには「polyfill.io」というサイトが便利。コードが対応していないブラウザのみ必要なコードを出力してくれるので無駄がありません。
IE11で調べてみると、lozad.jsで使われている「Intersection Observer」と「assign」に対応してないのでその２つを読み込みます。polyfill.ioで出力したコードは以下です。
<script src="https://polyfill.io/v3/polyfill.min.js?features=Object.assign%2CIntersectionObserver"></script>このコードもfunctions.phpで読み込みます。
if (!is_admin()) {
function register_script(){ // 登録の項目
wp_register_script('polyfill', '//polyfill.io/v3/polyfill.min.js?features=Object.assign%2CIntersectionObserver', array(), null, true );
wp_register_script('lozad', '//cdn.jsdelivr.net/npm/lozad@1.14.0/dist/lozad.min.js', array('polyfill'), null, true);
wp_register_script( 'init', get_template_directory_uri() . '/js/init.js',array('lozad'), null, true);
function add_script() { // 装備の項目
register_script();
wp_enqueue_script('polyfill');
wp_enqueue_script('lozad');
wp_enqueue_script('init');
}
add_action('wp_enqueue_scripts', 'add_script');
}これですべてのモダンブラウザで遅延読み込みが可能になります。
※macのchrome、safari、firefoxとwindowsのchrome、ie11、Edgeで確認済み。iPhone、Andoroidで確認済み。
WordPress独自のlazyloadを解除する
WordPress5.5からデフォルトで画像の遅延読み込みが実装されています。lazad.jsと重複して設定してしまうと画像が表示されません。functions.phpに以下を追加すると、デフォルトの遅延読み込みを解除することができます。
add_filter( 'wp_lazy_loading_enabled', '__return_false' );さいごに … SEOへの影響など
遅延読み込みを使うとgoogleなどの検索エンジンは画像を認識してくれないと言われています。対策として<noscript>タグを使うことや、 JSON-LDなどの構造化データを使うとSEOへの影響はないとのこと。
以上の対策ができない場合はWordPressの遅延読み込み系プラグインを使ったほうが良いでしょう。例えば以下のプラグインは有名です。
- a3 Lazy Load
- Native Lazyload
今回はWordPressでプラグインなしで画像を遅延読み込みする方法を紹介しました。表示速度を改善したい、jQueryを使わずに実装したい、ブラウザに負担をかけたくない方におすすめの方法です。
