こんにちは。FASTCODINGデザイナーの七転び八重子です。
大量の画像を表示するWebページは、表示速度が遅くなりがちです。ページ速度が遅くなると、ブラウザが重くなるので、画面操作に支障が出て、UIが低下してしまいます。対処方法として、CSSスプライトやExpiresヘッダーを利用する方法がありますが、今回は「Lazy Load（レイジーロード）」を利用して、画像を遅延ロードさせる事で、ページスピードを改善する方法をご紹介します。
目次
画像を遅延ロードさせる理由
ページにアクセスした瞬間からブラウザは、HTMLに含まれる全ての画像ファイルを読み込みます。全て読み込むということは、ビューポート内に存在しない画像（ユーザーがほとんど閲覧しない下部の画像）でも、読み込んでしまうので、当然ブラウザは重くなります。
そこで、ブラウザのビューポート内にある画像のみを読み込みし、それ以外にある画像はスクロール位置に合わせてロードさせる事で、ページスピードを高速化することができます。
遅延ロードの方法は２つ
遅延ロードさせる方法は、ブラウザのネイティブLazyload設定と、JavaScriptライブラリの使用の２つがあります。
2021年2月現在、72%のブラウザがネイティブで遅延ロード（loading属性）をサポートしています。
loading属性のサポート状況
現在のサポート状況を踏まえて、以下のポイントで実装してみます。
- ネイティブの遅延読み込みを設定。
- Lazyload未対応ブラウザでは、JavaScriptライブラリを設定。
- Lazyload対応ブラウザの場合、JavaScriptを読み込ませない。
※基本的に上記で良いのですが、レスポンシブコーディングで、このブラウザのネイティブlazyload機能を使用する場合、画像周りのスタイル設定（CSS設定）を追加する必要があります。（デザインに寄ります）
① ネイティブの遅延読み込みを設定。
loading=”lazy”を書いておくと、ブラウザによって適切なタイミングでロードされます。
<img
src="/path/sample.jpg"
alt="description（推奨）"
width="300"
height="300"
loading="lazy"
/>
loading属性を利用する事で、ブラウザはビューポート外の画像やiframeをスクロール位置に合わせて読み込みするようになります。
loading属性は3つの値をサポートします。
lazy：遅延ロードに適した値です。
eager：遅延ロードには適してません、すぐにロードする値です。
auto：遅延ロードするかどうかをブラウザに委ねます。
※loading属性を定義しない場合は、loading=autoを定義した場合と同じ。
② Lazyload未対応ブラウザでは、JavaScriptライブラリを設定。
合わせて、Lazyload未対応ブラウザの場合には、JavaScriptライブラリ「lazysizes」を適応させるように設定していきます。jQueryやVue.jsなどは必要ありません。ビューで検知した要素にClassを設定することで、背景画像や::befor,::afterにもLazyLoadを行う事が可能です。
scriptタグの配置
ダウンロード：aFarkas/lazysizes
<script src="https://cdn.jsdelivr.net/npm/lazysizes@5.2.2/lazysizes-umd.min.js" async></script>
imgタグに”lazyload”を追加
- class=”lazyload”を追加
- src属性ではなく、data-src属性で画像パスを指定する
- srcを空にしてはいけないので、1x1pxの透明な画像のプレースホルダーを使用
基本の設定
<img
src="/path/placeholder/1px.png"
data-src="/path/sample.jpg"
alt="description（推奨）"
width="300"
height="300"
class="lazyload"
loading="lazy"
/>
レスポンシブでpictureタグを使う場合
・「srcset」を「data-srcset」に変更します｡
<picture>
<source media="(max-width: 575px)" data-srcset="/path/apple@575w.jpg">
<source media="(max-width: 768px)" data-srcset="/path/apple@768w.jpg">
<source media="(max-width: 1200px)" data-srcset="/path/apple@1200w.jpg">
<img
src="/path/placeholder/1px.png"
data-src="/path/sample.jpg"
alt="description（推奨）"
width="300"
height="300"
class="lazyload"
loading="lazy"
/>
</picture>
③ Lazyload対応ブラウザの場合、JavaScriptを読み込ませない。
JavaScriptで、ユーザーが使用しているブラウザがネイティブLazyloadをサポートしているかどうかを検出します。
if ("loading" in HTMLImageElement.prototype) {
/* ネイティブの遅延読み込みをサポートしている場合 */
} else {
/* ネイティブの遅延読み込みをサポートしていない場合 */
}
JavaScriptの最終コード
<script>
if ("loading" in HTMLImageElement.prototype) {
var images = document.querySelectorAll('img[loading="lazy"]');
var sources = document.querySelectorAll("source[data-srcset]");
sources.forEach(function (source) {
source.srcset = source.dataset.srcset;
});
images.forEach(function (img) {
img.src = img.dataset.src;
});
} else {
var script = document.createElement("script");
script.src = "/link/to/lazyload.js";
document.body.appendChild(script);
}
</script>
lazyloadのサンプル
まとめ
画像の遅延ロードをまとめてみました。スマホなどのサイトは、縦に長くなるのでこの方法はページスピード対策におすすめしますが、レスポンシブデザインの場合に、ネイティブlazyload機能を使用する場合は、画像周りのスタイル設定（CSS設定）を追加する必要があります。（デザインに寄ります）
どちらにしても、Webサイトを制作する場合は、運用レベルまでしっかりと意識して、取り入れると良いと思います。
ページスピード対策でお困りですか？
