Astro 5.x 実践Tips - 静的サイトを爆速にする10のテクニック
開発ツール New

Astro 5.x 実践Tips - 静的サイトを爆速にする10のテクニック

Content Collectionsの型安全性、View Transitions、Islands Architecture。Astro 5.xの機能を使い倒して、パフォーマンスとDXを両立する実践的なテクニック集。

Astro 静的サイト生成 パフォーマンス フロントエンド Web開発

Astroを選ぶ理由

Astroは「コンテンツ重視のWebサイト」に最適化されたフレームワークだ。ブログ、ドキュメント、マーケティングサイト、メディアサイト——こうしたサイトでは、ほとんどのページが静的に生成でき、JavaScriptは限定的にしか必要ない。

Astro 5.xでは、Content Collections の型安全性、Server Islands、パフォーマンスの改善など、多くの強化が行われた。本記事では、Astroを実プロジェクトで使い倒すための10のテクニックを紹介する。

Tip 1: Content Collectionsで型安全なコンテンツ管理

Astro 5.xのContent Collectionsは、Markdownのfrontmatterにスキーマ検証を適用する。

// src/content/config.ts
import { defineCollection, z } from 'astro:content';

const articles = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    publishDate: z.date(),
    section: z.enum(['gaming', 'design', 'tech', 'life', 'books']),
    tags: z.array(z.string()),
  }),
});

メリット: frontmatterの型が保証されるため、テンプレートで article.data.title にアクセスする際に型推論が効く。スキーマ違反はビルド時にエラーとして検出される。

Tip 2: Islands Architectureで必要な箇所だけインタラクティブに

Astroの最大の特徴は「デフォルトでJavaScript 0KB」。ページ全体は静的HTMLとして配信され、インタラクティブな部分だけをReactやSvelteの「島」として読み込む。

---
import SearchBox from '../components/SearchBox.tsx';
import StaticHeader from '../components/Header.astro';
---
<StaticHeader />  <!-- JS不要 -->
<SearchBox client:visible />  <!-- 画面に入ったときだけJS読み込み -->

client:visible は要素がビューポートに入ったときにJavaScriptを読み込むディレクティブ。ファーストビューの外にあるコンポーネントの読み込みを遅延できる。

ディレクティブタイミング用途
client:load即座にファーストビューの対話要素
client:visible表示時にスクロール先の対話要素
client:idleブラウザのアイドル時優先度の低い対話要素
client:mediaメディアクエリ一致時モバイルのみの要素

Tip 3: View Transitionsでページ遷移をスムーズに

Astro 5.xのView Transitions APIは、MPAでありながらSPAのようなスムーズなページ遷移を実現する。

---
import { ViewTransitions } from 'astro:transitions';
---
<head>
  <ViewTransitions />
</head>

これだけで、ページ間のクロスフェードアニメーションが有効になる。特定の要素にトランジション名を付けると、ページ間で同じ要素が連続的にアニメーションする。

Tip 4: 画像の自動最適化

Astroの <Image> コンポーネントは、ビルド時に画像を自動最適化する。

---
import { Image } from 'astro:assets';
import thumbnail from '../images/article-thumb.png';
---
<Image src={thumbnail} alt="記事のサムネイル" width={800} />

WebP/AVIF変換、リサイズ、lazy loading属性の自動付与が行われる。外部URLの画像には inferSize オプションでサイズを自動検出できる。

Tip 5: 動的OGP画像の生成

@astrojs/og またはSatoriを使って、記事ごとに動的にOGP画像を生成できる。

タイトルとカテゴリをテンプレートに差し込み、ビルド時にPNG/WebPとして出力する。デザインの統一性が保たれ、手動での画像作成が不要になる。

Tip 6: RSS/Sitemapの自動生成

npx astro add sitemap
npx astro add rss

公式インテグレーションを追加するだけで、ビルド時にsitemap.xmlとRSSフィードが自動生成される。Content Collectionsと連動し、新しい記事が自動的にフィードに含まれる。

Tip 7: MDXでコンポーネントを記事内に埋め込む

MDXを使えば、Markdown記事内にReact/Astroコンポーネントを埋め込める。

import ColorPicker from '../../components/ColorPicker.tsx';

## 配色を試してみよう

以下のツールで色を選択してください:

<ColorPicker client:visible />

記事コンテンツの中にインタラクティブなツールやデモを自然に配置できる。

Tip 8: prefetchでナビゲーションを高速化

Astroのprefetch機能は、リンクにホバーした時点で遷移先のHTMLを先読みする。

// astro.config.mjs
export default defineConfig({
  prefetch: {
    defaultStrategy: 'hover',
    prefetchAll: false,
  },
});

ユーザーがリンクをクリックする頃には、ページのHTMLがすでにキャッシュされているため、体感速度が大幅に向上する。

Tip 9: 環境変数の型安全な管理

Astro 5.xでは astro:env モジュールで環境変数の型定義が可能。

// env.d.ts
interface ImportMetaEnv {
  readonly PUBLIC_GA_ID: string;
  readonly SECRET_API_KEY: string;
}

PUBLIC_ プレフィックスの変数はクライアントに露出し、それ以外はサーバーサイドのみ。ビルド時に未定義の環境変数を検出できる。

Tip 10: ビルドパフォーマンスの計測と改善

Astroのビルドログにはページごとの生成時間が表示される。ボトルネックとなるページを特定し、以下を確認する:

  • Content Collectionsのフィルタリングが効率的か
  • 画像処理が重複していないか
  • 不要なコンポーネントのインポートがないか
# 詳細なビルドログを出力
ASTRO_LOG_LEVEL=debug astro build

まとめ

Astroの思想は明快だ。必要なときだけJavaScriptを送り、それ以外は静的HTMLで高速に配信する。Content Collections、Islands Architecture、View Transitions——これらの機能は、コンテンツサイトにおける「速さ」と「リッチさ」の両立を可能にする。

10のTipsすべてを一度に適用する必要はない。まずContent CollectionsとIslands Architectureで基盤を固め、View TransitionsやprefetchでUXを磨いていくのが実践的なアプローチだ。

あわせて読みたい