HTMLだけでネイティブ画像遅延読み込み

Web開発者は常にページパフォーマンスを最適化する方法を模索しており、画像は最も大きな課題となることが多いです。JavaScriptライブラリが長年にわたって遅延読み込みソリューションを支配してきましたが、現在のモダンブラウザは単純なHTML属性を通じてネイティブ画像遅延読み込みをサポートしています。この組み込み機能により、外部依存関係の必要性がなくなり、すべての主要ブラウザで信頼性の高いパフォーマンス向上を実現できます。

この記事では、HTMLのみを使用してネイティブ画像遅延読み込みを実装する方法を説明し、ブラウザサポート、ベストプラクティス、およびサイトのパフォーマンスに影響を与える可能性のある一般的な落とし穴について説明します。

ネイティブ画像遅延読み込みとは？

ネイティブ画像遅延読み込みは、ブラウザの組み込み機能を活用して、画像が必要になるまで画像の読み込みを延期します。ページが最初にレンダリングされるときにすべての画像を読み込む代わりに、ブラウザは画像がビューポートに入るタイミングを計算し、表示される直前に読み込みます。

このアプローチがJavaScriptベースのソリューションと異なる点は以下の通りです：

• 追加のコードやライブラリが一切不要
• JavaScriptが無効でも動作する
• 読み込み判定に最適化されたブラウザアルゴリズムを使用
• 異なるデバイスや接続速度で一貫した動作を提供

ブラウザは、ビューポート距離、接続速度、読み込み閾値に関するすべての複雑な計算を自動的に処理します。

ネイティブ遅延読み込みのブラウザサポート

loading属性の現在のブラウザサポートは、すべての主要ブラウザをカバーしています：

• Chrome: 77+ (2019年9月)
• Firefox: 75+ (2020年4月)
• Safari: 15.4+ (2022年3月)
• Edge: 79+ (2020年1月)

これは世界のブラウザ使用率の95%以上を表しており、ネイティブ遅延読み込みはほとんどのWebサイトにとって信頼できる選択肢となっています。この属性をサポートしていないブラウザは単純にそれを無視し、画像を通常通り読み込むため、悪影響はありません。

loading属性：コア実装

loading属性は3つの値を受け入れます：

lazy

画像がビューポートから計算された距離に到達するまで読み込みを延期します：

<img src="product-image.jpg" loading="lazy" alt="Product description" width="400" height="300">

eager

ビューポート位置に関係なく即座に読み込みを強制します（これがデフォルトの動作です）：

<img src="hero-image.jpg" loading="eager" alt="Hero section" width="800" height="400">

auto（非推奨）

以前はブラウザに判断を委ねていましたが、この値は非推奨となっており、使用すべきではありません。

必須のベストプラクティス

常に寸法を含める

ネイティブ画像遅延読み込みを実装する際の最も重要な側面は、画像の寸法を指定することです。width属性とheight属性がないと、ブラウザは画像のスペースを確保できず、レイアウトシフトが発生します：

<!-- 正しい実装 -->
<img src="gallery-1.jpg" loading="lazy" alt="Gallery image" width="300" height="200">

<!-- インラインスタイルを使用した代替案 -->
<img src="gallery-2.jpg" loading="lazy" alt="Gallery image" style="width: 300px; height: 200px;">

寸法が指定されていない場合、画像は0×0ピクセルにデフォルト設定されます。これにより、ブラウザがすべての画像がビューポートに収まると仮定し、すべてを即座に読み込むトリガーとなる可能性があります。

ファーストビュー画像には遅延読み込みを適用しない

初期ページ読み込み時に表示される重要な画像には、loading="lazy"を使用してはいけません。これには以下が含まれます：

• ヒーロー画像
• ロゴ画像
• 最初の数個の商品画像
• 初期ビューポート内の任意の画像

<!-- ファーストビュー画像 - 即座に読み込み -->
<img src="hero-banner.jpg" alt="Main banner" width="1200" height="600">
<img src="featured-product.jpg" alt="Featured item" width="400" height="300">

<!-- ファーストビュー以下の画像 - 遅延読み込み -->
<img src="product-4.jpg" loading="lazy" alt="Product 4" width="400" height="300">
<img src="product-5.jpg" loading="lazy" alt="Product 5" width="400" height="300">

レスポンシブ画像での遅延読み込み

<picture>要素を使用するレスポンシブ画像の場合、フォールバック<img>要素にのみloading属性を追加します：

<picture>
  <source media="(min-width: 800px)" srcset="large-image.jpg 1x, large-image-2x.jpg 2x">
  <source media="(min-width: 400px)" srcset="medium-image.jpg 1x, medium-image-2x.jpg 2x">
  <img src="small-image.jpg" loading="lazy" alt="Responsive image" width="400" height="300">
