Astro 5 靜態生成效能優化完全指南：從零開始打造高速網站

前陣子公司要我們重新設計官網，主管說要「速度快到讓競爭對手羨慕」，結果我用 Astro 5 做完後，Lighthouse 分數直接飆到 100 分。說實話，剛開始我也不知道 Astro 這麼厲害，但經過這幾個月的實戰經驗，我發現 Astro 5 在靜態網站生成效能方面真的是個寶藏。

為什麼選擇 Astro 5？

我之前用過 Next.js、Gatsby，甚至還碰過 Nuxt，但 Astro 給我最大的驚喜是它的「島嶼架構」（Island Architecture）。簡單來說，就是靜態 HTML 為主，需要互動的地方才載入 JavaScript，這樣的設計讓網站載入速度快得驚人。

Astro 5 的核心優勢

零 JavaScript by Default：預設情況下不會輸出任何 JavaScript
多框架支援：可以同時使用 React、Vue、Svelte 等
優秀的 SEO 表現：靜態 HTML 對搜尋引擎友好
開發體驗極佳：Hot Module Replacement 超快

效能優化核心策略

1. 圖片優化：讓載入速度飆升

這是我踩過最大的坑，一開始不知道要優化圖片，結果網站載入慢到不行。後來學聰明了，開始使用 Astro 的內建圖片優化。

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

<Image
  src={heroImage}
  alt="網站主視覺"
  width={800}
  height={400}
  format="webp"
  quality={80}
/>

實戰技巧：

使用 format="webp" 可以減少 30-50% 的檔案大小
quality={80} 是最佳平衡點，再低畫質會明顯下降
記得設定 width 和 height 避免 CLS 問題

2. 編譯優化配置

我在 astro.config.mjs 裡面的配置是這樣的：

export default defineConfig({
  output: 'static',
  build: {
    inlineStylesheets: 'auto',
  },
  vite: {
    build: {
      cssMinify: 'lightningcss',
      minify: 'terser',
      rollupOptions: {
        output: {
          manualChunks: {
            vendor: ['alpine'],
          }
        }
      }
    }
  },
  compressHTML: true,
});

關鍵優化點解說：

inlineStylesheets: 'auto'：小於 4KB 的 CSS 會直接 inline，減少 HTTP 請求
cssMinify: 'lightningcss'：比預設的 CSS 壓縮器快 100 倍
manualChunks：把第三方套件分離，利用瀏覽器快取

3. 預載策略：讓使用者感覺更快

這招我是從 Google 的 Web.dev 學來的，在 <head> 裡面加上關鍵資源的預載：

---
// Layout.astro
---
<head>
  <link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="dns-prefetch" href="//cdn.design-drifter.com">
  <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
</head>

4. 島嶼架構實戰應用

Astro 的島嶼架構是它最強的功能，我現在都這樣使用：

---
// 靜態內容在伺服器端渲染
const posts = await getPosts();
---

<div>
  <h1>部落格文章</h1>
  <!-- 靜態列表，不需要 JavaScript -->
  {posts.map(post => (
    <article>
      <h2>{post.title}</h2>
      <p>{post.excerpt}</p>
    </article>
  ))}
  
  <!-- 只有搜尋功能需要互動 -->
  <SearchComponent client:load />
</div>

Client Directives 使用時機：

client:load：立即載入，用於首屏重要互動
client:idle：瀏覽器閒置時載入，適合非關鍵功能
client:visible：進入視窗時載入，適合折疊內容
client:media：符合媒體查詢時載入，響應式互動

實戰效能提升案例

我們公司的官網改版前後數據對比：

改版前（使用傳統 React SPA）

Lighthouse 效能分數：65 分
首次內容繪製（FCP）：2.8 秒
最大內容繪製（LCP）：4.2 秒
JavaScript Bundle 大小：245KB

改版後（使用 Astro 5）

Lighthouse 效能分數：100 分
首次內容繪製（FCP）：0.9 秒
最大內容繪製（LCP）：1.1 秒
JavaScript Bundle 大小：15KB

這個提升幅度連我自己都嚇一跳，關鍵是使用者體驗明顯改善，跳出率降低了 35%。

進階優化技巧

1. 動態匯入優化

對於大型元件，我會使用動態匯入：

---
// 只在需要時載入重型元件
const HeavyComponent = lazy(() => import('../components/HeavyComponent.astro'));
---

