画像の遅延読み込みは、Webページの表示速度を高めるために重要な施策です。表示速度が遅いとユーザーの離脱やSEO順位の低下につながる恐れもあるため、最適化しておく必要があります。
そこで今回は、画像の遅延読み込みの重要性や設定方法について解説します。
「Webページの表示速度を上げてSEO対策したい」とお考えの方は、ぜひ参考にしてください。
目次
画像の遅延読み込みとは
画像の遅延読み込みとは、ブラウザで表示されている画面内の画像のみを読み込む仕組みです。Webページ内の画像をその都度読み込むため、表示速度が上がります。
画像の遅延読み込みの重要性
画像の遅延読み込みを導入すると、Webページ表示速度の向上が期待できます。
大量の画像が含まれるWebページは読み込みに時間がかかり、もどかしさを感じたユーザーは離脱してしまうでしょう。ユーザーの直帰率が上がったり、SEO順位が低下したりするリスクがあるため気をつけなければなりません。
ブラウザで表示されていない部分の画像は読み込まず、必要な部分だけ取得することで、Webページ表示速度が改善されます。
画像の読み込み速度を調べる方法
現時点でのWebページ表示速度は、PageSpeed Insightsを使って測定可能です。URLを入力するとWebページの分析がはじまり良い・要改善・不十分の3段階評価と改善案が提示されます。
PageSpeed Insightsで画像遅延読み込みを提案された場合は、Webサイトに反映することでさらなる集客効果が期待できます。
画像の遅延読み込みの設定方法
画像の遅延読み込みの設定方法は、主に次の5つです。
- EWWW Image Optimizer
- Autoptimize
- Lazy Load
- Intersection Observer
- lazysizes
どの設定方法を選ぶべきかは、パソコンの使用環境によって異なります。それぞれの方法について解説します。
EWWW Image Optimizer
EWWW Image OptimizerはWordPressのプラグインです。画質をなるべく落とさずに、画像を表示するときに自動でサイズを圧縮してくれます。
EWWW Image Optimizerを使った設定方法は次の通りです。
- EWWW Image Optimizerをインストールする
- 設定画面で「基本」タブ内の「遅延読み込み」にチェックを入れる
WordPressでWebサイトを運営している人であれば、数分で設定可能です。
Autoptimize
Autoptimizeは、WordPressのソースコードを圧縮できるプラグインです。遅延読み込みを含めた画像の最適化をはじめとして、HTML・CSS・JavaScriptの最適化も行えます。
Autoptimizeの使い方は次の通りです。
- Autoptimizeをインストールする
- 設定画面で「image」タブ内の「Lazy-load images」にチェックを入れる
EWWW Image Optimizerと同様に、WordPressを使っていれば数分で設定できます。自動で最適化してくれる便利なプラグインなので、WordPressを使っている人はいずれか1つを設定しておきましょう。
Lazy Load
Lazy Loadとは、JavaScriptライブラリの1つです。画像の遅延読み込みを行う方法として広く利用されています。
Lazy Loadによる画像の遅延読み込みの設定方法は次の通りです。
- GitHubからLazy Loadのscriptタグを取得する
- Webサイトのhead内またはbody内にscriptタグを配置する
- imgタグにclass=”lazyload”とdata-src属性を記述する
- bodyの最後でlazyload()関数を呼び出す
GitHubを使うことで、ソースコードを管理する手間が省けます。無料で利用できて開発効率も上がるため、積極的に活用すると良いでしょう。
Intersection Observer
Intersection Observerとは、特定の要素と指定した領域内の交差を検知するAPIです。Intersection Observerを使うと「画像（特定の要素）が画面（指定した領域）内に入ったときだけ表示する」という設定ができます。
Intersection Observerの使い方とタグの記述例は下記の通りです。
1.アクセス時に使用するための低容量のダミー画像を用意する
2.imgタグを記述する
| <img src=”picture/dummy.jpg” data-src=”sample.jpg” class=”imgdelay” width=”” height=”” alt=””> |
3.JavaScriptを追加する
|
<script> document.addEventListener(“DOMContentLoaded”, function() { var lazyImages = [].slice.call(document.querySelectorAll(“img.imgdelay”)); if (“IntersectionObserver” in window) { let lazyImageObserver = new IntersectionObserver(function(entries, observer) { entries.forEach(function(entry) { if (entry.isIntersecting) { let lazyImage = entry.target; lazyImage.src = lazyImage.dataset.src; if (typeof lazyImage.dataset.srcset === “undefined”) { }else{ lazyImage.srcset = lazyImage.dataset.srcset; } lazyImage.classList.remove(“imgdelay”); lazyImageObserver.unobserve(lazyImage); } }); }); lazyImages.forEach(function(lazyImage) { lazyImageObserver.observe(lazyImage); }); } else { // Possibly fall back to a more compatible method here } }); </script> |
4.Polyfillを読み込む
| <script src=”https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver”></script> |
以上4ステップを踏むことで、画像の遅延読み込みを設定できます。
lazysizes
lazysizesは、jQueryに依存しないJavaScriptライブラリです。レスポンシブ対応かつシンプルな使い勝手で、比較的導入しやすいライブラリといえるでしょう。
lazysizesによる画像の遅延読み込みの設定方法は次の通りです。
- GitHubからファイルをダウンロードする
- scriptタグを使ってファイル内のlazysizes.min.jsを読み込む
- 遅延読み込みしたい画像のclassにlazyloadを指定する
- src属性の代わりにdata-src属性を付与して画像URLを指定する
-
<img data-src=”picture.jpg” class=”lazyload” alt=”” >
-
画像の遅延読み込みライブラリは他にもたくさんありますが、今回紹介したものが使いやすくて一般的です。
画像の遅延読み込みが設定できないときの対処法
画像の遅延読み込みが設定できないときは、次のような原因が考えられます。
- ファイルサイズが大きすぎる
- 関数を呼び出すタイミングが不適切
それぞれの原因における対処法を解説します。
圧縮ツールで画像自体を最適化する
ファイルサイズが大きすぎると、画像の読み込みが遅くなる可能性があります。
画像のサイズを小さくしたり、圧縮ツールを使ったりしてファイルを軽くする必要があるでしょう。
関数を呼び出すタイミングを確認する
自分でコードを記述する際は、関数を呼び出すタイミングにも気をつけましょう。不適切なタイミングで関数を呼び出すと、画像が読み込まれない可能性があります。
例えばLazy Loadで画像の遅延読み込みを行う際は、bodyの最後でlazyload()関数を呼び出すのが一般的です。lazyload()関数を呼び出すタイミングが早すぎると、画像が読み込まれないといったトラブルが発生します。
まとめ：画像の遅延読み込みでSEO対策しよう
画像の遅延読み込みとは、Webページ内の画像を一気に読み込むのではなく、必要な分だけその都度読み込む仕組みです。大量の画像が含まれるWebページを表示するときは、画像の遅延読み込みを設定することで表示速度の向上が期待できます。
設定方法には、WordPressのプラグインを使う方法やJavaScriptライブラリを使う方法など、いくつか種類があります。パソコンの使用環境や目的に合わせた設定方法で、Webページの表示速度向上を目指しましょう。
弊社のSEOサービス「ランクエスト」では、お客様ごとに専任のコンサルタントがつき、戦略立案からコンテンツ制作、効果測定まで、すべて対応いたします。SEO対策にお悩みの方は、お気軽にご相談ください。
株式会社eclore Web Director / Marketing Director
デザイン専門学校を卒業後、2012年に入社。Web領域を中心に、コーポレートや採用サイト、メディアサイトなどのデザイン、コーディング業務に従事。また、リスティングを中心とした広告運用も担当。SEO・広告の観点で優位性のあるWeb制作を得意としています。Web制作数 年間100以上 / 広告運用額 年間2億円以上。
