Agile育成ブログ
未来を変える喜びを
javascript

Lazy Loadとは?


Warning: count(): Parameter must be an array or an object that implements Countable in /home/xs638785/agile-software.site/public_html/wp-content/plugins/rich-table-of-content/functions.php on line 490

Lazy Load(レイジーロード)とは画像の遅延読み込みを行うためのJavaScriptライブラリです。遅延読み込みは画像の読み込みに時間差を設けて表示させ、画面表示の高速化を図るしくみです。

ブラウザは指定のページに含まれるすべての画像を一気に読み込ませようとします。画像ファイルの容量が多ければそれだけ読み込みには時間がかかるため、ネットワークやサーバーに負担がかかる点が懸念されます。そのため、防御策として、Lazy Loadという表示速度を高速化させる制御技術が用いられるようになりました。

Lazy Loadを活用すると、ユーザーが実際に見ている画面の外にある画像は読み込みません。下図のようなダミー画像を読み込ませておきます。スクロールして画像が画面に近づいた時点で本来の画像の読み込みを開始させます。つまり、ユーザーが見ている画面範囲に合わせて必要な分だけ画像表示させる画期的な技術なのです。

Lazy Loadを実装する方法

Lazy Loadを実装する方法として以下3つがあります。

【Lazy Loadの実装方法】

  • loading属性で実装する
  • JavaScriptのプラグインで実装する
  • WordPressのプラグインで実装する

loading属性で実装する

loading属性とはブラウザがネイティブ(標準機能)で搭載する遅延読み込みのタイミングを指定するものです。HTMLタグに追記するだけで使うことができます。loading属性ではimg要素(画像)やiframe要素(YouTubeやGoogleマップなど)を簡単に遅延読み込みできるのが特徴です。

具体的には、img要素やiframe要素に「loading=”lazy”」と追加します。

【img要素】

<img scr="画像のURL" alt="" loading="lazy">
img要素のloading属性記述方法

※「loading=”lazy”」の挿入場所はどこでもよい

【iframe要素】

<iframe src="埋め込むページのURL" loading="lazy"></iframe>
iframe要素のloading属性記述方法

※「loading=”lazy”」の挿入場所はどこでもよい

なお、widthとheight属性で画像表示サイズを指定することもできます。必須ではありませんが、ブラウザがページを読み込む際に、指定したサイズ分の画像のプレースホルダーを表示してテキスト読み込みを開始させるため、ユーザーの体感速度の向上につながります。ユーザビリティを考慮すると設置した方がよいでしょう

主なloading属性に対応しているメジャーなブラウザは以下の通りです。

  • Chrome
  • Edge
  • Firefox
  • Opera

2021年9月現在、safariは「実験的な機能」として追加しており、有効化すればテスト可能です。その他、loading属性に対応していないブラウザがありますが、サポートされていないブラウザではloading属性は無視されるため、従来通りの画像表示が行われます。

参考サイト:現時点の対応ブラウザ

ちなみに、loading属性は「Load」の他にもサポートされる値があるので覚えておくとよいでしょう。

  • auto:遅延読み込みするかどうかブラウザに委ねる ※loading属性を定義しない場合と同じ
  • eager:遅延ロードに適さない値のため、すぐにロードする

参考:Web用のブラウザレベルの画像の遅延読み込み(web.dev)

JavaScriptのライブラリで実装する

loading属性に対応していないブラウザの場合、JavaScriptライブラリ「Layzr.js」で実装します。具体的な手順は以下の通りです。

  • https://github.com/tuupola/lazyload」よりファイルのダウンロード
  • scriptタグの設定
  • class=”lazyload”とdata-src属性をimgタグに記述
  • lazyload()関数の実行

ファイルのダウンロード後、scriptタグを設置します。

scriptタグを設置

次に、imgタグを記述します。Imgタグに「class=”lazyload”」、data-src属性に画像パスを指定します。

data-src属性に画像パスを指定

最後にlazyload()関数を実行して終了です。

lazyload()関数を実行

なお、iframeの場合は以下のように設定します。

iframeの場合の設定方法

WordPressのプラグインで実装する

Lazyloadプラグイン

WordPressを利用している場合は、WordPressに搭載されているプラグイン機能を使って遅延読み込みを実装できます。WordPressでは、imgやiframeタグに「loading=”lazy”」が自動的に追加される仕様になっています。したがって、特別な設定もなく簡単に実装できます

WordPressのプラグインは複数リリースされていますが、今回は軽量かつ設定がシンプルな「Lazy Load–Optimize Images」を紹介します。WordPress初心者でも使いやすいプラグインです。

具体的な実装方法の流れは以下の通りです。

  • 管理画面のメニューの中にある「プラグイン」をクリックした後に「新規追加」をクリック
  • 検索窓「Lazy Load–Optimize Images」と入力
  • Lazy Load–Optimize Imagesの「今すぐインストール」をクリック
  • インストールが完了したら「有効化」ボタンをクリック
  • 管理画面のメニューの中にある「設定」から「LazyLoad」をクリック
  • 「Lazy Load – Optimize Images」の設定画面で「images」「Iframes & Videos」「Replace Youtube videos by thumbnail」にチェックをつける
  • 「SAVE CHENGES」をクリック

なお、⑥のチェック項目の意味は以下の通りです。

Lazy Load – Optimize Imagesのチェック項目

対象なる画像については、Wordpress公式サイトの「Lazy-loading images in 5.5 – Make WordPress Core」を参照してください。

ただし、Wordpressで自動的にLazy Loadが追加されるには条件があります。それは、画像タグの中に「width属性」と「height属性」が記述されていることです。なぜこのような条件があるのかというと、レイアウトシフト(画像レイアウトのズレ)を防止するためです。レイアウトシフトの発生はユーザビリティの低下やSEOの検索順位に影響がでるため注意が必要です。

You cannot copy content of this page