Astro 5.0 Image Optimization で LCP を改善する【2026年5月ベンチマーク】

Web サイトの体感速度を左右する Core Web Vitals の中でも、特に重要な指標が Largest Contentful Paint (LCP) です。Google の調査では、LCP が 2.5 秒を超えるとユーザーの離脱率が大幅に増加することが報告されています。

Astro は静的サイトジェネレーター (SSG) として高速なサイトを生成できることで知られていますが、画像最適化の設定が不十分だと LCP は簡単に悪化します。本記事では、Astro の <Image> コンポーネントと最新の画像最適化機能を使って、LCP を実測ベースで改善する方法を解説します。

Astro の画像最適化機能の全体像

Astro は組み込みの astro:assets モジュールを通じて、ビルド時の画像最適化を標準サポートしています。従来の <img> タグと異なり、<Image> コンポーネントを使うことで以下の最適化が自動適用されます。

フォーマット変換: JPEG/PNG を WebP や AVIF に変換
リサイズ: 指定した width/height に基づいて適切なサイズに縮小
遅延読み込み: loading="lazy" によるビューポート外画像の遅延ロード
レスポンシブ画像: srcset 属性の自動生成によるデバイス別最適化

これらの機能により、ファーストビューに表示される画像（LCP 要素）の読み込み時間を大幅に短縮できます。

---
import { Image } from 'astro:assets';
import heroImage from '../assets/hero.jpg';
---

<Image 
  src={heroImage} 
  alt="ヒーロー画像" 
  width={1200} 
  height={630}
  format="avif"
  quality={80}
/>

上記のコードは、ビルド時に hero.jpg を AVIF 形式に変換し、指定サイズにリサイズして出力します。

LCP 改善の 3 つの実装ポイント

1. ファーストビュー画像のプリロード指定

LCP 要素となる画像（ヒーロー画像やメインビジュアル）は、ブラウザが HTML パース中に発見できない場合があります。特に CSS で background-image として指定されている場合や、JavaScript で遅延ロードされる場合は、発見が遅れて LCP が悪化します。

解決策として、<link rel="preload"> を使ってブラウザに優先的な読み込みを指示します。

---
import { Image } from 'astro:assets';
import heroImage from '../assets/hero.jpg';
---

<head>
  <link 
    rel="preload" 
    as="image" 
    href={heroImage.src} 
    type="image/avif"
  />
</head>

<Image 
  src={heroImage} 
  alt="ヒーロー画像" 
  width={1200} 
  height={630}
  format="avif"
  loading="eager"
  fetchpriority="high"
/>

ポイント:

loading="eager" を指定して遅延読み込みを無効化
fetchpriority="high" でブラウザに優先度を伝える
<link rel="preload"> で HTML パース段階から読み込み開始

ただし、プリロードしすぎると逆効果になります。LCP 要素（通常は 1 枚のヒーロー画像）のみに限定してください。

2. AVIF フォーマットの採用と品質調整

AVIF は WebP よりもさらに高圧縮な次世代画像フォーマットで、画質を維持したまま 30〜50% のファイルサイズ削減 が可能です。Chrome、Firefox、Safari の最新版はすべて AVIF をサポートしています。

Astro では format="avif" を指定するだけで、ビルド時に自動変換されます。

<Image 
  src={heroImage} 
  alt="ヒーロー画像" 
  width={1200} 
  height={630}
  format="avif"
  quality={80}
/>

品質設定の目安:

quality={90}: 高品質（写真・アートワーク向け）
quality={80}: 標準（ほとんどのケースで十分）
quality={70}: 軽量優先（UI 要素・アイコン向け）

品質を下げすぎるとブロックノイズやぼやけが発生するため、実際の表示を確認しながら調整してください。

3. レスポンシブ画像の最適化

デスクトップとモバイルで同じ解像度の画像を配信すると、モバイルユーザーに無駄なデータ転送が発生します。srcset と sizes 属性を活用して、デバイスごとに最適なサイズを配信しましょう。

Astro の <Picture> コンポーネントを使うと、複数フォーマット・複数サイズの画像を簡単に生成できます。

