⚡ 30秒快速掌握重點
慢 100ms 轉換掉 1-2%、慢 1 秒跳出率差 32%。本文涵蓋 Core Web Vitals 三指標、首屏優化、佈局跳動、檢測工具、10 大絕招。
速度的四大影響
- 載入 1 秒 vs 3 秒：跳出率差 32%
- 慢 100ms：轉換率掉 1-2%
- Core Web Vitals 是 Google 排名因素
- 89% 顧客「網站慢就走」
Core Web Vitals 三指標
- LCP：最大內容繪製，< 2.5s 為佳
- INP：互動回應，< 200ms
- CLS：佈局位移，< 0.1
三個都達標才能在搜尋排名加分。2024 起 INP 取代 FID。
10 大優化絕招
- 1. 圖片 WebP/AVIF + Lazy Load
- 2. CSS 最小化 + 合併
- 3. JS 延遲載入 + 拆分
- 4. 字體 preconnect + font-display: swap
- 5. CDN（Cloudflare）
- 6. 瀏覽器快取（Cache-Control）
- 7. Gzip / Brotli 壓縮
- 8. 移除未用 CSS/JS
- 9. 預載入關鍵資源（preload）
- 10. 升級伺服器（HTTP/2、HTTP/3）
提升 LCP（首屏速度）
- 首屏圖片預載入
- 主圖用 WebP/AVIF
- 字體 preconnect
- 伺服器回應快（< 200ms）
- 移除阻擋性 CSS/JS
多數電商 LCP 卡在「首屏大圖未優化」與「太多第三方 JS」。
降低 CLS（佈局跳動）
- 所有圖片設 width/height
- 字體用 font-display: swap
- 廣告/推薦欄位預留空間
- 動態插入內容避免
- 字體 fallback 大小相近
第三方 JS 的陷阱
電商常用第三方 JS：1. 行銷追蹤（GA、Pixel）；2. 客服機器人；3. 評論系統；4. 即時通知；5. 廣告再行銷。每個拖慢 100-500ms。建議：1. 用 async/defer；2. 延遲到互動後載入；3. 定期審計移除未用；4. 用 Google Tag Manager 統一管理。
伺服器與基礎建設
- 選台灣或亞洲機房（顧客近）
- 用 HTTP/2 或 HTTP/3（多工傳輸）
- 啟用 Gzip / Brotli 壓縮
- CDN 全球分發
- SSD 而非 HDD
檢測工具
- PageSpeed Insights（Google 官方）
- Lighthouse（Chrome 內建）
- WebPageTest（深度分析）
- GTmetrix（友善介面）
- Chrome DevTools Performance
每月跑一次，目標：行動裝置 PageSpeed 分數 90+。
優化前後對比範例
典型電商網站優化前：LCP 4.8s、CLS 0.25、PageSpeed 35。優化後：LCP 1.8s、CLS 0.05、PageSpeed 92。改變：1. WebP + Lazy Load；2. 字體優化；3. CDN；4. 移除 3 個第三方 JS。每月轉換率 +18%、跳出率 -25%。
🚫 電商大忌：千萬不要犯這些錯誤
- 裝太多追蹤碼、聊天機器人
- 沒 CDN，顧客遠地載入慢
- 圖片沒壓縮，5MB 直接上線
- 動態載入推薦商品，CLS 高跳分
- 沒定期測試速度，問題越積越多
🚀 Shopto 如何幫您解決這個問題？
NT$24,800/年起，享受完整電商解決方案：
✓Cloudflare CDN 內建
✓圖片自動 WebP 轉換
✓字體與 CSS 自動優化
✓Core Web Vitals 監控
✓PageSpeed 90+ 範本
常見問題解答
Q：網站速度多重要？
慢 100ms 轉換掉 1-2%、慢 1 秒跳出率差 32%、Core Web Vitals 影響 SEO 排名。
Q：Core Web Vitals 是什麼？
三指標：LCP < 2.5s、INP < 200ms、CLS < 0.1。三個都達標 SEO 加分。
Q：如何提升 LCP（首屏速度）？
首屏圖預載、WebP/AVIF、字體 preconnect、伺服器 < 200ms、移除阻擋 CSS/JS。
Q：如何降低 CLS（佈局跳動）？
圖片設 width/height、font-display: swap、預留空間、避免動態插入。
Q：如何快速檢測網站速度？
PageSpeed Insights、Lighthouse、WebPageTest、GTmetrix、Chrome DevTools。目標行動 90+。
準備好打造成功電商了嗎？
立即加入 Shopto，讓專業平台幫您解決所有電商難題
