網站效能優化 checklist：從 Core Web Vitals 出發

客戶找我做效能優化，十次有八次的起因是「網站變慢了、排名掉了」。Google 把 Core Web Vitals 納入搜尋排名訊號之後，效能不再只是工程的事，而是直接影響流量的商業問題。這篇整理三個核心指標，以及我每次接優化案都會過一遍的清單。

三個指標在量什麼

LCP（Largest Contentful Paint）量「最大的內容多快出現」，通常是 hero 圖或大標題，目標 2.5 秒內。CLS（Cumulative Layout Shift）量「版面跳動」，那種正要點按鈕結果整頁位移的體驗就是它，目標 0.1 以下。INP（Interaction to Next Paint）量「互動多快有回應」，取代了舊的 FID，目標 200 毫秒以內。

圖片：最大宗也最好賺

十個慢網站九個敗在圖片。轉成 WebP 或 AVIF、依版面提供適當尺寸（srcset）、首屏以下全部 lazy load、hero 圖加上 fetchpriority="high"——光這幾件事常常就能把 LCP 砍掉一半。記得給所有圖片寫死寬高或用 aspect-ratio，這是 CLS 最常見的兇手。

字型與 JavaScript

網頁字型用 font-display: swap 避免文字隱形等待，並對字型檔做 preconnect / preload。JavaScript 則是 INP 的主因：減少進到首屏的 bundle、把非關鍵的第三方腳本（聊天小工具、分析）延後或改成互動時才載入、長任務切塊。在 Next.js 裡，dynamic import 與 server component 是現成的好工具。

量測：先有數據再動手

優化前先跑 PageSpeed Insights 與 Lighthouse 留下基準，並區分實驗室數據與真實使用者數據（CrUX）——兩者不一致時，以真實使用者為準。每改一項就重量一次，不要一次改十個地方然後猜是哪個有效。

效能優化沒有魔法，就是清單、量測、迭代。但它的投資報酬率非常誠實：快的網站，跳出率低、轉換高、排名好。