Core Web Vitals 是 Google 為網頁體驗設計的核心效能指標，電商網站若希望同時提升搜尋能見度與轉換率，必須優先優化 LCP、INP 與 CLS。本指南將說明如何測量、診斷並系統性改善這些指標。
- Google 建議 LCP 應低於 2.5 秒，INP 應低於 200 毫秒，CLS 應低於 0.1。
- INP 已於 2024 年取代 FID 成為 Core Web Vitals 的正式指標。
- Google 使用行動裝置優先索引，因此行動版網站的 Core Web Vitals 對排名影響更大。
- PageSpeed Insights 同時提供實驗室資料與 CrUX 真實使用者資料。
目录
了解更多，请查看我们的電商網站 SEO 稽核指南页面。
什麼是 Core Web Vitals？
Core Web Vitals 是 Google 指定的頁面體驗指標，包含 LCP、INP 與 CLS 三個面向。
Core Web Vitals 是 Google 用於衡量網頁載入、互動與視覺穩定性的核心指標。
最大內容繪製（LCP）代表主要內容出現的速度，目標是 2.5 秒以內。
互動至下一次繪製（INP）代表使用者操作後網頁回應的延遲，目標是 200 毫秒以內。
累計版面配置位移（CLS）代表頁面元素移動的程度，目標是低於 0.1。
從 2024 年起，INP 已正式取代 FID，成為 Core Web Vitals 中的互動指標。
這三項指標會影響使用者體驗，也會作為 Google 排名信號的一部分，因此不應被忽略。
電商網站為什麼容易在 Core Web Vitals 超標？
電商頁面充斥大量商品圖、第三方腳本與動態內容，因此特別容易發生 LCP 過慢、INP 延遲與 CLS 偏高。
電商網站的首屏常包含一張大的商品主圖與輪播圖，圖片未最佳化會直接拖慢 LCP。
追蹤工具、聊天機器人與再行銷 script 會在背景執行，佔用主執行緒並增加 INP。
購物車提示、折價券橫幅與動態推薦區塊可能在載入中改變位置，造成 CLS。
個人化引擎會依使用者行為插入內容，進一步讓版面跳動的風險變高。
因此電商網站的技術團隊必須將 CWV 當成商業績效的一環來管理。
如何測量與診斷 Core Web Vitals？
透過 Search Console、PageSpeed Insights 與 CrUX 資料，可以準確了解電商頁面在真實訪客裝置上的效能表現。
Google Search Console 的「核心網頁指標」報表會分類顯示通過與待改善的網址群組。
PageSpeed Insights 能同時呈現實驗室資料與 CrUX 真實使用者資料，方便交叉比對。
你也可以使用 Chrome DevTools 的 Performance 面板，直接記錄互動事件與長任務。
若需要批次分析大量商品頁，可以藉助 Crawza 或類似爬蟲工具檢查共同資源瓶頸。
記得觀察行動裝置與桌面版的差異，因為電商流量通常以手機為主。
LCP 優化策略：讓商品主圖快速載入
LCP 的改善應從伺服器回應時間、圖片格式與資源優先順序開始。
先確認 LCP 元素是哪一個，通常在商品詳情頁是主圖或標題文字。
將圖片改為 WebP 或 AVIF，並建立適合各種螢幕尺寸的 srcset。
替 LCP 圖片加上 fetchpriority='high'，確保瀏覽器優先下載。
透過 CDN 降低 TTFB，並將伺服器回應時間控制在 0.8 秒以內。
精簡關鍵 CSS，避免不必要的 JavaScript 阻塞首次渲染。
每次上架新品或套用新版型後，都應重新測試 LCP。
INP 優化策略：讓加入購物車與結帳更即時
INP 優化要減少長任務與高成本的第三方腳本，讓每個互動都能在 200 毫秒內回應。
訪客在電商網站最常執行的互動是點擊加入購物車、套用優惠券與送出表單。
這些操作若觸發大量 DOM 更新，就會造成可感知的延遲。
將不重要的第三方腳本延後到 idle 或互動後再載入，是改善 INP 的有效做法。
使用 Web Worker 處理庫存計算或地址驗證等非 UI 工作。
開發時應在低階行動裝置上測試，避免因本機效能太好而忽略真實環境的問題。
CLS 優化策略：避免版位跳動造成誤點
CLS 的改善關鍵是為圖片、廣告與動態內容預留空間，並避免插入元素推擠版面。
為商品圖片設定 aspect-ratio，瀏覽器便能在載入前計算出所需高度。
廣告單位應放置於固定尺寸的容器內，避免載入後改變高度。
促銷通知或客服視窗應使用固定定位層，不影響主內容位置。
若要使用 content-visibility，請預先定義元素的尺寸以免累計位移增加。
版本更新時，透過 Lighthouse CI 自動檢查 CLS 是否超過 0.1。
行動裝置與前端架構的注意事項
行動版網站的架構與資源載入方式，往往決定了 Core Web Vitals 能否達標。
Google 採用行動優先索引，因此手機版效能對 SEO 的重要性超過桌面版。
使用 preconnect 連到 CDN、圖片網域與 API 主機，能減少握手延遲。
選用伺服器端渲染或靜態生成架構，能讓 HTML 較快回傳到瀏覽器。
避免在行動頁載入過度巨大的 JavaScript，優先採用程式碼分割。
定期評估外掛，移除不使用的套件也是成本最低的優化方式。
建立持續優化 Core Web Vitals 的流程
電商品牌應建立每週監控、每月稽核與發布前測試的機制，讓 Core Web Vitals 維持在安全範圍。
先設定基準線，記錄目前主要範本的 LCP、INP 與 CLS 數值。
每週查看 Search Console 的 CrUX 報表，了解真實使用者趨勢。
每次功能改版前，在測試環境執行 PageSpeed Insights 並比較與前版的差異。
將 CWV 改善與訂單轉換率串連，讓行銷與管理階層理解技術投資的回報。
如需外部協助，可參考專業的電商 SEO 服務並搭配 Crawza 工具進行定期稽核。
只要建立固定節奏，Core Web Vitals 就不再是難以掌握的模糊問題。
您可以探索Crawza 價格方案。
常见问题
Core Web Vitals 會影響電商網站的 Google 排名嗎？
會。根據 Google 官方說明，Core Web Vitals 是頁面體驗排名信號的一部分；對競爭激烈的電商關鍵字而言，它可能成為勝出關鍵。
我可以只用 PageSpeed Insights 的分數來判斷 Core Web Vitals 嗎？
PageSpeed Insights 提供實驗室數據與 CrUX 真實數據，建議參考以 CrUX 為主的 Search Console 報表，才能掌握實際訪客體驗。
INP 跟原本的 FID 有什麼不同？
FID 只測量首次輸入的延遲，INP 則統計整個頁面生命週期中最差的互動延遲，能更全面反映電商網站的按鈕與表單操作體驗。
商品圖片如果很多，要如何降低 LCP？
優先優化 LCP 元素，也就是首屏最大圖片；採取 CDN、WebP/AVIF 格式與 fetchpriority 能有效率地縮短載入時間。
電商網站需要優先改善哪一個指標？
這取決於現況。建議先以 Search Console 的「核心網頁指標」報表進行診斷，多數電商通常先從 LCP 或 INP 開始改善。
需要帮助吗？
浏览我们的页面，找到最适合您的内容。
查看更多