先講結論：電商網站速度不是技術潔癖，而是直接影響轉換與廣告成本的營收槓桿。我們在 ECPRO 電商博士編輯部實測逾十萬個台灣電商網站，看到的共同痛點是「圖片太肥、第三方腳本太多、主視覺載入太慢」這三件事，而它們剛好對應 Google 的 Core Web Vitals 三大指標。要快速見效，先量測、再砍肥、最後處理版面位移，順序對了一個下午就能看到改善。
先搞懂 Core Web Vitals 三個指標
Core Web Vitals（核心網頁指標，簡稱 CWV）是 Google 用來衡量「真實使用者體驗」的三個量化指標，也是搜尋排名的參考訊號之一。對電商來說，它們同時影響 SEO 與下單意願，務必同時顧好。
- LCP（最大內容繪製）：頁面最大區塊（通常是主視覺或商品大圖）載入完成的時間，建議落在 2.5 秒以內為良好，超過 4 秒就屬於差。
- INP（互動到下次繪製）：使用者點擊或輸入後，畫面反應的延遲，已取代舊的 FID 指標，建議在 200 毫秒以內。
- CLS（累積版面位移）：頁面載入過程中元素亂跳的程度，建議分數低於 0.1，數字越低越穩。
三個指標的及格標準是「桌機與手機都要過」，而台灣電商流量手機普遍佔七成以上，請務必以手機數據為主要戰場。想先確認自己站體用了哪些拖慢速度的技術與外掛，可以用我們的 技術檢測工具 快速掃描一次。
第一步：先量測，別憑感覺優化
速度優化最常見的錯誤，是工程師憑感覺亂改，結果改了一堆卻沒動到瓶頸。正確做法是先用工具抓出真實數據與最大拖累項。
- 用 Google PageSpeed Insights 或 Lighthouse 跑首頁、商品頁、購物車三個關鍵頁面，記下 LCP / INP / CLS 的起始分數。
- 區分「實驗室數據」與「真實使用者數據（CrUX）」，後者才是 Google 排名實際看的依據。
- 把問題依「影響大、改動小」排序，優先處理 CP 值最高的項目，例如圖片與字體。
建議每次只改一類問題就重新量測，才能確認哪個動作真正有效，避免一次改十項卻不知道是哪項起作用。
第二步：圖片與資源瘦身（最高 CP 值）
依我們的觀察，台灣電商網站變慢的頭號元兇就是圖片。商品圖動輒兩三 MB、主視覺沒壓縮、首屏塞滿輪播，LCP 自然破表。這一步通常能帶來最明顯的改善。
- 改用次世代格式：把 JPG / PNG 轉成 WebP 或 AVIF，檔案常可縮小三到七成而肉眼幾乎無感。
- 尺寸對齊用途：列表縮圖不該載入原始大圖，依顯示寬度提供對應尺寸，並善用 srcset 讓手機載小圖。
- 延遲載入：首屏以下的圖片加上 lazy load，但首屏主視覺反而要優先載入、不要 lazy。
- 控制首屏輪播：自動輪播 banner 是 LCP 殺手，建議首圖直接輸出靜態，其餘圖延後載。
第三步：管好第三方腳本與字體
電商站常掛滿廣告追蹤碼、客服外掛、評論工具、聊天機器人，每一支腳本都在搶頻寬與主執行緒，是 INP 變差的主因。客服與聊天機器人雖然重要，但載入方式要講究；若你還在評估要不要導入對話式客服，可參考我們整理的 聊天機器人選型工具，挑載入輕量、支援延遲初始化的方案。
- 盤點所有第三方標籤，移除已停用或重複的追蹤碼，能用 GTM 統一管理就別散落各處。
- 非必要腳本加上 async 或 defer，避免阻塞渲染；客服 widget 改為使用者捲動或互動後再載入。
- 自訂字體只保留實際用到的字重與字集，中文字體務必做子集化，否則動輒數 MB。
第四步：消除版面位移與後端延遲
CLS 變差幾乎都來自「沒先預留空間」。圖片、廣告、嵌入內容載入後把文字往下推，使用者正要點按鈕就被推開，體驗很差也容易誤觸。
- 所有圖片與影片明確指定寬高（或 aspect-ratio），讓瀏覽器先留好版位。
- 字體載入使用 font-display: swap，並盡量讓備援字體與正式字體尺寸接近，減少跳動。
- 後端方面，開啟 CDN、啟用快取、壓縮回應（gzip / brotli），縮短伺服器回應時間（TTFB）。
若不確定名詞或想補基礎觀念，可查我們的 電商術語表；更多實戰案例與優化教學，歡迎逛 ECPRO 部落格。把速度當成長期經營的一環，每季回頭量測一次，業績會替你說話。