CDN 設定優化教學：8 招讓網站速度提升 50%

設定 CDN 只是第一步，正確的優化設定才能發揮 CDN 的最大效益。根據我們的經驗，許多網站在導入 CDN 後只獲得 10-20% 的速度提升，但經過優化後可以達到 50% 甚至更高。本文將分享 8 個實用的 CDN 優化技巧，手把手教你打造最佳設定。

想快速完成優化？如果你希望由專業團隊協助，可以預約架構諮詢，我們幫你打造最佳 CDN 設定。

---

CDN 設定前的準備

評估網站現況

在優化 CDN 之前，先了解網站的現況：

1. 測量基準效能

使用以下工具測試優化前的速度：

• GTmetrix：詳細的效能報告
• PageSpeed Insights：Google 官方工具
• WebPageTest：多地點測試

記錄關鍵指標：

2. 分析流量來源

了解使用者的地理分布，決定 CDN 節點優先級：

• Google Analytics 的地理報告
• 伺服器日誌分析
• CDN 的分析報表

3. 識別可快取內容

將網站內容分類：

想了解更多 CDN 的基礎概念，可以參考我們的完整指南。

選擇適合的 CDN

不同 CDN 有不同的優化能力：

想了解更多 CDN 廠商的差異，可以參考我們的比較文章。如果你正在評估 CDN 費用與定價方案，我們也有完整的費用指南。

備份與測試環境

優化前的安全措施：

1. 備份現有設定：截圖或匯出 CDN 設定
2. 準備測試環境：使用 staging 環境測試
3. 準備回滾計畫：確認如何快速還原

---

CDN 基礎設定

DNS 設定

DNS 是 CDN 生效的關鍵：

1. 選擇正確的 DNS 模式

2. 設定正確的 TTL

• CDN Proxied 記錄：TTL 通常由 CDN 控制
• DNS Only 記錄：建議 300-3600 秒

Origin 設定

正確設定 Origin 是效能的基礎：

1. 使用最近的 Origin

• 選擇離主要使用者近的伺服器
• 考慮使用 Origin Shield 減少回源次數

2. 確保 Origin 效能

• CDN 無法加速 Origin 的處理時間
• 優化資料庫查詢
• 使用應用層快取

3. 安全連線設定

• 使用 HTTPS 連線到 Origin
• 設定 Full (Strict) SSL 模式
• 安裝有效的 SSL 憑證

SSL 憑證設定

最佳實踐：

使用者 ──HTTPS──> CDN Edge ──HTTPS──> Origin Server
        (免費憑證)           (Origin 憑證)

設定步驟：

1. 在 Origin 安裝 SSL 憑證
2. CDN 設定為 Full (Strict) 模式
3. 啟用 HSTS 增強安全性
4. 強制 HTTPS 導向

---

快取策略設定

快取是 CDN 效能的核心，正確的快取策略可以大幅提升速度。

什麼該快取？

應該快取：

• 圖片（JPG、PNG、WebP、GIF、SVG）
• 樣式表（CSS）
• JavaScript 檔案
• 字型檔案（WOFF、WOFF2）
• PDF、影片等媒體檔案

不應該快取：

• 包含個人資料的頁面
• API 回應（除非是公開且不常變動的）
• 需要即時性的內容
• 認證相關頁面

TTL 設定原則

TTL（Time To Live）決定快取的有效期：

設定快取標頭：

在 Origin Server 設定 Cache-Control 標頭：

# Nginx 範例
location ~* \.(jpg|jpeg|png|gif|ico|css|js|woff2)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

location ~* \.html$ {
    expires 1h;
    add_header Cache-Control "public, must-revalidate";
}

快取標頭（Cache-Control）

常用的 Cache-Control 指令：

範例組合：

# 靜態資源（有版本號）
Cache-Control: public, max-age=31536000, immutable

# HTML 頁面
Cache-Control: public, max-age=3600, stale-while-revalidate=86400

# 動態 API
Cache-Control: private, no-cache

# 敏感資料
Cache-Control: private, no-store

動態內容處理

對於動態內容，可以使用以下策略：

1. Edge Side Includes（ESI）

• 頁面主體快取，動態部分即時取得
• 適合有公共區塊和個人區塊的頁面

2. 短時間快取

• 即使只快取 1 分鐘，也能大幅減輕 Origin 負擔
• 適合流量突增的情境

3. Cache Key 自訂

