第 25 章：網站速度優化

Google 自 2010 年起就將網站速度納入排名信號，2018 年更進一步推出「速度更新（Speed Update）」，明確宣布行動版頁面的載入速度直接影響行動搜尋排名。

數據顯示：頁面載入時間從 1 秒增加到 3 秒，跳出率增加 32%。從 1 秒增加到 5 秒，跳出率增加 90%。

速度既是排名因子，也是轉換率殺手。

PageSpeed Insights 分數解讀

策略 1：圖片優化（通常能省下 40-60% 的載入時間）

這是最簡單、效果最大的優化項。

策略 2：啟用瀏覽器快取（Browser Caching）

設定伺服器告訴瀏覽器「這些資源可以暫存，不用每次都下載」。

Apache .htaccess 範例：

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
</IfModule>

效果：回訪者的頁面載入速度可提升 50-80%。

策略 3：壓縮與最小化資源

策略 4：使用 CDN（內容傳遞網路）

CDN 運作原理：將網站靜態資源複製到全球多個伺服器節點，使用者從距離最近的節點獲取資源。

策略 5：減少 HTTP 請求

每個檔案（CSS、JS、圖片、字體）都需要一個 HTTP 請求。

<!-- async: 下載完就執行，不保證順序 -->
<script src="analytics.js" async></script>

<!-- defer: 等 HTML 解析完再按順序執行 -->
<script src="main.js" defer></script>

策略 6：伺服器端優化

投入成本
  低 │
     │  Q2: 中優先          │  Q1: 最高優先
     │  合併 CSS/JS         │  圖片優化 (WebP + 壓縮)
     │  減少 HTTP 請求       │  啟用瀏覽器快取
     │                      │  啟用 Gzip/Brotli
     ├──────────────────────┤
     │  Q4: 有空再做        │  Q3: 值得投入
     │  CSS Sprites         │  使用 CDN
     │  字體子集化           │  升級主機方案
     │                      │  升級 HTTP/2
  高 │                      │
     └──────────────────────┴────→ 速度提升
        小幅改善            大幅改善

• [ ] 圖片使用 WebP/AVIF 格式
• [ ] 圖片壓縮至合理大小（< 200KB）
• [ ] 實施了圖片懶加載
• [ ] 啟用了瀏覽器快取
• [ ] CSS/JS 已最小化
• [ ] 啟用了 Gzip 或 Brotli 壓縮
• [ ] 非關鍵 JS 使用 defer/async
• [ ] 使用 CDN 加速靜態資源
• [ ] 主機方案足以應付流量
• [ ] PageSpeed Insights 分數 ≥ 90（桌面版）≥ 70（行動版）

1. 速度 = 排名因子 + 轉換率殺手，1 秒到 3 秒跳出率增 32%
2. 圖片優化效果最大——通常能省 40-60% 載入時間
3. 瀏覽器快取 + Gzip + CDN 是三大基礎速度優化
4. defer vs async：defer 保證執行順序，async 不保證
5. PageSpeed Insights ≥ 90（桌面）/ ≥ 70（行動） 是合理的目標
6. 速度優化不是一次性工程——每次發布新內容都要檢查

| ← 第 24 章：結構化資料 Schema Markup | 回索引 | 第 26 章：Core Web Vitals 完整解析 → |

延伸閱讀：網站 SEO 學習與操作手冊