JavaScript

画像の遅延読込みでウェブサイト速度を改善！lazysizes.jsの使い方ガイド

  /

lazysizes.jsを使ってサイトに掲載してる画像を遅延読込し表示させる方法をご紹介します。
ウェブサイトのパフォーマンスを改善する方法は数多くありますが、その中でも特に効果的なのが「画像の遅延読込み」です。
今回は、この技術を使ってサイトの表示速度を向上させる方法について詳しく説明していきます。
SEOにも影響するこの手法は、サイト訪問者に快適なブラウジング体験を提供し、Googleの「PageSpeed Insights」での評価を向上させることができます。

Contents

はじめに：遅延読込みとは？

遅延読込み（Lazy Loading）は、ウェブページ上の画像やビデオなどのメディアコンテンツを、それらが必要になるまで読み込まない技術です。たとえば、ユーザーがページをスクロールして初めてその画像が表示される範囲に入った時に読み込むようにします。これにより、初期のページロード時間が短縮され、パフォーマンスが向上します。

lazysizes.jsの活用

lazysizes.jsは、非常に人気のある軽量で柔軟な遅延読込みスクリプトです。このライブラリを使うと、簡単に画像の遅延読込みを実装できます。ここでは、lazysizes.jsを使用して遅延読込みを実装する方法に焦点を当てます。

CSSの設定

まず、基本的なCSSを設定します。以下は例ですが、必要に応じてカスタマイズしてください。

<style type="text/css">
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
  padding: 0;
  margin: 0;
  line-height: 1.8em;
}
h1{
  font-size:16px;
  text-align:center;
  font-weight:normal;
  padding:10px 0;
  position: relative;
}
.wrap1{
  width: 90%;
  margin: 0 auto;
  padding-top: 800px;
  text-align: center;
}
.wrap2{
  width: 90%;
  margin: 0 auto;
  padding-top: 800px;
  text-align: center;
}
</style>
<!-- lightgallery.js CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery-js/1.2.0/css/lightgallery.min.css" />

HTMLの設定

次に、HTMLを設定します。ここでは、imgタグに「class=”lazyload”」を追加し、srcにはローディング中に表示する軽量な画像（例えば「src=”loading.gif”」）を指定し、「data-src=”～”」に遅延読込みする本来の画像のURLを設定します。

<h1>下にスクロールすると2枚の画像を遅延読込・表示します</h1>

<div class="wrap1">
<img class="lazyload" src="loading.gif" data-src="technology-1283624_1280.jpg" alt="">
</div>
<div class="wrap1">
<img class="lazyload" src="loading.gif" data-src="capwp210804-768x768.jpg" alt="">
</div>

JavaScriptの設定

最後に、JavaScriptを設定します。ページの下部に以下のスクリプトタグを追加するだけで、lazysizes.jsが機能します。

<script src="lazysizes.min.js"></script>

lazysizes.jsを使って画像を遅延読込するデモページ

lazysizes.jsを使った遅延読込みのデモページを用意しました。実際にどのように機能するかを確認できます。

lazysizes.jsを使って画像を遅延読込するデモ

lazysizesのソース元

lazysizes.jsのソースファイルは以下のリンクからダウンロードできます。

lazysizes

まとめ

画像の遅延読込みは、ウェブサイトのパフォーマンスを大幅に改善するシンプルで効果的な方法です。SEOの観点からも重要であり、ユーザー体験を向上させることができます。
lazysizes.jsを使用することで、この技術を簡単に実装でき、サイトの表示速度を向上させることが可能です。ぜひこの方法を試してみてください。

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

lazysizes.js 画像遅延読込
関連記事