Core Web Vitals 是 Google 為評估網頁載入體驗而設的一組核心指標,香港網店要提升搜尋排名與用戶體驗,就必須由 LCP、INP 與 CLS 三方面入手。
- LCP 的理想值應低於 2.5 秒,INP 應低於 200 毫秒,CLS 應低於 0.1。
- Google Search Console 提供 Core Web Vitals 報告,可顯示真實用戶的效能分佈。
- 為 LCP 圖片加入 fetchpriority=high 有助加快最大內容元素的載入速度。
- 使用 font-display: swap 可以減低字型載入造成的版面偏移。
目录
了解更多,请查看我们的電商 SEO 工具推薦页面。
甚麼是 Core Web Vitals?
Core Web Vitals 包含 LCP、INP 與 CLS,分別量度載入速度、互動延遲與版面穩定性,是 Google 排名因素之一。
Core Web Vitals 是 Google 提出的效能指標組合,集中評估真實用戶在網頁上的載入體驗。LCP(Largest Contentful Paint)量度最大內容元素出現所需的時間;INP(Interaction to Next Paint)量度用戶每次互動的延遲;CLS(Cumulative Layout Shift)則量度版面突然移動的程度。
根據 Google 建議,LCP 應低於 2.5 秒,INP 應低於 200 毫秒,CLS 應低於 0.1。香港用戶慣常用流動裝置瀏覽網店,網絡環境與裝置效能的差異,令這些指標更直接影響跳出率與訂單轉換率。
如何量度與診斷 Core Web Vitals?
使用 Google Search Console、PageSpeed Insights 與 CrUX 數據,可以快速找出香港用戶實際遇到的效能瓶頸。
Google Search Console 的 Core Web Vitals 報告會按網址群組顯示 LCP、INP 與 CLS 的實際分佈,方便你分辨「需要改善」與「良好」的頁面。PageSpeed Insights 則同時提供實驗室數據與 CrUX 實地數據,並列出具體優化建議。
建議以真實用戶數據為優先,因為香港的網絡供應商、手機型號與使用習慣,可能令 Lab 數據與實際體驗不一致。定期截取報告並記錄版本變更,有助判斷每次改動是否真正改善效能。若你尚未制定系統化的監察流程,可參考電商 SEO 工具推薦。
如何優化 LCP?
LCP 優化重點在於減短伺服器回應時間、預載關鍵圖片與移除渲染阻斷資源。
LCP 是 Core Web Vitals 中最常被忽略的一環,尤其當首屏依賴大型產品圖片或輪播圖片時。最直接的做法是選用優質香港或亞太區主機,並配合 CDN 將檔案盡量派送到用戶附近。
圖片應改用 WebP 或 AVIF,並為 LCP 圖片加入 fetchpriority=high 與 preload。避免為 LCP 圖片使用過大的畫布尺寸,同時要把 CSS 與 JavaScript 中阻礙渲染的部分減至最少。這樣做不單改善 Google 排名,也會令首次進入網店的用戶更快看到產品。
如何優化 INP?
INP 優化需要縮短 JavaScript 執行時間、避免長任務,並優先處理用戶輸入。
INP 反映頁面在用戶點擊按鈕或加入購物車時的反應速度。常見問題包括第三方追蹤腳本過多、JavaScript 在主執行緒上佔用太長時間,以及彈出視窗在互動時才載入。
解決方案包括把非必要腳本延遲載入、將大型程式碼拆分成細小區塊,並使用 Web Worker 處理複雜計算。前端框架的 Hydration 成本亦要留意;伺服器端渲染或靜態生成可減少用戶下載的 JavaScript。若你需要全面檢查網站技術體質,可以了解Crawza 服務方案。
如何優化 CLS?
CLS 優化需要為圖片與廣告預留尺寸、避免動態插入內容,並採用合適的字型載入策略。
CLS 持續偏高,往往源於產品圖片沒有設定寬高比例、廣告橫額在載入後佔用新空間,或字型載入完成後令文字重新排版。為所有 img 與 video 加入尺寸屬性,是最基本的修正。
廣告位置應預留固定大小的容器,並避免在用戶可能點擊的位置上方插入內容。字型方面可以改用 font-display: swap,並使用 size-adjust 減低替換字型時的跳動。定期檢查手機版與桌面版,因為兩者的版面變化會產生不同 CLS 分數。
結構化資料與 SEO 內容如何配合?
透過 Schema.org 產品結構化資料與清晰的內容架構,可以讓 Google 更理解網店頁面並增加出現 Rich Result 的機會。
Core Web Vitals 屬於技術效能,但 Google 排名仍然需要內容與結構化資料配合。產品頁應加入 Product Schema,標明價格、庫存與評價;分類頁則要使用清楚的標題與內部連結,方便搜索引擎理解網站層級。
若想深入實作,可參考產品結構化資料指南。另外,香港網店在制定預算時,也要考慮技術優化與內容撰寫的長期成本,詳情可看香港網店 SEO 定價指南。
持續監察與常見錯誤
Core Web Vitals 不是一次性工作,需要持續監察數據,並修正第三方指令碼、圖片與伺服器設定在改版後的變化。
很多香港網店只在推出新功能時檢查效能,結果第三方追蹤碼或聊天外掛令 INP 突然惡化。最理想做法是每星期查看 Search Console,並在每次改版前後比較頁面表現。
常見錯誤包括忽略手機網絡的實際速度、過度壓縮圖片令質素下降,以及使用未經測試的網站外掛。另一項容易被忽略的是快取策略,如果 HTML 與 API 回應未有適當快取,伺服器回應時間便會拖長 LCP。將 Core Web Vitals 納入常規 SEO 工作,才能長期維持 Google 排名與用戶體驗。
您可以探索Crawza 服務方案。
常见问题
Core Web Vitals 對香港網店排名影響有多大?
Core Web Vitals 是 Google 排名因素之一,但並非唯一因素。若頁面內容與連結品質相同,效能較好的網店通常獲得更高排名;在香港流動裝置為主的市場,影響尤其明顯。
應該先改善 LCP、INP 還是 CLS?
建議先查看 Google Search Console 的 Core Web Vitals 報告,找出「需要改善」且流量較高的頁面。一般情況下,LCP 載入時間與 INP 互動延遲對購物流程影響較大,應優先處理;CLS 則可透過預留尺寸快速修正。
使用 Shopify 或 WooCommerce 也可以優化 Core Web Vitals 嗎?
可以。Shopify 需要謹慎選擇應用程式與圖片格式,WooCommerce 則要控制外掛數量、使用快取外掛並優化主機效能。無論使用哪種平台,同一套 Core Web Vitals 原則都適用。
如何查看真實用戶的 Core Web Vitals 數據?
最直接的方法是使用 Google Search Console 的 Core Web Vitals 報告,或使用 PageSpeed Insights 中的 CrUX 資料。這些數據來自真實 Chrome 用戶,比僅運行本地測試更能反映香港用戶的體驗。