Core Media Lab記事一覧
開発・インフラ

microCMSの画像最適化（imgix）とAstroを組み合わせてPageSpeed Insights 100点を目指す高速化ガイド

microCMSの画像最適化（imgix）とAstroを組み合わせてPageSpeed Insights 100点を目指す高速化ガイド

静的サイトジェネレーターの「Astro」とヘッドレスCMSの「microCMS」を組み合わせたWebメディアは、不要なJavaScriptを排除したゼロJS設計によって、初期状態でも非常に高い表示速度を誇ります。

しかし、記事数が20本、30本と増え、高解像度なアイキャッチ画像やスクリーンショットをそのままアップロードし始めると、Googleの「PageSpeed Insights（特にモバイル計測）」で「次世代フォーマットでの画像の配信」「適切なサイズの画像」「最大視覚コンテンツの描画（LCP）の遅延」といった警告が出て、スコアが70〜80点台まで落ちてしまうことがよくあります。

結論からお伝えすると、microCMSには「imgix（イマジックス）」という強力な画像処理CDNが標準搭載されており、画像URLの末尾にクエリパラメータ（?fm=webp&w=800&q=80 など）を付与するだけで、サーバー側でのビルド負荷ゼロでWebP変換やリサイズを自動実行できます。

本記事では、Cloudflare Pagesなどのビルド時間を一切延ばすことなく、Astroでアイキャッチ画像とリッチエディタ本文内の画像を完全最適化し、PageSpeed Insights 100点水準を目指す具体的な実装手順をコピペで使えるコード付きで解説します。

なぜAstro × microCMSでも「画像の未最適化」でPageSpeedの点数が落ちるのか？

まずは、高速なはずのAstroサイトでなぜ画像がボトルネックになるのか、そして「Astro標準の画像最適化」と「microCMS（imgix）の動的変換」のどちらを使うべきかを整理しておきましょう。

アップロードしたPNG・JPG元画像がそのまま配信されている罠

デザインツールやAIで生成した16:9のアイキャッチ画像（PNGや高画質JPG）は、1枚あたり500KB〜2MB近くのファイルサイズになることも珍しくありません。

Astroテンプレート側で <img src={post.eyecatch.url} /> のようにmicroCMSから返ってきたURLをそのまま出力していると、画面幅が400pxしかないスマートフォンの一覧画面であっても、1枚1MB以上の巨大なPNG画像を何枚もそのままダウンロードさせることになります。これがモバイル回線でのLCP（最大コンテンツの描画時間）を大きく悪化させる最大の原因です。

「Astro標準のビルド時変換」より「microCMS（imgix）のURL変換」を推奨する理由

Astroには astro:assets の <Image /> コンポーネントを使って、ビルド時に外部画像をダウンロードしてWebPへ変換する機能もあります。しかし、microCMSと組み合わせる個人〜中規模メディアにおいては、Astro側でビルド変換するのではなく、microCMS（imgix）のURLパラメータで変換する方式が圧倒的に有利です。

比較項目 Astro側でビルド時に画像変換 microCMS（imgix）のURLパラメータ変換
ビルド時間への影響 記事・画像が増えるほどビルドが重くなる 文字列結合のみのためビルド時間は0秒（爆速維持）
変換・配信の仕組み ビルドサーバー（Cloudflare等）のCPUを消費 microCMSのCDNエッジ上で自動変換＆キャッシュ配信
リッチエディタ本文内の画像 HTML文字列内のため <Image /> が使えない 正規表現やパーサーでURLにパラメータを足すだけで一括対応可能
💡 Astro × microCMS × Cloudflare Pagesの初期構築・自動デプロイ構成はこちら：
・【実録】Astro × microCMS × Cloudflare Pagesで爆速メディアを立ち上げる！初期構築からトラブルシューティング、自動化まで完全解説
・microCMSで脱WordPress！個人メディアをAPI・自動化で省力化するメリットと導入ステップ

microCMS標準の「imgix画像最適化パラメータ」とは？覚えておくべき必須クエリ5選

