Core Web Vitals 指南
速度不是「感覺快」而已,而是可被量測、可被比較。把 CWV 當成產品品質指標,能長期提升 SEO 與轉換。
1) LCP:最大內容繪製
- 常見 LCP 元素:hero 圖、H1 區塊、banner
- 優化:壓縮/改格式(WebP/AVIF)、預載入、避免阻塞 CSS/JS
2) INP:互動到下次繪製
- 重點:縮短主執行緒長任務,減少大型 bundle 與同步計算
- 手段:code-splitting、避免重渲染、把重工作移到 worker
3) CLS:版面位移
- 給圖片/iframe 固定尺寸或 aspect-ratio
- 避免插入上方內容(如 banner)造成整頁下推
相關工具
常見問題
Core Web Vitals 常見問答。