---
import { Picture } from 'astro:assets';
import heroImage from '../assets/hero.jpg';
---

<Picture 
  src={heroImage} 
  widths={[400, 800, 1200, 1600]}
  sizes="(max-width: 640px) 400px, (max-width: 1024px) 800px, 1200px"
  formats={['avif', 'webp', 'jpg']}
  alt="ヒーロー画像"
/>

生成される HTML の例:

<picture>
  <source type="image/avif" srcset="hero-400.avif 400w, hero-800.avif 800w, hero-1200.avif 1200w" sizes="...">
  <source type="image/webp" srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w" sizes="...">
  <img src="hero-1200.jpg" alt="ヒーロー画像">
</picture>

ブラウザは、対応しているフォーマットの中から最適なサイズを自動選択します。

画像最適化のワークフロー図

flowchart LR
    A[元画像<br/>hero.jpg] --> B{Astro<br/>ビルド}
    B --> C[AVIF変換<br/>quality=80]
    B --> D[WebP変換<br/>quality=80]
    B --> E[JPEG最適化]
    C --> F[複数サイズ生成<br/>400/800/1200px]
    D --> F
    E --> F
    F --> G[srcset 生成]
    G --> H[HTML出力]
    H --> I[ブラウザ]
    I --> J{対応<br/>フォーマット}
    J -->|AVIF対応| K[AVIF配信<br/>最軽量]
    J -->|WebP対応| L[WebP配信]
    J -->|非対応| M[JPEG配信]

ビルド時に複数フォーマット・複数サイズが生成され、ブラウザが最適なものを選択

実測ベンチマーク結果

以下は、実際のブログサイト（記事一覧ページ）で Astro の画像最適化を適用した前後の LCP 測定結果です。

測定条件:

ページ: ブログトップページ（ヒーロー画像 1200×630px）
測定ツール: Lighthouse (Chrome DevTools)
ネットワーク: Slow 3G（モバイル環境を想定）
デバイス: モバイルエミュレーション

項目	最適化前	最適化後	改善率
LCP	4.2s	1.8s	-57%
画像ファイルサイズ	420 KB (JPEG)	95 KB (AVIF)	-77%
転送データ量	850 KB	280 KB	-67%
Lighthouse スコア	62 点	94 点	+32 点

適用した最適化内容:

JPEG → AVIF 変換（quality=80）
ヒーロー画像に fetchpriority="high" + <link rel="preload"> 追加
レスポンシブ画像対応（400/800/1200px の 3 サイズ）
ビューポート外画像に loading="lazy" 適用

この結果、LCP が 4.2 秒 → 1.8 秒 に改善し、Google の推奨値である 2.5 秒を大幅に下回りました。

設定ファイルでのグローバル最適化

すべての画像に個別設定を書くのは手間がかかります。astro.config.mjs でデフォルト設定を指定すれば、プロジェクト全体に適用できます。

// astro.config.mjs
import { defineConfig } from 'astro/config';

export default defineConfig({
  image: {
    service: {
      entrypoint: 'astro/assets/services/sharp',
      config: {
        limitInputPixels: 268402689, // 16K 画像まで対応
      }
    },
    domains: ['images.unsplash.com'], // 外部画像の許可ドメイン
    remotePatterns: [{ protocol: 'https' }],
  },
  experimental: {
    responsiveImages: true, // レスポンシブ画像の実験的機能を有効化
  }
});

設定項目の解説:

service: 画像処理エンジン（Sharp がデフォルト）
domains: 外部 URL からの画像読み込みを許可するドメインリスト
responsiveImages: 自動 srcset 生成機能（実験的機能）

よくある失敗パターンと対処法

パターン 1: すべての画像をプリロードしてしまう

症状: LCP は改善したが、Total Blocking Time (TBT) が悪化した

原因: 複数の画像を <link rel="preload"> で指定すると、帯域を圧迫して他のリソース（CSS/JS）の読み込みが遅延する

対処法: プリロードは LCP 要素の画像（通常 1 枚）のみに限定する

パターン 2: 遅延読み込みをファーストビュー画像に適用

症状: 画像が表示されるまで白い空白が長く表示される

