Astroで高速なWebサイトを作る5つのコツ

静的サイトジェネレーターのAstroは、その優れたパフォーマンス特性で注目を集めています。今回は、Astroを使ってCore Web Vitalsを最適化し、高速なWebサイトを構築するためのベストプラクティスをご紹介します。

1. 画像最適化は必須

Astroの<Image>コンポーネントを活用することで、自動的に最適化された画像を配信できます。

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

<Image
  src={heroImage}
  alt="ヒーロー画像"
  width={800}
  height={400}
  format="webp"
  loading="eager"
  sizes="(max-width: 768px) 100vw, 800px"
/>

重要なポイント

• format=“webp” で次世代フォーマットを指定
• sizes属性 でレスポンシブな配信を実現
• loading属性 でファーストビューは”eager”、それ以外は”lazy”

2. JavaScript部分最適化

Astroのアイランドアーキテクチャを活用し、本当に必要な部分のみJavaScriptを読み込みます。

Astroアイランドについて詳しく

コンポーネントレベルでのハイドレーション制御について詳細に解説

3. フォントの最適化

/* カスタムフォントの読み込み最適化 */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;600&display=swap");

body {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-display: swap;
}

4. 推奨開発環境紹介

Web開発を効率的に行うための推奨環境をご紹介します。
私が推しているのは、最近流行りのミニPCです。
ミニPCは、SSDやRAMをしっかり搭載したモデルがノートPCやデスクトップPCと比較してかなりコスパ良く手に入ります。
私もミニPCを愛用していますが、開発環境として非常に快適なので、是非試してみてください＾＾
デスクトップPCと比べて場所を取らず、価格も抑えられるため、初めての開発マシンとしてもおすすめです。
※持ち歩きが必要な場合はノートPCを選びましょう。

5. ビルド最適化設定

astro.config.mjsでの設定例：

export default defineConfig({
  output: "static",
  build: {
    inlineStylesheets: "auto",
  },
  vite: {
    build: {
      cssCodeSplit: false,
      rollupOptions: {
        output: {
          manualChunks: undefined,
        },
      },
    },
  },
});

まとめ

これらの最適化により、**Lighthouse Score 90+**を目指すことができます。特に地域密着型のビジネスサイトでは、ページ表示速度がSEO順位に大きく影響するため、しっかりと対策しておきましょう。

---

この記事が参考になったら、ぜひ SNS でシェアお願いします 🎉

感想や気づきがあれば引用リツイート／返信で教えてください。共有していただけると励みになります！