<div>
  <p>輕量內容先顯示</p>
  <HeavyComponent client:visible />
</div>

2. CSS 策略優化

我現在都用 Critical CSS 策略：

---
// 關鍵樣式直接 inline
const criticalCSS = `
  body { font-family: system-ui; }
  .hero { height: 100vh; }
`;
---

<style set:html={criticalCSS}></style>
<link rel="stylesheet" href="/styles/non-critical.css" media="print" onload="this.media='all'">

3. Service Worker 快取策略

雖然是靜態網站，但我還是會加上 Service Worker 來改善重複訪問的體驗：

// sw.js
const CACHE_NAME = 'astro-site-v1';
const urlsToCache = [
  '/',
  '/styles/main.css',
  '/fonts/main.woff2'
];

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
});

CDN 與部署優化

我們現在用 Cloudflare Pages 來部署 Astro 網站，配合他們的全球 CDN 網路，載入速度更上一層樓。

Cloudflare 優化設定

Auto Minify：開啟 HTML/CSS/JS 壓縮
Brotli 壓縮：比 Gzip 再小 15-20%
Image Resizing：自動根據裝置提供最佳圖片大小
Rocket Loader：延遲載入非關鍵 JavaScript

監控與測量

效能優化不是做一次就好，我們每個月都會跑一次完整檢測：

常見問題排解

問題 1：Build 時間太長

我之前遇過專案變大後 build 時間從 30 秒變成 5 分鐘，後來發現是圖片處理的問題。

解決方案：

// astro.config.mjs
export default defineConfig({
  image: {
    service: sharpImageService(),
    // 限制並行處理數量
    domains: ['cdn.design-drifter.com'],
  }
});

問題 2：JavaScript 打包過大

有些第三方套件會讓 bundle 變很大，我現在都會檢查：

# 分析 bundle 大小
npm run build -- --analyze

然後用動態匯入來分離非關鍵程式碼。

未來展望與建議

Astro 團隊現在正在開發 View Transitions API 的原生支援，這會讓頁面切換更流暢。另外，他們也在研究更好的 SSR 支援，期待之後的版本。

如果你現在要開始一個新專案，我強烈推薦試試看 Astro 5。不管是公司官網、部落格，還是電商網站，Astro 的效能表現都很出色。

記住，效能優化是一個持續的過程，不要期待一次就完美，但 Astro 5 確實是個很好的起點。從我的經驗來看，只要照著這些方法做，你的網站速度絕對會讓使用者滿意。

這篇文章基於我們團隊實際使用 Astro 5 開發多個專案的經驗整理，希望對你的專案有幫助。如果有任何問題，歡迎在評論區討論！

Astro 5 靜態生成效能優化完全指南：從零開始打造高速網站

Astro 5 靜態生成效能優化完全指南：從零開始打造高速網站

為什麼選擇 Astro 5？

Astro 5 的核心優勢

效能優化核心策略

1. 圖片優化：讓載入速度飆升

2. 編譯優化配置

3. 預載策略：讓使用者感覺更快

4. 島嶼架構實戰應用

實戰效能提升案例

改版前（使用傳統 React SPA）

改版後（使用 Astro 5）

進階優化技巧

1. 動態匯入優化

2. CSS 策略優化

3. Service Worker 快取策略

CDN 與部署優化

Cloudflare 優化設定

監控與測量

推薦工具

常見問題排解

問題 1：Build 時間太長

問題 2：JavaScript 打包過大

未來展望與建議

安裝漂流者-探索記錄

Astro 5 靜態生成效能優化完全指南：從零開始打造高速網站

為什麼選擇 Astro 5？

Astro 5 的核心優勢

效能優化核心策略

1. 圖片優化：讓載入速度飆升

2. 編譯優化配置

3. 預載策略：讓使用者感覺更快

4. 島嶼架構實戰應用

實戰效能提升案例

改版前（使用傳統 React SPA）

改版後（使用 Astro 5）

進階優化技巧

1. 動態匯入優化

2. CSS 策略優化

3. Service Worker 快取策略

CDN 與部署優化

Cloudflare 優化設定

監控與測量

推薦工具

常見問題排解

問題 1：Build 時間太長

問題 2：JavaScript 打包過大

未來展望與建議

安裝 漂流者-探索記錄

安裝漂流者-探索記錄