くまだどうも、くまだです。
サイトスピードを上げる施策で、画像遅延読み込みについて。
画像遅延読み込み
画像遅延読み込みは、ブラウザの画面領域にある画像のみ読み込み、領域外の画像は読み込まないことで、画像表示を高速化させる方法です。
JavaScriptを使ってやる方法と、JavaScriptを使わないでやる方法があります。
JavaScriptを使わないでやる場合は下記のような感じで書きます。
<img src="img.png" loading="lazy">loading=”lazy”をいれるだけ。
ただし、上のやり方は最新のブラウザには対応しているものの、古いバージョンのブラウザには対応していません。もし古いブラウザの対応を考えなければ、上の記述だけでもOK。
もし古いブラウザにも対応するなら、JavaScriptで対応します。
JavaScriptで画像遅延読み込み対応 Lazy Load
Lazy Loadという遅延読み込みを行うためのライブラリを使用します。以下のサイトから入手できます。
ローカルにファイルを落として使ってもいいし、CDNで実装してもいいです。
CDNで実装する場合は、以下のコードをhead内かbodyタグのどちらかに配置します。
<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js"></script>imgタグには以下のように書き換えます。
<img class="lazyload" data-src="img.png">（レイアウトシフト対策でwidth属性やheight属性も必要ですが、今回の説明では割愛してます。）
lazyloadクラスを付与し、src属性はdata-src属性に書き換えます。
そしてJavaScriptでは、以下の記述が必要です。
lazyload();これで古いブラウザ対応用のJavaScriptを使った画像遅延読み込みができます。
サイトの読み込み速度が遅いと、ユーザーの離脱につながるので、こういった施策が必要になります。
ここまで読んでくださりありがとうございました。