microCMSのメディア管理（画像フィールド）にアップロードされた画像は、すべて https://images.microcms-assets.io/.../sample.png という形式で配信されます。

このURLの末尾に ? から始まるクエリパラメータを繋げるだけで、元画像を一切加工することなく、最適化された画像を取得できます。実務で使うパラメータは以下の5つだけで十分です。

パラメータ 指定例 役割と推奨設定値
fm（フォーマット） fm=webp PNGやJPGを軽量な次世代形式（webp または avif）へ自動変換します。ファイルサイズが約60%〜85%削減されます。
w（横幅リサイズ） w=800 画像の横幅（px）を指定します。アスペクト比を維持したまま縮小されるため、スマホ一覧カードなら w=480、記事本文なら w=960 などが最適です。
q（画質・圧縮率） q=75 〜 q=80 0〜100で画質を指定します（デフォルトは75）。人間の目ではほとんど劣化が分からず容量だけを大幅に減らせる 75〜80 が黄金比です。
fit（リサイズ挙動） fit=max または crop fit=max を指定すると、元画像が指定幅（w）より小さい場合に無理な引き伸ばし（画質劣化）を防げます。
auto（自動最適化） auto=format,compress アクセスしてきたブラウザが対応している最適なフォーマット（AVIFやWebP）を自動判別して圧縮配信します。

変換URLの具体例

たとえば、元画像URLに対して「WebP形式・最大横幅800px・画質80」を指定する場合は、以下のようなURLになります。

https://images.microcms-assets.io/assets/xxxx/yyyy/eyecatch.png?fm=webp&w=800&q=80&fit=max

これだけで、たとえば1.2MBあったPNGアイキャッチ画像がわずか40KB〜70KB前後（約95%削減）まで軽量化されます。次のセクションでは、このURL生成を毎回手書きするのではなく、Astroの共通コンポーネントとして自動化する手順を解説します。

【実践STEP 1】アイキャッチ画像をWebP化＆レスポンシブ対応（srcset）するAstroコンポーネント実装

それでは実際にAstroプロジェクトへ組み込んでいきましょう。画面サイズ（スマホ・タブレット・PC）に応じて最適な横幅のWebP画像を自動配信し、さらにLCP（最大視覚コンテンツの描画）とCLS（累積レイアウトシフト）を同時に改善する共通コンポーネントを作成します。

手順1：画像URL変換ユーティリティ（microcmsImage.ts）を作成する

まずは src/utils/microcmsImage.ts を新規作成し、以下のTypeScriptコードを貼り付けます。

/**
 * src/utils/microcmsImage.ts
 * microCMS（imgix）の画像URL最適化＆レスポンシブsrcset生成ユーティリティ
 */

export interface OptimizeOptions {
  width?: number;
  quality?: number;
  format?: 'webp' | 'avif' | 'auto';
}

/**
 * 単一のmicroCMS画像URLにimgixパラメータを付与する
 */
export function optimizeMicroCMSImage(
  url: string,
  options: OptimizeOptions = {}
): string {
  if (!url || !url.includes('microcms-assets.io')) {
    return url;
  }

  const { width = 800, quality = 80, format = 'webp' } = options;
  const separator = url.includes('?') ? '&' : '?';
  const fmParam = format === 'auto' ? 'auto=format,compress' : `fm=${format}`;

  return `${url}${separator}${fmParam}&w=${width}&q=${quality}&fit=max`;
}

/**
 * レスポンシブ配信用の srcset 文字列を自動生成する
 */
export function generateMicroCMSSrcSet(
  url: string,
  widths: number[] = [480, 768, 1200],
  quality: number = 80
): string {
  if (!url || !url.includes('microcms-assets.io')) {
    return '';
  }

  return widths
    .map((w) => `${optimizeMicroCMSImage(url, { width: w, quality })} ${w}w`)
    .join(', ');
}

この関数を通すだけで、単一URLのWebP変換だけでなく、スマホ用（480w）・タブレット用（768w）・PC用（1200w）の3段階の解像度をまとめた srcset 属性を自動生成できます。