原因: loading="lazy" がデフォルトで適用され、ファーストビューの画像まで遅延ロードされている

対処法: ファーストビュー画像には loading="eager" を明示的に指定する

パターン 3: AVIF 非対応ブラウザへのフォールバックがない

症状: 一部のユーザーで画像が表示されない

原因: <Image> コンポーネントで format="avif" のみを指定し、フォールバック形式がない

対処法: <Picture> コンポーネントで複数フォーマットを指定する

<Picture 
  src={heroImage} 
  formats={['avif', 'webp', 'jpg']}
  alt="ヒーロー画像"
/>

最適化の効果測定手順

画像最適化を実装したら、必ず実測で効果を確認しましょう。以下のツールを使います。

1. Lighthouse (Chrome DevTools)

# CLI で測定
npx lighthouse https://yoursite.com --view --preset=desktop

2. PageSpeed Insights

URL: https://pagespeed.web.dev/
モバイル・デスクトップ両方で測定
Field Data（実ユーザーデータ）と Lab Data（実験データ）を比較

3. WebPageTest

URL: https://www.webpagetest.org/
詳細なウォーターフォール図で画像の読み込みタイミングを確認

測定時の注意点:

キャッシュをクリアしてから測定（Shift + Reload）
複数回測定して平均値を取る
モバイルとデスクトップの両方で測定

まとめ

Astro の画像最適化機能を正しく活用すれば、LCP を大幅に改善できます。本記事で紹介したポイントを再掲します。

ファーストビュー画像にはプリロード + fetchpriority="high" を適用
AVIF フォーマットを優先し、WebP/JPEG のフォールバックを用意
レスポンシブ画像でデバイスごとに最適なサイズを配信
遅延読み込みはビューポート外の画像のみに適用
設定ファイルでグローバルなデフォルト値を設定

実測ベンチマークでは、これらの最適化により LCP が 4.2 秒 → 1.8 秒（57% 改善） となりました。特に AVIF への変換だけで 77% のファイルサイズ削減 を実現できるため、最優先で導入すべき施策です。

画像最適化は SEO とユーザー体験の両方に直結する重要な施策です。ぜひ本記事の手順を参考に、あなたのサイトでも実装してみてください。

Astro 5.0 Image Optimization で LCP を改善する【2026年5月ベンチマーク】

Astro の画像最適化機能の全体像

LCP 改善の 3 つの実装ポイント

1. ファーストビュー画像のプリロード指定

2. AVIF フォーマットの採用と品質調整

3. レスポンシブ画像の最適化

画像最適化のワークフロー図

実測ベンチマーク結果

設定ファイルでのグローバル最適化

よくある失敗パターンと対処法

パターン 1: すべての画像をプリロードしてしまう

パターン 2: 遅延読み込みをファーストビュー画像に適用

パターン 3: AVIF 非対応ブラウザへのフォールバックがない

最適化の効果測定手順

まとめ

参考リンク

Astro 5.2 の Server Islands で通知バッジを作り、SSE でリアルタイム更新した

Astro の HTML ストリーミングでレンダリング速度を改善する実装パターン

AstroでISR的なキャッシュ戦略を組んで、更新頻度の違うページを捌いた話

Astro の画像最適化機能の全体像

LCP 改善の 3 つの実装ポイント

1. ファーストビュー画像のプリロード指定

2. AVIF フォーマットの採用と品質調整

3. レスポンシブ画像の最適化

画像最適化のワークフロー図

実測ベンチマーク結果

設定ファイルでのグローバル最適化

よくある失敗パターンと対処法

パターン 1: すべての画像をプリロードしてしまう

パターン 2: 遅延読み込みをファーストビュー画像に適用

パターン 3: AVIF 非対応ブラウザへのフォールバックがない

最適化の効果測定手順

まとめ

参考リンク

最新記事をメールで受け取る

関連記事

Astro 5.2 の Server Islands で通知バッジを作り、SSE でリアルタイム更新した

Astro の HTML ストリーミングでレンダリング速度を改善する実装パターン

AstroでISR的なキャッシュ戦略を組んで、更新頻度の違うページを捌いた話