速度優化
Google 的 Core Web Vitals 把網站速度列為排名因素。更直接的影響：每慢 1 秒，轉化率下降 7%。
了解你現在的速度
測試工具：
| 工具 | 用途 | 網址 |
|---|---|---|
| Google PageSpeed Insights | 綜合評分 + 具體建議 | pagespeed.web.dev |
| GTmetrix | 詳細瀑布圖分析 | gtmetrix.com |
| Shopify 速度報告 | Shopify 內建評分 | 後台 → 主題 → 速度 |
| WebPageTest | 真實設備測試 | webpagetest.org |
目標分數： - 桌面版 > 80 - 手機版 > 60（手機通常更低，不要氣餒）
Core Web Vitals 三大指標
Google 評分核心：
| 指標 | 說明 | 好的標準 | 影響 |
|---|---|---|---|
| LCP 最大內容繪製 | 最大元素載入時間 | < 2.5 秒 | 用戶感知速度 |
| FID 首次輸入延遲 | 第一次互動響應時間 | < 100ms | 互動響應感 |
| CLS 累積佈局偏移 | 元素意外位移 | < 0.1 | 頁面穩定性 |
速度優化優先清單
優先級 1：圖片優化（影響最大）
圖片通常占頁面體積的 60–80%，是速度優化的重頭戲。
格式選擇：
JPG → 照片（商品圖）
PNG → 需要透明背景的圖
WebP → 現代格式，比 JPG 小 30%（Shopify 自動轉換）
SVG → Logo、圖標
尺寸規範：
| 圖片用途 | 建議最大尺寸 |
|---|---|
| 商品主圖 | 2048 × 2048px，< 500KB |
| 橫幅圖 | 2560 × 1440px，< 1MB |
| 系列縮圖 | 800 × 800px，< 200KB |
| 博客封面 | 1200 × 630px，< 300KB |
壓縮工具： - TinyPNG / TinyJPG（免費，在線壓縮） - Squoosh（Google 開發，免費） - Shopify 自動轉 WebP（無需操作，Shopify CDN 自動處理）
優先級 2：減少 App 數量
每個 App 都可能在頁面添加 JavaScript 和 CSS 文件：
每個 App 額外加載時間：50ms–500ms
10 個 App = 最多 5 秒額外加載時間
診斷方法： 1. 在 Google PageSpeed Insights 的「移除未使用的 JavaScript」中查看哪些 App 在拖慢你 2. 停用不活躍的 App（停用不如徹底卸載，卸載才能移除遺留代碼）
優先級 3：字體優化
常見問題： 加載 Google Fonts 需要額外 DNS 解析時間
解法：
1. 優先使用 Shopify 主題內建字體（無需外部加載）
2. 如果必須用 Google Fonts，在主題 CSS 中使用 font-display: swap（防止字體加載時頁面空白）
優先級 4：主題代碼優化
- 不要 在主題中留下已停用 App 的遺留代碼
- 使用 Dawn 等官方主題（性能最優化）
- 避免使用過多動畫和視差效果
Lazy Loading（延遲載入）
讓圖片只在進入視窗時才載入：
Shopify 現代主題（Dawn 等）已默認啟用 loading="lazy"，不需要手動設置。
如果你的主題不支持：在 <img> 標籤添加 loading="lazy" 屬性（需要在主題代碼中修改）。
如何在 PageSpeed Insights 讀懂報告
報告分成四個類別：
| 類別 | 含義 | 你要做什麼 |
|---|---|---|
| 移除未使用的 JavaScript | 有 JS 加載但沒被用到 | 查看是哪個 App 造成的，考慮卸載 |
| 減少伺服器響應時間 | 這是 Shopify 負責的 | 通常無法改變 |
| 適當調整圖片大小 | 圖片太大 | 壓縮並裁切到正確尺寸 |
| 延遲加載螢幕外圖片 | 圖片沒有 lazy loading | 確認主題支持 lazy loading |
速度 vs 功能的取捨
速度優化有時需要犧牲功能：
| 功能 | 對速度的影響 | 建議 |
|---|---|---|
| 大型輪播橫幅 | 高（多張大圖） | 改用單張靜態圖 |
| 視頻背景 | 極高 | 改用靜態圖或 GIF 縮圖 + 點擊播放 |
| 聊天窗口（Tidio/Gorgias） | 中（加載 JS） | 使用延遲加載版本 |
| 評價 Widget | 低到中 | 確保只在商品頁加載 |
| 彈窗 App | 中 | 設為延遲 3 秒後才觸發 |
本章執行清單
- [ ] 用 Google PageSpeed Insights 測試首頁和最重要的商品頁
- [ ] 壓縮所有超過 500KB 的商品圖片
- [ ] 卸載所有你不用的 App（不只是停用）
- [ ] 確認 Core Web Vitals 三個指標都達標（LCP < 2.5s, CLS < 0.1）
- [ ] 在 Google Search Console 查看 Core Web Vitals 報告
下一節：Schema 結構化數據——讓 Google 在搜索結果顯示你的評分、價格和庫存。