画像読み込みパフォーマンス改善

投稿日: 2024年6月29日

画像の読み込みパフォーマンスは、ウェブサイトの成功に直結する重要な要素です。Googleの調査によると、ページの読み込み時間が1秒から3秒に増加すると、直帰率は32%上昇します。本記事では、画像読み込みを高速化し、Core Web Vitalsスコアを改善するための包括的な戦略と実装方法を詳しく解説します。

画像読み込みがパフォーマンスに与える影響

典型的なWebページにおける画像の影響：

• ページ重量の64%：平均的なWebページで画像が占める割合
• HTTPリクエストの50%：画像読み込みによるリクエスト数
• LCP（最大コンテンツ描画）：75%のケースで画像が要因
• CLS（累積レイアウトシフト）：サイズ未指定の画像が主な原因
• FID（初回入力遅延）：重い画像処理がメインスレッドをブロック

Core Web Vitalsと画像最適化

LCP（Largest Contentful Paint）の改善

LCPは、ビューポート内で最も大きなコンテンツ要素が表示されるまでの時間です。多くの場合、これは画像です。

<!-- LCP画像の最適化 -->
<link rel="preload" as="image" href="hero-image.webp" type="image/webp">
<link rel="preload" as="image" href="hero-image.jpg" type="image/jpeg">

<picture>
  <source srcset="hero-image.webp" type="image/webp">
  <img src="hero-image.jpg" 
       alt="ヒーローイメージ" 
       width="1920" 
       height="600"
       fetchpriority="high">
</picture>

CLS（Cumulative Layout Shift）の防止

画像のサイズを事前に指定することで、レイアウトシフトを防ぎます：

<!-- アスペクト比を保持したレスポンシブ画像 -->
<style>
.image-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 アスペクト比 */
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

<div class="image-container">
  <img src="image.jpg" alt="説明" loading="lazy">
</div>

遅延読み込み（Lazy Loading）の実装

ネイティブLazy Loading

最もシンプルな実装方法：

<!-- ビューポート外の画像に適用 -->
<img src="image.jpg" 
     alt="商品画像" 
     loading="lazy"
     width="400" 
     height="300">

<!-- iframeにも適用可能 -->
<iframe src="video.html" 
        loading="lazy"
        width="560" 
        height="315"></iframe>

Intersection Observer APIを使用した高度な実装

class LazyImageLoader {
  constructor() {
    this.imageObserver = null;
    this.init();
  }

  init() {
    // オプション設定
    const options = {
      root: null,
      rootMargin: '50px 0px', // 50px手前から読み込み開始
      threshold: 0.01
    };

    this.imageObserver = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          this.loadImage(entry.target);
        }
      });
    }, options);

    // 対象画像を監視
    document.querySelectorAll('img[data-src]').forEach(img => {
      this.imageObserver.observe(img);
    });
  }

  loadImage(img) {
    // プレースホルダーから実画像への切り替え
    const src = img.dataset.src;
    const srcset = img.dataset.srcset;

    // 画像の事前読み込み
    const tempImg = new Image();
    tempImg.onload = () => {
      // フェードイン効果
      img.style.opacity = '0';
      img.src = src;
      if (srcset) img.srcset = srcset;
      
      requestAnimationFrame(() => {
        img.style.transition = 'opacity 0.3s';
        img.style.opacity = '1';
      });

      img.classList.add('loaded');
    };

    tempImg.src = src;
    this.imageObserver.unobserve(img);
  }
}

// 初期化
new LazyImageLoader();

プログレッシブ画像読み込み

LQIP（Low Quality Image Placeholder）

低品質のプレースホルダーから高品質画像へ段階的に表示：

<div class="progressive-image">
  <img class="preview" src="tiny-20x12.jpg" data-src="full-1920x1200.jpg" alt="風景">
  <noscript>
    <img src="full-1920x1200.jpg" alt="風景">
  </noscript>
</div>

