速度就是 SEO，速度就是轉換率
Google 在 2021 年將 Core Web Vitals 納入排名因素，讓「速度」正式成為 SEO 的一部分。
但更直接的影響是用戶體驗：
- 頁面載入時間每增加 1 秒，轉換率降低約 7%
- 53% 的手機用戶會放棄載入超過 3 秒的頁面
這意味著速度優化不只是技術問題，它直接影響你的業務。
台灣網站速度的獨特考量
CDN 節點在台灣的差異
不同 CDN 服務在台灣的節點配置差異很大，直接影響台灣用戶的體驗：
優秀的台灣 CDN 覆蓋：
- Cloudflare：台北有節點，台灣用戶延遲極低（通常 < 20ms）
- Fastly：台灣有節點，效能優秀
- Akamai：有台灣節點，企業級選擇
較差的台灣覆蓋：
部分美國主機商或 CDN 服務，最近的節點在日本或新加坡，台灣用戶延遲 50–100ms+，在慢速網路環境下感受明顯。
建議： 使用 Cloudflare 的免費方案保護和加速你的網站。即使你的主機在美國，Cloudflare 會在台北節點快取你的靜態資源，大幅改善台灣用戶的載入速度。
台灣的網路環境
台灣的家庭寬頻速度很快（平均下行 > 100Mbps），但手機用戶的佔比高，且在特定情境（地下停車場、山區、非都市地區）4G 信號不穩定。
優化方向：針對手機用戶和不穩定的網路連線做優化，比針對桌機做優化優先級更高。
Core Web Vitals 說明
Google 的 Core Web Vitals 由 3 個指標組成：
LCP（最大內容繪製）
頁面最大的可見元素出現的時間。通常是 Hero 圖片或標題文字。
目標： < 2.5 秒
最常見的 LCP 元素： 首頁 Hero 圖片
如何改善：
- 預載（preload）你的 LCP 圖片：在 HTML head 中加入 preload link 標籤
- 使用 Next.js Image 組件並設定 priority 屬性
- 確保 LCP 圖片已壓縮（WebP，< 150KB）
- 確保 CDN 有快取你的圖片
CLS（累積版面配置位移）
頁面載入過程中，元素位置意外移動的累積程度。
目標： < 0.1
常見原因：
- 圖片沒有指定寬高（圖片載入後擠動其他元素）
- 自定義字型載入後觸發文字重排
- 廣告或動態內容插入時改變版面
如何改善：
- 所有 img 標籤指定 width 和 height 屬性（或 Next.js Image 組件會自動處理）
- 預留字型載入的空間（font-display: optional 或 swap）
INP（互動到下次繪製）
用戶互動（點擊、鍵盤輸入）到畫面回應的延遲時間。INP 在 2024 年取代了舊的 FID 指標。
目標： < 200ms
常見問題： 大量的 JavaScript、複雜的 DOM 操作
在台灣測試你的網站速度
工具 1：Google PageSpeed Insights
輸入網址，選擇手機或桌機版本，可以看到 Core Web Vitals 分數和優化建議。
重要： 使用「真實體驗數據（Field Data）」而非「實驗室數據（Lab Data）」——前者是真實用戶的體驗，更有參考價值。
工具 2：GTmetrix（選擇台灣或香港的測試地點）
GTmetrix 允許選擇測試伺服器的地理位置。選香港或新加坡作為接近台灣的測試地點，比從美國測試更能反映台灣用戶的實際體驗。
工具 3：WebPageTest
最詳細的速度分析工具，可以選擇台灣作為測試地點，查看瀑布圖分析每個資源的載入時間。
速度優化優先順序清單
按影響力排序：
- 確認有 CDN（Cloudflare）和 HTTPS
- 壓縮所有圖片（WebP，LCP 圖 < 150KB，其他 < 100KB）
- 為 LCP 圖片設定 preload
- 確保字型使用 font-display: swap 或直接使用 Tailwind CSS 的系統字型
- 延遲載入非關鍵 JavaScript（defer / dynamic import）
- 確保 CLS 分數 < 0.1（圖片加尺寸、避免版面跳動）
- 檢查第三方腳本（GA4、聊天工具、廣告腳本）是否拖慢速度——使用 async 或 defer 載入