• 根據特定參數（如地區、語言）產生不同快取
• 避免快取到錯誤的內容

---

壓縮與格式優化

Gzip vs Brotli

兩種主流壓縮演算法的比較：

建議： 同時啟用 Brotli 和 Gzip，CDN 會根據瀏覽器自動選擇。

CDN 設定：

• Cloudflare：非 Enterprise 方案的 zone 預設就啟用 Brotli，不需要（也無法）自己去開；儀表板上的 Brotli 開關已於 2024 年 8 月淘汰（詳見 Cloudflare CDN 設定教學）
• CloudFront：需在 Cache Behavior 啟用壓縮（詳見 AWS CloudFront 設定教學）

圖片優化（WebP、AVIF）

圖片通常佔網站流量的 50% 以上，優化效益明顯：

自動格式轉換：

使用 <picture> 標籤：

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="描述">
</picture>

Minify CSS/JS

移除空白、註解等，減少檔案大小：

在建置端做，不要再去 CDN 找開關：

• Cloudflare 已於 2024 年 8 月 5 日淘汰 Auto Minify，儀表板不再提供這個開關，對應的 /zones/:zone_id/settings/minify API 也一併停用——舊教學寫的「Speed → Optimization → Auto Minify」路徑你已經找不到了
• 現在請用建置工具（Vite、webpack、esbuild）或 CMS 的最佳化外掛在產出時就壓好，再交給 CDN 傳輸

---

進階優化技巧

預載入（Preload）

告訴瀏覽器提前載入關鍵資源：

<link rel="preload" href="/styles/critical.css" as="style">

<link rel="preload" href="/fonts/main.woff2" as="font" crossorigin>

<link rel="preload" href="/hero-image.webp" as="image">

Cloudflare Early Hints（HTTP 103）：

• 自動發送 preload 提示
• 在主要回應前就開始載入資源
• 可提升 30% 的載入速度

連線優化（HTTP/2、HTTP/3）

現代協定顯著提升效能：

CDN 設定：

• Cloudflare：預設啟用 HTTP/2、HTTP/3
• CloudFront：需手動啟用 HTTP/3

驗證是否生效：

curl -I --http2 https://example.com
curl -I --http3 https://example.com

智慧路由

進階 CDN 可以選擇最快的路徑：

費用考量：

• Argo：$0.10/GB
• 適合對延遲敏感的應用

對於預算有限的專案，也可以考慮 免費 CDN 方案，許多免費方案已包含基礎的效能優化功能。

優化設定需要專業協助？預約架構諮詢，我們幫你打造最佳 CDN 設定。

---

效能監控與測試

使用 GTmetrix / PageSpeed

GTmetrix 重要指標：

• Performance Score：整體效能分數
• Structure Score：技術優化程度
• Web Vitals：Google Core Web Vitals

PageSpeed Insights 重點：

• 行動版和桌面版分開評分
• 提供具體的優化建議
• 顯示實際使用者體驗數據（CrUX）

測試建議：

• 從不同地點測試
• 執行多次取平均值
• 記錄歷史趨勢

真實用戶監控（RUM）

實驗室測試和真實用戶體驗可能不同：

RUM 工具：

• Google Analytics（Core Web Vitals 報告）
• Cloudflare Web Analytics
• New Relic Browser
• Datadog RUM

監控指標：

• 各地區的載入時間
• 不同網路條件的表現
• 真實的 Core Web Vitals

快取命中率分析

快取命中率是 CDN 效能的關鍵指標：

如何提升命中率：

1. 增加 TTL
2. 減少 Query String 變化
3. 使用一致的 URL
4. 檢查是否有 no-cache 標頭

Cloudflare 查看方式： Analytics → Cache → Cache Hit Ratio

---

常見設定錯誤

快取設定錯誤

1. 快取了不該快取的內容

問題：使用者看到其他人的資料

解決：

• 檢查 Cookie 是否正確處理
• 確認登入後的頁面使用 Cache-Control: private
• 使用 CDN 的快取繞過規則

2. 沒有快取應該快取的內容

問題：每次都回源，CDN 效益低

解決：

• 檢查 Origin 的 Cache-Control 標頭
• 移除不必要的 no-cache
• 在 CDN 設定強制快取規則

Origin 負載過重

症狀：

• 快取命中率低
• Origin 回應時間長
• CDN 錯誤增加

解決方案：

