画像の遅延読み込みでページ表示を高速化｜loading=”lazy”とJavaScriptの最適な使い分けとは

2025年7月15日

Webサイトの表示速度がユーザー体験やSEOに直結する現代において、「画像の遅延読み込み」は重要な施策の一つです。特にスマートフォンやタブレットの普及により、ページの表示スピードはビジネス成果に大きく影響します。この記事では、HTMLのloading="lazy"属性とJavaScriptを活用した画像の遅延読み込み手法を比較しながら、どのように導入すればパフォーマンスを最大化できるのか、実務者目線で徹底解説します。

遅延読み込みとは何か？基本を理解する

遅延読み込み（Lazy Loading）とは、Webページにおいて画面に表示されていない要素（主に画像や動画など）を後から読み込む技術です。ユーザーがスクロールして対象がビューポート（画面表示領域）内に入った時点でリソースを読み込むため、初期表示の速度が向上し、回線の帯域も効率的に使用されます。

検索エンジンのインデックス対象が拡大し、Core Web Vitalsがランキング要因として重要視される今、遅延読み込みは単なる技術的な選択肢ではなく、SEO対策の一部としても認識されています。特に画像の読み込みに関しては、表示速度と視覚的な第一印象の両方を左右するため、導入効果が非常に高いです。

HTMLでの基本：loading=”lazy”の概要と特徴

HTML5では、<img>タグにloading="lazy"という属性を付与するだけで、ブラウザが自動的に遅延読み込みを行ってくれるようになりました。これはGoogle Chrome、Firefox、Edgeなどの主要ブラウザで標準対応しており、軽量かつ簡単に導入できるのが大きな特徴です。

たとえば以下のような形で使用します：

<img src="example.jpg" alt="サンプル画像" loading="lazy">

この設定により、ユーザーが画像に到達するまでブラウザが読み込みを遅らせ、ページの初期描画速度が向上します。

ただし、Safariなど一部のブラウザでは完全にサポートされていない場合があるため、loading=lazy 対応ブラウザを把握しておくことも実務上は重要です。公式情報やMDNの更新を定期的に確認する運用体制が望まれます。

JavaScriptによる遅延読み込みの仕組みと活用場面

より高度な制御やブラウザ非対応環境への対応を求める場合は、JavaScriptによる実装が有効です。特にIntersection Observer APIを使った方法が主流で、画像の表示タイミングやアニメーション処理などの高度な演出が可能になります。

基本的な実装例：

const images = 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;
      observer.unobserve(img);
    }
  });
});

images.forEach(img => {
  observer.observe(img);
});

この方法では、HTML内の画像にdata-src属性でパスを指定しておき、スクロールで画像が表示領域に入った時点でsrcに切り替える仕組みとなっています。

この手法の利点は、背景画像やiframeにも応用が効くという点です。HTML属性では対応できない部分をJavaScriptで補完することで、対応の幅が広がります。

背景画像の遅延読み込みとCSSの工夫

画像遅延読み込みの課題の一つが、CSSで指定される背景画像です。background-imageはHTMLの<img>タグと異なり、loading="lazy"属性の恩恵を受けられません。

この場合、JavaScriptとの併用が必要になります。たとえば、画像を擬似的に非表示の状態でdata-bgとして持たせ、表示タイミングでCSSのbackground-imageを動的に適用する手法が使われます。

const bgTargets = document.querySelectorAll('.lazy-bg');
const bgObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const el = entry.target;
      el.style.backgroundImage = `url(${el.dataset.bg})`;
      observer.unobserve(el);
    }
  });
});

bgTargets.forEach(el => {
  bgObserver.observe(el);
});

このように、背景画像もJavaScriptで動的に読み込むことで、表示速度とユーザー体験の向上を両立できます。

loading=”lazy”が効かない？その原因と対処法

「loading=lazy 効かない」といった問題が起きる原因は複数あります。代表的なものとして、以下のようなケースが挙げられます：

対応していない古いブラウザで表示している
<img>タグにsrc属性が設定されていない、またはJavaScriptで上書きしている
レスポンシブ画像やsrcsetとの併用で意図しない挙動が発生
初期表示エリア（ファーストビュー）内にある画像は遅延対象にならない

とくに最後の点は見落とされがちです。loading="lazy"は、ファーストビューにある画像には効果がないため、上部にある画像はあえて通常読み込みにしておく必要があります。場合によってはCSSでマージンを調整し、遅延対象外にする工夫も検討しましょう。

CSSの遅延読み込みとの関係性

「CSS 遅延読み込み」というワードがあるように、画像だけでなくCSSファイル自体を遅延読み込みする設計も存在します。ただしこれは別の話で、CSSの遅延はFCP（First Contentful Paint）やLCP（Largest Contentful Paint）に悪影響を与えることもあります。

画像の読み込みとCSSの依存関係を整理し、重要なスタイルは<head>で即時読み込みし、後続の装飾的スタイルはJavaScriptなどで分割読み込みするのが定石です。画像だけでなくCSSの遅延設計も、全体最適を考えて導入する必要があります。