電商網站速度優化：Core Web Vitals 與行動體驗實戰

做電商這幾年，我最常被老闆問的一句話是：「我的網站功能都齊全了，為什麼客人加到購物車就跑掉？」很多時候答案不在行銷預算，而在那一兩秒的等待。台灣消費者大多用手機逛街，網路時好時壞，頁面只要慢半拍，手指就滑去下一家了。網站速度不是工程師的內部 KPI，而是實實在在影響營收的轉換因子。這篇文章想用顧問實際輔導品牌的角度，把 Core Web Vitals 講清楚，也把行動體驗該怎麼動手優化講到能落地。

先搞懂 Core Web Vitals 在量什麼

Google 把使用者體驗濃縮成三個核心指標，也就是 Core Web Vitals。它們不是抽象分數，而是模擬真人打開頁面時，眼睛和手指真正感受到的東西。先把定義弄對，後面的優化才不會做白工。

• LCP（Largest Contentful Paint，最大內容繪製）：頁面最主要的那塊內容（通常是首圖或標題大圖）多久才畫出來。它代表「我等多久才看到重點」。
• INP（Interaction to Next Paint，互動到下次繪製）：你點下按鈕後，畫面多久才有反應。2024 年起 INP 已正式取代舊的 FID，更貼近真實互動的卡頓感。
• CLS（Cumulative Layout Shift，累積版面位移）：頁面載入過程中元素亂跳的程度。最惱人的就是你要按「結帳」，廣告突然擠進來，手一滑點到別的地方。

Google 官方對這三項各有「良好」的門檻區間，但我建議品牌端不要只盯著及不及格。真正要看的是這些指標背後對應的真實情境：客人有沒有在第一時間看到商品、點按鈕會不會卡、版面會不會害他誤觸。把指標翻譯成人話，團隊才知道要修哪裡。

LCP 太慢，多半是圖片在拖累

電商頁面最重的元素幾乎都是圖片，商品主圖、Banner、情境照一張比一張大。LCP 慢，第一個要查的就是圖片。我輔導品牌時，通常會從這幾個方向逐一檢查：

• 用對格式：把 JPG、PNG 換成 WebP 或 AVIF，畫質幾乎無感，檔案卻能明顯瘦身。
• 給對尺寸：手機上顯示一張寬度幾百像素的圖，卻載入一張原始幾千像素的大圖，是常見的浪費。用響應式圖片（srcset）讓不同裝置抓對應尺寸。
• 首屏圖優先載入：第一眼會看到的主圖不要設成延遲載入（lazy load），反而該優先；真正在下方、要捲動才看到的圖片才用 lazy load。
• 壓縮要做但別過頭：壓到糊掉反而傷品牌質感，找一個畫質與檔案大小的平衡點。

除了圖片，伺服器回應慢、第三方追蹤碼塞太多、字體檔太大，也都會拖累 LCP。但就我的經驗，多數台灣電商網站先把圖片整頓好，LCP 就會有感改善，這是投報率最高的一步。

INP 卡頓，問題常出在塞太多腳本

互動卡卡的，根源通常是頁面塞了一堆 JavaScript。每多裝一個彈窗外掛、一段聊天機器人、一組再行銷追蹤碼，瀏覽器就多一份負擔。客人點按鈕時，主執行緒正忙著跑這些腳本，畫面自然反應不過來。

要改善 INP，方向是「讓主執行緒喘口氣」：把非必要的腳本延後載入或非同步載入，定期盤點那些裝了卻沒在用的外掛、追蹤碼，該砍就砍。很多品牌的網站是長年累積下來的，行銷檔期結束的活動腳本沒人清，越積越多。固定做一次健檢，把多餘的東西清掉，互動順暢度往往就回來了。

CLS 跳動，留好版位就解決一大半

版面位移看起來小事，卻最傷結帳體驗。解法其實不難，核心觀念是「先把位子留好，內容再進來」：

• 圖片和影片一律標明寬高（width、height）或設定長寬比，瀏覽器才知道要留多大的空間。
• 廣告、橫幅、推薦商品這類後載入的區塊，先用固定高度的容器卡好位子。
• 網頁字體載入時做好備援設定，避免字體一換整段文字位移。
• 按鈕、表單這些互動元件，不要等到最後才硬塞進畫面。

把這些細節顧好，客人從瀏覽到結帳的動線就穩定，不會發生「正要付款結果點錯」的窘況。

行動優先：先讓手機版站得住

台灣電商的流量重心早就壓在手機上。Google 也採行動優先索引，等於是「以手機版的表現來評斷你整個網站」。所以優化順序要倒過來想：先確保手機體驗到位，桌機自然不會差。

實務上要顧的，是手機這個相對受限的環境：網路可能在 4G 與 Wi-Fi 之間切換、螢幕小、手指點按需要夠大的觸控區。按鈕別太小太擠、文字級數要看得清、表單欄位盡量精簡，能用裝置自動帶入的就別讓客人手打。這些不是炫技，而是把摩擦一個一個拿掉，讓客人能順順走到結帳那一步。

快取策略：別讓客人每次都重抓

快取的精神是「重複的東西不要一直重抓」。Logo、CSS、字體、共用的商品圖這類不常變動的靜態資源，設定好瀏覽器快取，回訪的客人就能直接用本機存好的版本，開站快很多。搭配 CDN，把資源放到離使用者更近的節點，台灣各地連線速度也會更平均。

要注意的是改版或換檔期時，快取設定要能正確更新，否則客人看到的是舊版頁面或舊價格就麻煩了。一般做法是檔名帶版本號，內容一變、檔名就變，瀏覽器自然會抓新的。這部分牽涉技術設定，如果團隊沒有工程資源，會建議找熟電商架構的夥伴一起把規則訂好。

把速度優化變成固定習慣

速度優化不是上線一次就一勞永逸。電商網站天天上新品、換 Banner、接新工具，速度會隨著時間慢慢劣化。我會建議品牌把效能健檢排進固定節奏，例如每季用工具量一次三大指標，搭配真實使用者的數據一起看，發現退步就回頭追原因。把它變成像盤點庫存一樣的例行公事，網站才不會在不知不覺中越來越慢。

如果你不確定自家網站現在卡在哪一關，與其憑感覺猜，不如先做一次完整體檢。美勢科技長期協助台灣品牌做電商代營運，從技術效能、轉換動線到行動體驗都能一起盤。歡迎先用我們的 電商網站健檢 找出最該優先處理的環節，也可以參考 SEO 健檢工具 或預約 顧問諮詢，由我們陪你把速度真正轉化成業績。