速度的商業影響

  • 載入時間超過 3 秒，53% 的手機訪客會離開
  • 網站速度是 Google 排名的直接因素之一
  • Amazon 研究：每增加 100ms 的延遲，損失 1% 收入

如何測量網站速度？

使用這些工具：

  • Google PageSpeed Insights：最常用，提供手機與桌機各別分數
  • GTmetrix：詳細的載入瀑布圖
  • WebPageTest：可以選擇台灣節點測試

目標分數：桌機 > 90，手機 > 70（行業平均手機通常低很多）。

最有效的優化技術

1. 圖片優化（效果最大）

圖片通常佔網頁總大小的 50–80%：

  • 使用 WebP 格式取代 JPEG/PNG（平均減少 30%）
  • 根據顯示尺寸調整圖片大小（不要用原始大圖縮放）
  • 使用 lazy loading（loading="lazy"）

2. 字體優化

  • 只載入需要的字重
  • 使用 font-display: swap，避免 FOIT 閃爽

3. 減少不必要的 JavaScript

每個 JS 套件都有載入成本。定期審視：

  • 是否有未使用的套件可以移除？
  • 能否換成更輕量的替代方案？

4. CDN 使用

靜態資源（圖片、CSS、JS）透過 CDN 分發，讓台灣訪客從台灣節點下載，不用繞道美國。

5. 伺服器端快取

提供靜態頁面（SSG）或使用 ISR 增量靜態再生，避免每次請求都重新計算。

Next.js 的速度優勢

我們使用 Next.js 開發的一個重要原因就是速度：自動圖片優化、SSG/SSR 彈性選擇、內建 code splitting——讓你不需要手動調整就有良好的起始分數。