手順2：LCP・CLS対策済みの画像コンポーネント（MicroCMSImage.astro）を作成する

続いて、src/components/MicroCMSImage.astro を作成します。ここでの最大のポイントは、「記事詳細ページの最上部（ファーストビュー）にあるアイキャッチ画像」と「記事一覧カードや画面下部の画像」で読み込み優先度（loading と fetchpriority）を明確に出し分けることです。

---
/**
 * src/components/MicroCMSImage.astro
 * LCP・CLS対策済みのmicroCMS専用画像コンポーネント
 */
import { optimizeMicroCMSImage, generateMicroCMSSrcSet } from '../utils/microcmsImage';

interface Props {
  src: string;
  alt: string;
  width?: number;
  height?: number;
  sizes?: string;
  isHero?: boolean; // 記事詳細のファーストビュー（LCP対象）なら true
  className?: string;
}

const {
  src,
  alt,
  width = 1200,
  height = 675,
  sizes = '(max-width: 768px) 100vw, 800px',
  isHero = false,
  className = '',
} = Astro.props;

const optimizedSrc = optimizeMicroCMSImage(src, { width: 800, quality: 80 });
const srcSet = generateMicroCMSSrcSet(src, [480, 800, 1200], 80);
---

<img
  src={optimizedSrc}
  srcset={srcSet || undefined}
  sizes={srcSet ? sizes : undefined}
  alt={alt}
  width={width}
  height={height}
  loading={isHero ? 'eager' : 'lazy'}
  fetchpriority={isHero ? 'high' : 'auto'}
  decoding={isHero ? 'sync' : 'async'}
  class={className}
/>

なぜ「isHero」プロパティの出し分けでPageSpeedが劇的に上がるのか？

PageSpeed Insightsで減点されやすい以下の3つの指標を、このコンポーネント1つですべてクリアしています。

  • LCP（最大視覚コンテンツの描画）の高速化： 記事ページのトップにあるアイキャッチ画像には isHero={true} を渡すことで、loading="eager"（即時読み込み）かつ fetchpriority="high"（ブラウザへの最優先ダウンロード指示）が付与されます。なお、ファーストビューの画像に誤って loading="lazy" を付けてしまうとLCPが大幅に悪化して減点されるため、この出し分けが極めて重要です。
  • CLS（レイアウトシフト）の完全防止： 16:9比率の width="1200" height="675" を明示しているため、画像が読み込まれる前にブラウザが正確な高さを確保し、画面のカクつき（CLS）が 0.000 になります。
  • 一覧カードの通信量削減： 記事一覧画面では isHero={false}（デフォルト）で呼び出し、sizes="(max-width: 768px) 100vw, 400px" を指定することで、スマートフォンには 480w（約30KB前後）の超軽量WebPだけが配信されます。

【実践STEP 2】リッチエディタ本文（HTML）内の画像を一括でWebP・遅延読み込み化する処理

アイキャッチ画像の最適化だけでは、まだ半分です。microCMSのリッチエディタやHTMLフィールドで入稿した記事本文（post.content）の中に含まれる <img> タグは、Astroの set:html ディレクティブでそのまま文字列として展開されるため、先ほどのコンポーネントが使えません。

そこで、ビルド時（またはレンダリング時）に本文HTML内のmicroCMS画像URLを正規表現で自動検出し、一括でWebPパラメータと loading="lazy" を注入する関数を追加します。

手順3：本文HTML用の自動最適化関数を追加する

先ほど作成した src/utils/microcmsImage.ts の末尾に、以下の関数を追記します。

/**
 * リッチエディタ本文（HTML文字列）内のmicroCMS画像を自動でWebP化＆遅延読み込み化する関数
 */