</picture>

ブラウザの距離閾値の仕組み

ブラウザは画像がビューポートに正確に入るまで待つのではなく、接続速度に基づいた距離閾値を使用します：

• 4G接続: 画像はビューポートから約1,250px離れた位置で読み込み開始
• 3G以下: 画像はビューポートから約2,500px離れた位置で読み込み開始

これらの閾値により、ユーザーがスクロールする前に画像の読み込みが完了することが保証されます。テストでは、4Gネットワークでの遅延読み込み画像の97.5%が、表示されてから10ms以内に完全に読み込まれました。

一般的な実装課題

レイアウトシフトの防止

適切な寸法がないと、遅延読み込みはCumulative Layout Shift（CLS）を増加させる可能性があります。常に正確な寸法を指定するか、CSSを使用してアスペクト比を維持します：

.lazy-image {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}

非表示画像

display: noneを持つ画像は、Chrome、Safari、Firefoxで遅延読み込みされません。ただし、opacity: 0やvisibility: hiddenで非表示にされた画像は読み込まれます。実装を徹底的にテストしてください：

<!-- 遅延読み込みされない -->
<img src="hidden.jpg" loading="lazy" style="display: none;">

<!-- 遅延読み込みされる -->
<img src="hidden.jpg" loading="lazy" style="opacity: 0;">

カルーセルとスライダー画像

Chrome 121では、水平スクロール画像の動作が変更されました。カルーセル画像は現在、垂直スクロールと同じ閾値を使用するため、表示される前に読み込まれます。これによりユーザーエクスペリエンスが向上しますが、帯域幅使用量が増加します。

古いブラウザ向けのJavaScriptフォールバック

より広範なブラウザサポートのために、プログレッシブエンハンスメントアプローチを実装します：

<!-- フォールバック付き遅延読み込み -->
<img data-src="image.jpg" loading="lazy" alt="Description" width="400" height="300" class="lazy-fallback">

<script>
if ('loading' in HTMLImageElement.prototype) {
  // ネイティブ遅延読み込みがサポートされている
  const images = document.querySelectorAll('img[loading="lazy"]');
  images.forEach(img => {
    img.src = img.dataset.src;
  });
} else {
  // フォールバックライブラリを読み込み
  const script = document.createElement('script');
  script.src = 'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.2/lazysizes.min.js';
  document.body.appendChild(script);
}
</script>

パフォーマンスへの影響と指標

ネイティブ画像遅延読み込みの実装により、通常以下の効果が得られます：

• 初期ページ読み込み時間の20-50%短縮
• 帯域幅使用量の30-60%削減
• Core Web Vitalsスコアの改善
• 低速接続でのユーザーエクスペリエンス向上

PageSpeed InsightsやWebPageTestなどのブラウザ開発者ツールやパフォーマンス監視サービスを使用して実装を監視してください。

実装のテスト

ブラウザ開発者ツール

Chrome DevToolsを使用して遅延読み込みを確認します：

1. DevToolsを開く（F12）
2. Networkタブに移動
3. “Img”でフィルタリング
4. ページをリロードしてゆっくりスクロール
5. 画像がビューポートに近づくにつれて読み込まれるのを観察

ネットワークスロットリング

異なる接続速度をテストします：

1. DevToolsでNetworkタブに移動
2. スロットリングドロップダウンから”Slow 3G”または”Fast 3G”を選択
3. 読み込み閾値がどのように変化するかを観察

エッジケースと制限事項

印刷動作

ユーザーがページを印刷する際、loading属性に関係なくすべての画像が即座に読み込まれます。これにより、印刷されたドキュメントにすべての画像が含まれることが保証されます。

SEOへの考慮事項

検索エンジンクローラーは問題なく遅延読み込み画像にアクセスできます。loading属性はSEOに悪影響を与えず、ページ読み込みの高速化は検索ランキングを改善する可能性があります。

背景画像

loading属性は<img>と<iframe>要素でのみ動作します。背景画像については、Intersection Observer APIを使用したJavaScriptソリューションが必要です。

まとめ

ネイティブ画像遅延読み込みは、外部依存関係なしにページパフォーマンスを改善するシンプルで効果的な方法を提供します。ファーストビュー以下の画像にloading="lazy"属性を追加し、寸法やビューポートの考慮事項に関するベストプラクティスに従うことで、初期ページ読み込み時間と帯域幅使用量を大幅に削減できます。

成功する実装の鍵は、遅延読み込みをいつ使用するかを理解し、常に画像の寸法を指定し、異なるデバイスや接続速度でテストすることにあります。広範なブラウザサポートとゼロオーバーヘッドにより、ネイティブ遅延読み込みはすべてのフロントエンド開発者のパフォーマンス最適化ツールキットの一部であるべきです。

よくある質問