背景画像の遅延読み込みは、lazysizesとunveilhooksで実装する
Published 2021年3月6日 by

背景画像の遅延読み込みは、lazysizes と unveilhooks で実装する

Last updated on 2021年3月7日

こんにちは、mickです。

背景画像の遅延読み込みをする必要がでてきて方法を探していたら、見つけました。
そのメモ書きです。

使う環境は、WordPressです。

JavaScriptの lazysizes を使う

https://github.com/aFarkas/lazysizes

JavaScriptの lazysizes を使うと画像の遅延読み込みができるようになります。
さらに、背景画像の遅延読み込みには lazysizes のプラグイン unveilhooks を使います。

lazysizes と unveilhooks をダウンロードする

Github から lazysizes と unveilhooks をダウンロードしてきます。

lazysizes.min.js

lazysizes/plugins/unveilhooks/ls.unveilhooks.min.js

特にこだわりがなければ、軽量版の「lazysizes.min.js」と「ls.unveilhooks.min.js」をダウンロードです。

lazysizes と unveilhooks をサーバーに設置する

WordPressで設置する場合は、テーマフォルダの下にある（なければつくった）jsフォルダの下に2つのファイルを設置します。

WordPressで2つのファイルを読み込む

WordPressでJavaScriptを読み込むときは、functions.phpで次のように記述です。

function twpp_enqueue_scripts() {
  wp_enqueue_script( 
    'lazysizes-script', 
    get_stylesheet_directory_uri() . '/js/lazysizes.min.js',
    array(),
    false,
    true
  );
  wp_enqueue_script( 
    'unveilhooks-script', 
    get_stylesheet_directory_uri() . '/js/ls.unveilhooks.min.js',
    array('lazysizes-script'),
    false,
    true
  );
}

functions.phpを直接編集するよりは、プラグインを使うとより安全にできます。

カスタムフィールドを使ったカスタムCSSとカスタムJS【Code Snippets版】

HTMLを書き換える

背景画像として使っているHTMLの部分を次のように書き換えます。

<div class="lazyload" data-bg="bg-image.jpg">
  <!-- 中身 -->
</div>

これでOKです。

まとめ。

WordPresで使っている背景画像の遅延読み込みを lazysizes と unveilhooks で実装する方法を紹介しました。

あらかじめ遅延読み込みを意識したコーディングをする必要がありますが、一度使うとすぐになれます。

PageSpeed Insightsのスコアで遅延読み込みの警告がでる場合は、ぜひ試してみてください。
警告が消えますよ。

記事を読んでくれて嬉しいです。
今日もありがとうございました。

初稿 2021/03/06

参考URL

  1. 背景画像も遅延読み込み可能。万能Lazyloader、lazysizesの使い方
  2. 背景画像の遅延読み込み（lazy load）をするlazysizes.js

WordPress