はてなブログに Lozad.js を導入して画像を遅延読み込みする方法
jQuery を必要とせず単独で動作する。
Lazy load （遅延読み込み）ライブラリの中では軽量らしい。
SEO的にも不利にはならないらしい。
そんな素敵ライブラリの Lozad.js を、はてなブログでも使ってみる。
Lozad.js の使い方
テンプレートへ Lozad.js を仕込む
はてなブログのダッシュボードから「デザイン設定」をクリック。
「デザイン設定」の画面に移ったらスパナのアイコン（カスタマイズ）をクリック。
カスタマイズのメニューが出てきたら「フッタ」をクリック。
出現したテキストエリアをクリック。
するとテキストエディタ風なのが出てくるので、そこに以下のコードをコピー＆ペースト。
<!-- 画像の遅延読み込み --> <script type="text/javascript" src="//cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script> <script> const observer = lozad(); // lazy loads elements with default selector as '.lozad' observer.observe(); </script>
以上でテンプレートへの仕込みは完了です。
記事内の HTML タグを加工。
- img タグに .lozad のクラスを付ける。
- src を空にする。または代替画像（縮小版やローディング画像など）の URL にする。
- data-src に目的の画像の URL をセットする。
例）
<img class="lozad" data-src="image.jpg">
srcset を使う場合は data-srcset に
例）
<img class="lozad" data-src="image.jpg" data-srcset="image1.jpg 600w, image2.jpg 900w, image3.jpg 1200w">
背景画像として遅延ロードすることもできます。
- 背景画像を表示する要素に .lozad のクラスを付ける。
- css で背景画像の指定をしない、または縮小版の URL を指定しておく。
- data-background-image で背景画像の URL を指定する。
例）
<div class="lozad" data-background-image="bg-image.jpg"> ... </div>
iframe や javascript も画像と同じ要領で遅延ロードできます。
例）
<iframe class="lozad" data-src="index.html"></iframe> <script src="script.js"></script>
Lozad.js の使用例
遅延読み込みライブラリ Lozad.js を試す - In my mind
参考
Lozad.js 公式サイト
日本語での解説はこちらが詳しい。
