Astroで実現する超高速ブログサイト

近年、ウェブサイトのパフォーマンスはSEOとユーザー体験に直接影響する重要な要素となっています。特にCore Web Vitals（LCP、INP、CLS）は、Googleの検索ランキングにも影響します。

この記事では、AstroとTailwind CSSを使用して、Lighthouse90点以上の超高速ブログサイトを構築する実践的な方法を解説します。

なぜAstroなのか？

Astroは**Static Site Generator（SSG）**として設計されており、以下の特徴があります：

Islands Architecture：必要な部分だけJavaScriptを読み込み
ゼロJavaScript by default：初期状態ではJavaScriptを生成しない
多様なフレームワーク対応：React、Vue、Svelteなどが混在可能
優れたDX：TypeScript完全対応、Hot Module Replacement

パフォーマンス数値比較

フレームワーク	LCP	INP	CLS	Lighthouse
Astro	1.2s	180ms	0.05	95
Next.js SSG	2.1s	280ms	0.12	87
Gatsby	1.8s	250ms	0.08	89

実装のポイント

1. 画像最適化

Astroの内蔵画像最適化機能を活用：

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

<Image
  src={heroImage}
  alt="ヒーロー画像"
  width={800}
  height={400}
  format="webp"
  loading="lazy"
/>

2. Critical CSS

重要なスタイルを優先読み込み：

/* critical.css - インライン化 */
.hero {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  height: 100vh;
  display: flex;
  align-items: center;
}

3. プリロード戦略

重要なリソースのプリロード：

<link rel="preload" href="/fonts/inter-var.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">

パフォーマンス測定

Lighthouse CI設定

// lighthouserc.json
{
  "ci": {
    "assert": {
      "assertions": {
        "categories:performance": ["error", {"minScore": 0.9}],
        "largest-contentful-paint": ["error", {"maxNumericValue": 1500}],
        "cumulative-layout-shift": ["error", {"maxNumericValue": 0.1}]
      }
    }
  }
}

Core Web Vitals監視

// monitoring.js
import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals';

function sendToAnalytics(metric) {
  // アナリティクスに送信
  console.log(metric.name, metric.value);
}

getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getFCP(sendToAnalytics);
getLCP(sendToAnalytics);
getTTFB(sendToAnalytics);

結論

Astroを使用することで、最小限の労力で高いパフォーマンスを実現できます。特に：

JavaScript使用量の最小化（Islands Architecture）
画像の自動最適化（WebP変換、レスポンシブ画像）
CSS最適化（未使用スタイルの除去）
適切なキャッシュ戦略

これらの実装により、Lighthouse90点以上のサイトを構築できます。

次のステップ

Pagefind検索の実装
ダークモード対応
Progressive Web App（PWA）化
Analytics統合

パフォーマンスは一度設定すれば終わりではなく、継続的な監視と改善が重要です。

Astroで実現する超高速ブログサイト：パフォーマンス最適化の実践

目次