「3秒の壁」でユーザーは離脱する。Webサイト高速化のための画像最適化テクニック

「3秒の壁」を超えろ#

Amazonの調査では、「ページの表示速度が0.1秒遅れるごとに売上が1%減少する」というデータがあります。Googleも**「読み込みに3秒以上かかると、モバイルユーザーの53%は離脱する」**と公表しています。 Webサイトの表示速度（パフォーマンス）は、単なる技術的な指標ではなく、ビジネスの収益を直接左右するKPIです。

そして、現代のWebサイトにおいて、ページ容量の大部分（平均して50%以上）を占めているのが「画像」です。 つまり、画像の最適化こそが、パフォーマンス改善の最も効果的な近道なのです。

1. 次世代フォーマット (WebP / AVIF) の活用#

従来の JPEG や PNG に代わり、圧縮率の高い次世代フォーマットを使用しましょう。

• WebP (ウェッピー): Googleが開発。JPEGと同等の画質で約30%軽量。ほぼ全てのモダンブラウザで対応。
• AVIF (エーブイアイエフ): WebPよりさらに高圧縮。対応ブラウザも増えてきており、現在はこれが最強の選択肢です。

Next.js Image コンポーネントの魔法

Next.js を使っているなら、next/image コンポーネントを使うだけで、ブラウザの対応状況に応じて自動的に WebP や AVIF に変換・配信してくれます。

import Image from 'next/image'
import heroPic from './hero.jpg'

export default function Page() {
  return (
    <Image
      src={heroPic}
      alt="Hero Image"
      placeholder="blur" // 読み込み中のボカシ表示
      priority // ファーストビュー（LCP）の画像は優先読み込み
    />
  )
}

2. 遅延読み込み (Lazy Loading)#

画面外にある画像（スクロールしないと見えない画像）まで最初に読み込む必要はありません。 Lazy Loading を導入することで、ユーザーが見ている範囲の画像だけを読み込み、初期通信量を大幅に削減できます。

HTML標準の loading="lazy" 属性を使えば、JavaScript不要で実装できます。

<img src="large-photo.jpg" alt="Photo" loading="lazy" width="800" height="600">

※ 注意：ファーストビュー（最初に見える範囲）にある画像に loading="lazy" をつけると、逆に表示が遅れ、LCP (Largest Contentful Paint) のスコアが悪化します。ファーストビューの画像は eager（または指定なし）、それ以外は lazy という使い分けが重要です。

3. 適切なサイズでの配信 (Responsive Images)#

スマホ（幅375px）で閲覧しているユーザーに、PC用（幅1920px）の巨大な画像を送りつけるのは帯域の無駄です。 srcset 属性を使って、デバイス幅に応じた最適なサイズの画像をブラウザに選ばせましょう。

<img src="photo-800.jpg"
     srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Responsive Photo">

Next.js の <Image /> コンポーネントなら、これも自動でやってくれます。

4. Core Web Vitals への影響#

画像の最適化は、Googleの重要指標 Core Web Vitals のすべてに好影響を与えます。

• LCP (読み込み時間): 画像容量が減れば、メインコンテンツの表示が速くなる。
• CLS (視覚的安定性): 画像に width/height を指定することで、レイアウトシフトを防ぐ（別記事参照）。
• INP (応答性): 通信負荷が減れば、メインスレッドが空き、ユーザー操作への反応が良くなる。

「画像を変える」。たったそれだけで、ユーザー体験とSEO順位の両方を劇的に向上させることができるのです。