ウェブサイト高速化。Lazy Loading（遅延読み込み）の実装方法

ウェブサイトの表示速度は、ユーザー体験だけでなく、SEOにとっても非常に重要な要素です。画像や動画が多いページでは、すべてのメディアを一度に読み込むと表示が遅くなってしまいます。
そこで役立つのがLazy Loading（レイジーローディング）、日本語で「遅延読み込み」と呼ばれる技術です。

今回は、Lazy Loadingの基本から、簡単に実装する方法までを解説します。

目次

Lazy Loadingとは？

Lazy Loadingは、ユーザーの画面に表示される直前まで、画像や動画の読み込みを遅らせる技術です。
例えば、ブログ記事の非常に長いページで考えてみましょう。ページの最下部にある画像は、ユーザーがスクロールしてそこまで到達するまでは読み込む必要がありません。Lazy Loadingを適用すると、その画像はユーザーがスクロールして画面に近づいた時点で初めて読み込まれます。

これにより、ページの初期表示が大幅に速くなり、ユーザーの待ち時間が短縮されます。

HTMLだけで実装する方法（loading属性）

最近のブラウザでは、JavaScriptを使わなくても、HTMLの<img>タグに**loading="lazy"**という属性を追加するだけで簡単にLazy Loadingを実装できます。
この方法は、最もシンプルで推奨されるやり方です。

実装例

<img src="your-image.jpg" alt="これはテスト画像です" loading="lazy">

たったこれだけです。ブラウザがこの属性を認識すると、画像がビューポート（画面の表示領域）に入ったときに初めて読み込みを開始します。
ただし、loading属性はまだすべてのブラウザでサポートされているわけではありません。主要なモダンブラウザ（Chrome、Edge、Firefox、Safariなど）は対応していますが、古いブラウザをサポートする必要がある場合は、JavaScriptを使った実装も考慮する必要があります。

JavaScriptで実装する方法（Intersection Observer API）

より詳細な制御が必要な場合や、古いブラウザにも対応させたい場合は、JavaScriptのIntersection Observer APIを使うのが一般的です。
このAPIは、特定の要素がビューポートに入ったかどうかを簡単に検出できます。

実装例

1. HTMLの準備

画像にdata-src属性で本来の画像パスを指定し、src属性には軽量なプレースホルダー画像（空白の画像など）を設定しておきます。

<img data-src="your-image.jpg" src="placeholder.jpg" alt="これはテスト画像です">

2. JavaScriptのコード

Intersection Observer APIを使って、画像が画面に入ったときにdata-srcの画像をsrcにセットする処理を実装します。

document.addEventListener("DOMContentLoaded", function() { 
	const lazyImages = document.querySelectorAll('img[data-src]');
	const observer = new IntersectionObserver((entries, observer) => { 
		entries.forEach(entry => { 
			if (entry.isIntersecting) { 
				const img = entry.target;
				img.src = img.dataset.src;
				img.removeAttribute('data-src');
				observer.unobserve(img);
			}
		});
	});
	lazyImages.forEach(image => { observer.observe(image); });
});

このコードは、data-src属性を持つすべての<img>要素を監視し、画面に表示された時点で画像パスをsrcにセットし、監視を停止します。

まとめ

Lazy Loadingは、ウェブサイトのパフォーマンスを劇的に改善する強力な手法です。

  • 最も簡単な方法：loading="lazy"属性をHTMLの<img>や<iframe>タグに追加する。
  • より柔軟な方法：JavaScriptのIntersection Observer APIを使用する。

サイトの目的やターゲットユーザーの環境に合わせて、最適な実装方法を選びましょう。Lazy Loadingを導入することで、ユーザーはより快適に、そして待ち時間なくコンテンツを楽しめるようになります。

関連記事