<style>
.progressive-image {
  position: relative;
  overflow: hidden;
  background: #f0f0f0;
}

.preview {
  filter: blur(20px);
  transform: scale(1.1);
  transition: filter 0.3s, transform 0.3s;
}

.preview.loaded {
  filter: blur(0);
  transform: scale(1);
}
</style>

<script>
document.querySelectorAll('.progressive-image img').forEach(img => {
  const fullImage = new Image();
  fullImage.onload = function() {
    img.src = this.src;
    img.classList.add('loaded');
  };
  fullImage.src = img.dataset.src;
});
</script>

SVGプレースホルダー

極小サイズのSVGを使用したプレースホルダー：

// Base64エンコードされたSVGプレースホルダー
const placeholder = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' 
  viewBox='0 0 1920 1080'%3E%3Crect fill='%23f0f0f0' width='1920' height='1080'/%3E
  %3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.3em' fill='%23999' 
  font-family='sans-serif' font-size='30'%3ELoading...%3C/text%3E%3C/svg%3E`;

リソースヒントの活用

Preload

重要な画像を事前に読み込み：

<!-- 単一の画像 -->
<link rel="preload" as="image" href="important.jpg">

<!-- レスポンシブ画像 -->
<link rel="preload" as="image" 
      href="hero-mobile.jpg" 
      media="(max-width: 768px)">
<link rel="preload" as="image" 
      href="hero-desktop.jpg" 
      media="(min-width: 769px)">

<!-- 画像セット -->
<link rel="preload" as="image" 
      imagesrcset="image-480w.jpg 480w, 
                   image-800w.jpg 800w, 
                   image-1200w.jpg 1200w" 
      imagesizes="(max-width: 600px) 100vw, 50vw">

Prefetch

次に必要になる可能性の高い画像を先読み：

<!-- 次のページの画像 -->
<link rel="prefetch" href="next-page-hero.jpg">

<!-- JavaScriptで動的に追加 -->
<script>
// ユーザーの行動に基づいて先読み
document.addEventListener('mouseover', (e) => {
  const link = e.target.closest('a');
  if (link && link.dataset.prefetchImage) {
    const prefetchLink = document.createElement('link');
    prefetchLink.rel = 'prefetch';
    prefetchLink.href = link.dataset.prefetchImage;
    document.head.appendChild(prefetchLink);
  }
});
</script>

画像配信の最適化

CDNの活用

画像専用CDNサービスの利点：

• 地理的分散：ユーザーに最も近いサーバーから配信
• 自動最適化：デバイスに応じた形式・サイズ変換
• キャッシュ管理：効率的なブラウザ・エッジキャッシュ

// Cloudflare Workers での画像最適化
addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  const url = new URL(request.url);
  
  // 画像リクエストの場合
  if (/\.(jpg|jpeg|png|webp)$/i.test(url.pathname)) {
    const accept = request.headers.get('Accept');
    const cache = caches.default;
    
    // WebP対応確認
    const supportsWebP = accept && accept.includes('image/webp');
    
    // キャッシュキー生成
    const cacheKey = new Request(
      url.toString() + (supportsWebP ? '.webp' : ''),
      request
    );
    
    // キャッシュ確認
    let response = await cache.match(cacheKey);
    
    if (!response) {
      // 画像を取得して最適化
      response = await fetch(request);
      
      if (supportsWebP && response.ok) {
        // WebPに変換（実際の実装では画像処理APIを使用）
        response = new Response(response.body, {
          headers: {
            ...response.headers,
            'Content-Type': 'image/webp',
            'Cache-Control': 'public, max-age=31536000'
          }
        });
      }
      
      // キャッシュに保存
      event.waitUntil(cache.put(cacheKey, response.clone()));
    }
    
    return response;
  }
  
  return fetch(request);
}

HTTP/2 Server Push

重要な画像をHTMLと同時に配信：

// .htaccess での設定
<FilesMatch "\.html$">
  Header add Link "</images/hero.jpg>; rel=preload; as=image"
  Header add Link "</images/logo.png>; rel=preload; as=image"
</FilesMatch>

// Node.js (Express) での実装
app.get('/', (req, res) => {
  res.setHeader('Link', [
    '</images/hero.jpg>; rel=preload; as=image',
    '</images/logo.png>; rel=preload; as=image'
  ].join(', '));
  
  res.sendFile('index.html');
});

Service Workerによるキャッシュ戦略

// service-worker.js
const CACHE_NAME = 'image-cache-v1';
const IMAGE_CACHE_MAX_AGE = 30 * 24 * 60 * 60 * 1000; // 30日

self.addEventListener('fetch', event => {
  // 画像リクエストの処理
  if (event.request.destination === 'image') {
    event.respondWith(
      caches.open(CACHE_NAME).then(cache => {
        return cache.match(event.request).then(cachedResponse => {
          if (cachedResponse) {
            // キャッシュの有効期限確認
            const dateHeader = cachedResponse.headers.get('date');
            if (dateHeader) {
              const cachedDate = new Date(dateHeader).getTime();
              const now = Date.now();
              
              if (now - cachedDate < IMAGE_CACHE_MAX_AGE) {
                return cachedResponse;
              }
            }
          }
          
          // ネットワークから取得
          return fetch(event.request).then(networkResponse => {
            // 成功レスポンスのみキャッシュ
            if (networkResponse.ok) {
              cache.put(event.request, networkResponse.clone());
            }
            return networkResponse;
          }).catch(() => {
            // オフライン時のフォールバック
            return cachedResponse || new Response('', {
              status: 404,
              statusText: 'Not Found'
            });
          });
        });
      })
    );
  }
});

パフォーマンス測定と監視

Performance APIによる測定

// 画像読み込みパフォーマンスの測定
const measureImagePerformance = () => {
  const perfEntries = performance.getEntriesByType('resource')
    .filter(entry => entry.initiatorType === 'img');
  
  const metrics = perfEntries.map(entry => ({
    url: entry.name,
    duration: entry.duration,
    size: entry.transferSize,
    cached: entry.transferSize === 0,
    protocol: entry.nextHopProtocol
  }));
  
  // 分析
  const avgDuration = metrics.reduce((acc, m) => acc + m.duration, 0) / metrics.length;
  const totalSize = metrics.reduce((acc, m) => acc + m.size, 0);
  const cacheHitRate = metrics.filter(m => m.cached).length / metrics.length * 100;
  
  console.log({
    totalImages: metrics.length,
    averageLoadTime: avgDuration.toFixed(2) + 'ms',
    totalSize: (totalSize / 1024 / 1024).toFixed(2) + 'MB',
    cacheHitRate: cacheHitRate.toFixed(2) + '%'
  });
};

// ページ読み込み完了後に実行
window.addEventListener('load', () => {
  setTimeout(measureImagePerformance, 1000);
});

Real User Monitoring (RUM)

// Core Web Vitals の測定
import {getCLS, getFID, getLCP} from 'web-vitals';

function sendToAnalytics(metric) {
  // Google Analytics に送信
  gtag('event', metric.name, {
    value: Math.round(metric.value),
    metric_id: metric.id,
    metric_value: metric.value,
    metric_delta: metric.delta
  });
}

getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getLCP(sendToAnalytics);

まとめ

画像読み込みパフォーマンスの改善は、単一の手法では達成できません。遅延読み込み、適切なフォーマット選択、CDNの活用、キャッシュ戦略など、複数のアプローチを組み合わせることで、最適な結果を得ることができます。また、継続的な測定と改善が重要です。Zcompressのような画像最適化ツールと、本記事で紹介した技術を組み合わせることで、優れたユーザー体験を提供できるでしょう。

関連記事：画像SEO最適化の完全ガイド | モバイル向け画像最適化