export function optimizeRichEditorHtml(htmlContent: string): string {
  if (!htmlContent) return '';

  return htmlContent.replace(
    /<img([^>]*?)src=["'](https:\/\/images\.microcms-assets\.io\/[^"']+?)["']([^>]*?)>/gi,
    (match, beforeSrc, rawUrl, afterSrc) => {
      // すでにパラメータが付いている場合は重複付与を避ける
      const separator = rawUrl.includes('?') ? '&' : '?';
      const optimizedUrl = rawUrl.includes('fm=')
        ? rawUrl
        : `${rawUrl}${separator}fm=webp&w=960&q=80&fit=max`;

      // 既存の属性に loading や decoding がなければ追加
      const combinedAttrs = `${beforeSrc} ${afterSrc}`;
      const hasLoading = /loading=["']/i.test(combinedAttrs);
      const hasDecoding = /decoding=["']/i.test(combinedAttrs);

      const extraAttrs = [
        !hasLoading ? 'loading="lazy"' : '',
        !hasDecoding ? 'decoding="async"' : '',
      ]
        .filter(Boolean)
        .join(' ');

      return `<img${beforeSrc}src="${optimizedUrl}"${afterSrc} ${extraAttrs}>`;
    }
  );
}

手順4：記事詳細テンプレート（[slug].astro）で適用する

あとは記事詳細ページ（例：src/pages/blog/[slug].astro）で記事本文を出力する際、以下のように optimizeRichEditorHtml() を通してから set:html に渡すだけです。

---
import MicroCMSImage from '../../components/MicroCMSImage.astro';
import { optimizeRichEditorHtml } from '../../utils/microcmsImage';

// microCMSから記事データを取得（post）
const optimizedContent = optimizeRichEditorHtml(post.content);
---

<article>
  <!-- ファーストビューのアイキャッチ（isHero=trueでLCP最優先化） -->
  {post.eyecatch && (
    <MicroCMSImage
      src={post.eyecatch.url}
      alt={post.title}
      isHero={true}
      sizes="(max-width: 768px) 100vw, 800px"
    />
  )}

  <!-- 記事本文（内部の画像は自動でWebP＆遅延読み込み化済み） -->
  <div class="post-content" set:html={optimizedContent} />
</article>

これで、過去に書いた記事もこれから入稿する記事も、microCMS側で一切画像を張り替えることなく、サイト内の全画像が自動的にWebP化＆遅延読み込み対応になります。

💡 あわせて読みたい（入稿自動化＆Cloudflare Pages連携ガイド）：
・GitHub × Cloudflare Pagesで実現する「完全無料・自動デプロイ環境」の作り方
・【コピペで動く】GoogleスプレッドシートとGASでmicroCMSへ自動入稿する完全手順

まとめ：imgix × Astroの最適化で「ビルド爆速＆表示100点」のメディア基盤を完成させよう

本記事では、microCMSに標準搭載されている画像配信エンジン「imgix」とAstroを組み合わせ、ビルド時間を延ばさずにPageSpeed Insights 100点を目指す画像最適化手順を解説しました。

  • ビルド負荷ゼロのエッジ変換： Astro側で画像をビルド圧縮するのではなく、microCMSのURL末尾に ?fm=webp&w=800&q=80 を付与することで、Cloudflare Pagesのビルド時間を1秒も増やさずに画像を90%以上軽量化できる。
  • ファーストビュー（LCP）の出し分けが鍵： 記事トップのアイキャッチには loading="eager" fetchpriority="high" を指定し、一覧カードや本文内の画像には loading="lazy" を適用することでLCPスコアが劇的に改善する。
  • 本文内画像も正規表現で一括最適化： optimizeRichEditorHtml() を1行挟むだけで、リッチエディタ内の全画像にも遡ってWebP変換と遅延読み込みを適用できる。

表示速度の改善は、読者の直帰率を下げるだけでなく、Search ConsoleのCore Web Vitals評価や検索順位の底上げにも直結する重要な技術資産です。ぜひあなたのAstro × microCMSサイトにも導入して、ストレスのない爆速メディア運営を実現してください！

🚀 【2026年最新】ブログ自動化・AI開発におすすめの国内VPS 3選を比較する
← トップページへ戻る