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

こんにちは、mickです。

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

使う環境は、WordPressです。

JavaScriptの lazysizes を使う
まとめ。

JavaScriptの lazysizes を使う

GitHub - aFarkas/lazysizes: High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.

HighperformanceandSEOfriendlylazyloaderforimages(responsiveandnormal),iframesandmore,thatdetectsanyvisibilitychangestriggeredthroughuserinteraction,CSSorJavaScr...

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を直接編集するよりは、プラグインを使うとより安全にできます。

HTMLを書き換える

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

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

これでOKです。

まとめ。

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

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

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

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

初稿 2021/03/06

参考URL