1. 檢查快取規則是否正確
2. 增加 TTL
3. 使用 Origin Shield
4. 優化 Origin 效能

SSL 混合內容

問題： HTTPS 頁面載入 HTTP 資源

解決：

• 啟用 Automatic HTTPS Rewrites
• 檢查並修正程式碼中的硬編碼 HTTP URL
• 使用相對路徑或 protocol-relative URL

快取導致內容不更新

解決方案：

1. Cache Busting

   • 檔名加版本號：style.v1.2.3.css
   • URL 加 hash：style.css?v=abc123

2. 快取失效

   • Cloudflare：Purge Cache
   • CloudFront：Create Invalidation

3. 降低 TTL

   • 對於經常更新的內容，使用較短的 TTL

---

各平台設定範例

WordPress + CDN

推薦設定：

1. 安裝快取外掛

   • WP Rocket
   • W3 Total Cache
   • LiteSpeed Cache

2. Cloudflare 設定

   • 啟用 Automatic Platform Optimization（APO）
   • 設定 Page Rules 排除 wp-admin

3. Page Rules 範例

   *example.com/wp-admin/*
   → Cache Level: Bypass
   → Security Level: High
   
   *example.com/wp-login.php*
   → Cache Level: Bypass
   

Next.js + CDN

推薦設定：

1. 設定 Cache-Control 標頭

   // next.config.js
   module.exports = {
     async headers() {
       return [
         {
           source: '/_next/static/:path*',
           headers: [
             {
               key: 'Cache-Control',
               value: 'public, max-age=31536000, immutable',
             },
           ],
         },
       ]
     },
   }
   

2. CDN 設定

   • /_next/static/* → 長期快取
   • /api/* → 不快取
   • 其他頁面 → 根據 ISR/SSR 設定

電商平台 + CDN

關鍵設定：

1. 商品頁面

   • 快取公開內容
   • 價格/庫存通過 API 即時取得

2. 購物車/結帳

   • 絕對不快取
   • 設定 Cache-Control: private, no-store

3. 搜尋結果

   • 短時間快取（1-5 分鐘）
   • 或不快取

4. CDN 規則範例

   /cart/* → Bypass Cache
   /checkout/* → Bypass Cache
   /account/* → Bypass Cache
   /products/* → Cache 1 day
   /static/* → Cache 1 year
   

---

結論：持續優化的心態

CDN 優化不是一次性的工作，而是持續改進的過程：

優化循環：

1. 測量現況
2. 識別瓶頸
3. 實施改進
4. 驗證效果
5. 重複以上步驟

關鍵指標追蹤：

• 快取命中率 > 80%
• TTFB < 200ms
• LCP < 2.5s
• Core Web Vitals 全綠

定期檢查：

• 每月檢視 CDN 分析報表
• 每季評估是否需要調整設定
• 重大更新後測試效能影響

架構對了，速度自然快。預約架構諮詢，讓我們幫你打造最佳 CDN 設定。CloudInsight 團隊已協助超過 50 家企業優化 CDN 設定，平均速度提升 45% 以上。

---

常見問題 FAQ

CDN 設定後網站變慢了怎麼辦？

可能原因：(1) Rocket Loader 與 JavaScript 不相容；(2) SSL 模式設定錯誤造成迴圈；(3) Origin 回應變慢。建議先關閉進階功能，逐一開啟測試找出問題。

如何知道 CDN 快取有沒有生效？

檢查 HTTP Response Header 中的 cf-cache-status（Cloudflare）或 x-cache（CloudFront）。HIT 表示快取命中，MISS 表示未命中。也可以使用瀏覽器開發者工具查看。

更新內容後使用者看到舊版本怎麼辦？

解決方案：(1) 使用 Cache Busting，在檔案 URL 加入版本號；(2) 主動清除 CDN 快取；(3) 調低 TTL 設定。建議對靜態資源使用版本號策略。

CDN 會影響 Google Analytics 的數據嗎？

不會。CDN 只是快取和傳輸內容，不會影響 JavaScript 追蹤碼的執行。但要注意，如果快取了包含追蹤碼的頁面，確保追蹤碼能正確執行。

多個 CDN 可以同時使用嗎？

可以但不建議。常見做法是用一個主要 CDN 處理網站內容，另一個專門處理特定資源（如 jsDelivr 載入函式庫）。同時使用兩個 CDN 處理相同內容會增加複雜度。