【Astro×microCMS】Lighthouse満点は当たり前？爆速コーポレートサイト構築の「正解」アーキテクチャ 🚀💯

Posted at 2025-11-19

こんにちは😊
株式会社プロドウガの@YushiYamamotoです！
らくらくサイトの開発・運営を担当しながら、React.js・Next.js専門のフリーランスエンジニアとしても活動しています❗️

この記事は 株式会社プロドウガ Astro Advent Calendar 2025 の1日目の記事です🎄

コーポレートサイトやメディアサイトを作る際、皆さんはどのフレームワークを選んでいますか？
Next.js？ WordPress？それとも素のHTML？

2025年現在、私が自信を持っておすすめする「正解」の構成。
それが 「Astro × microCMS」 です。

なぜなら、「Lighthouse（PageSpeed Insights）で満点（100点）を取るのが、あまりにも簡単だから」 です。

今回は、実務で採用しているアーキテクチャと、満点を取るための具体的な実装テクニックを公開します。

🏆 なぜ Astro なのか？

Next.js（App Router）も素晴らしいフレームワークですが、静的なコンテンツが主体のコーポレートサイトにおいては、Astroに軍配が上がります。

1. デフォルトで「Zero JS」

Astroはビルド時にHTMLを生成し、不要なJavaScriptをクライアントに送信しません。
ReactやVueで書いたコンポーネントも、静的なHTMLとしてレンダリングされます。これにより、TBT（Total Blocking Time）が劇的に改善します。

2. アイランドアーキテクチャ

「お問い合わせフォーム」や「ハンバーガーメニュー」など、動的な部分だけを選択的にHydration（JS化）できます。
client:load や client:visible と書くだけ。この手軽さが最強です。

🏗️ アーキテクチャ構成

今回は、日本発のヘッドレスCMSである microCMS をデータソースとして採用します。

🛠️ 実装のポイント：Lighthouse 100点への道

ただAstroを使うだけでは90点止まりです。100点を取るための「あと一歩」のテクニックを紹介します。

1. microCMSとの型安全な連携

まずはSDKを入れます。

npm install microcms-js-sdk

TypeScriptの型定義をしっかり行うことで、開発体験を向上させます。

// src/library/microcms.ts
import { createClient, type MicroCMSQueries } from "microcms-js-sdk";

const client = createClient({
  serviceDomain: import.meta.env.MICROCMS_SERVICE_DOMAIN,
  apiKey: import.meta.env.MICROCMS_API_KEY,
});

export type Blog = {
  id: string;
  createdAt: string;
  updatedAt: string;
  publishedAt: string;
  revisedAt: string;
  title: string;
  content: string;
  eyecatch?: {
    url: string;
    height: number;
    width: number;
  };
};

export const getBlogs = async (queries?: MicroCMSQueries) => {
  return await client.getList<Blog>({ endpoint: "blogs", queries });
};

2. 画像の最適化（CLS対策）

Lighthouseのスコアを落とす最大の要因は「画像」です。
Astro標準の <Image /> コンポーネントを使えば、自動的にWebP変換、サイズ調整、Lazy Loadingを行ってくれます。

microCMSの画像（リモート画像）を最適化するには、astro.config.mjs にドメインを追加します。

// astro.config.mjs
export default defineConfig({
  image: {
    domains: ["images.microcms-assets.io"],
  },
});

そして、コンポーネント側で使用します。inferSize を使うと、リモート画像のサイズを自動取得して width height を埋めてくれるため、CLS（Cumulative Layout Shift）を完全に防げます。

---
import { Image } from 'astro:assets';
const { blog } = Astro.props;
---

<Image 
  src={blog.eyecatch.url} 
  alt={blog.title} 
  width={800} 
  height={450}
  format="webp"
  class="object-cover w-full h-auto"
/>

3. 第三者スクリプトの遅延読み込み（Partytown）

Google Analytics (GA4) や Google Tag Manager (GTM) は、メインスレッドをブロックし、パフォーマンスを著しく低下させます。

Astroには Partytown インテグレーションがあり、これを使うと重いスクリプトをWeb Worker（別スレッド）に逃がすことができます。

npx astro add partytown

設定はこれだけ。GTMの読み込みタグに type="text/partytown" をつけるだけです。

<!-- GTMの読み込み -->
<script type="text/partytown" src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXX"></script>
<script type="text/partytown">
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXX');
</script>