CDN 設定優化教學：8 招讓網站速度提升 50%
重點摘要
CDN 優化前準備：測量基準、分析流量來源、識別可快取內容
快取 TTL 建議：靜態資源 1 年、HTML 1 小時、API 依需求
Cache-Control 關鍵：public、immutable、s-maxage 分層控制
SSL 設定：採用 Full (Strict) 模式並啟用 HSTS
效能指標目標：TTFB < 200ms、LCP < 2.5s、CLS < 0.1
優化成效：正確設定可將網站速度提升 50% 以上
設定 CDN 只是第一步，正確的優化設定才能發揮 CDN 的最大效益。根據我們的經驗，許多網站在導入 CDN 後只獲得 10-20% 的速度提升，但經過優化後可以達到 50% 甚至更高。本文將分享 8 個實用的 CDN 優化技巧，手把手教你打造最佳設定。
想快速完成優化？如果你希望由專業團隊協助，可以預約架構諮詢，我們幫你打造最佳 CDN 設定。
CDN 設定前的準備
評估網站現況
在優化 CDN 之前，先了解網站的現況：
1. 測量基準效能
使用以下工具測試優化前的速度：
GTmetrix：詳細的效能報告
PageSpeed Insights：Google 官方工具
WebPageTest：多地點測試
記錄關鍵指標：
指標說明目標值TTFB首位元組時間< 200msLCP最大內容繪製< 2.5sFCP首次內容繪製< 1.8sCLS累計版面位移< 0.1
2. 分析流量來源
了解使用者的地理分布，決定 CDN 節點優先級：
Google Analytics 的地理報告
伺服器日誌分析
CDN 的分析報表
3. 識別可快取內容
將網站內容分類：
類型範例建議快取時間靜態資源圖片、CSS、JS、字型1 年動態但少變文章頁面、商品頁1 天 - 1 週動態常變使用者資料、即時價格不快取或短時間敏感資料會員專區、結帳頁不快取
想了解更多 CDN 的基礎概念，可以參考我們的完整指南。
選擇適合的 CDN
不同 CDN 有不同的優化能力：
CDN優化功能Cloudflare自動壓縮、Rocket Loader、Polish（圖片優化）AWS CloudFrontLambda@Edge、CloudFront FunctionsAkamai圖片管理、智慧壓縮
想了解更多 CDN 廠商的差異，可以參考我們的比較文章。如果你正在評估 CDN 費用與定價方案，我們也有完整的費用指南。
備份與測試環境
優化前的安全措施：
備份現有設定：截圖或匯出 CDN 設定
準備測試環境：使用 staging 環境測試
準備回滾計畫：確認如何快速還原
描述：CDN 優化前準備清單圖，以檢查清單形式列出評估現況、分析流量、識別內容、備份設定等步驟
構圖：垂直清單設計、勾選框、簡潔圖示
-->
CDN 基礎設定
DNS 設定
DNS 是 CDN 生效的關鍵：
1. 選擇正確的 DNS 模式
模式說明適用Proxied（橘雲）流量經過 CDN網站主要內容DNS Only（灰雲）只解析 DNSEmail、FTP
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 憑證)
設定步驟：
在 Origin 安裝 SSL 憑證
CDN 設定為 Full (Strict) 模式
啟用 HSTS 增強安全性
強制 HTTPS 導向
快取策略設定
快取是 CDN 效能的核心，正確的快取策略可以大幅提升速度。
什麼該快取？
應該快取：
圖片（JPG、PNG、WebP、GIF、SVG）
樣式表（CSS）
JavaScript 檔案
字型檔案（WOFF、WOFF2）
PDF、影片等媒體檔案
不應該快取：
包含個人資料的頁面
API 回應（除非是公開且不常變動的）
需要即時性的內容
認證相關頁面
TTL 設定原則
TTL（Time To Live）決定快取的有效期：
資源類型建議 TTL原因有版本號的靜態資源1 年透過改變 URL 更新無版本號的靜態資源1 週平衡新鮮度與效能HTML 頁面1 小時 - 1 天內容可能更新API 回應0 或依需求通常需要即時性
設定快取標頭：
在 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 指令：
指令說明public可被任何快取儲存private只能被瀏覽器快取no-cache必須向 Origin 驗證no-store完全不快取max-age=N快取 N 秒s-maxage=NCDN 快取 N 秒immutable內容永不改變stale-while-revalidate=N在更新時仍可使用舊快取
範例組合：
# 靜態資源（有版本號）
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 自訂
根據特定參數（如地區、語言）產生不同快取
避免快取到錯誤的內容
描述：CDN 快取策略決策流程圖，從內容類型判斷開始，分流到不同的快取設定建議
構圖：決策樹設計、節點標示問題、分支標示選項
-->
壓縮與格式優化
Gzip vs Brotli
兩種主流壓縮演算法的比較：
項目GzipBrotli壓縮率良好更好（約 15-25%）壓縮速度快較慢瀏覽器支援全部現代瀏覽器解壓速度快同樣快
建議： 同時啟用 Brotli 和 Gzip，CDN 會根據瀏覽器自動選擇。
CDN 設定：
Cloudflare：自動啟用 Brotli（詳見 Cloudflare CDN 設定教學）
CloudFront：需在 Cache Behavior 啟用壓縮（詳見 AWS CloudFront 設定教學）
圖片優化（WebP、AVIF）
圖片通常佔網站流量的 50% 以上，優化效益明顯：
格式壓縮率（相對 JPEG）瀏覽器支援JPEG基準全部WebP減少 25-35%現代瀏覽器AVIF減少 50%+較新瀏覽器
自動格式轉換：
CDN功能備註CloudflarePolish（需 Pro）自動轉 WebPAWS CloudFront需搭配 Lambda@Edge可自訂邏輯Bunny CDNBunny Optimizer自動優化
使用
Minify CSS/JS
移除空白、註解等，減少檔案大小：
資源一般壓縮率CSS10-30%JavaScript15-40%HTML5-15%
CDN 設定：
Cloudflare：Speed → Optimization → Auto Minify
建議在建置時就 minify，CDN 作為備份
進階優化技巧
預載入（Preload）
告訴瀏覽器提前載入關鍵資源：
Cloudflare Early Hints（HTTP 103）：
自動發送 preload 提示
在主要回應前就開始載入資源
可提升 30% 的載入速度
連線優化（HTTP/2、HTTP/3）
現代協定顯著提升效能：
協定優勢HTTP/2多工傳輸、標頭壓縮、伺服器推送HTTP/3QUIC 協定、更低延遲、更好的行動網路表現
CDN 設定：
Cloudflare：預設啟用 HTTP/2、HTTP/3
CloudFront：需手動啟用 HTTP/3
驗證是否生效：
curl -I --http2 https://example.com
curl -I --http3 https://example.com
智慧路由
進階 CDN 可以選擇最快的路徑：
CDN功能Cloudflare Argo智慧路由，平均加速 30%AWS CloudFrontOrigin ShieldAkamaiSureRoute
費用考量：
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 效能的關鍵指標：
命中率評價> 90%優秀80-90%良好60-80%需要優化< 60%問題嚴重
如何提升命中率：
增加 TTL
減少 Query String 變化
使用一致的 URL
檢查是否有 no-cache 標頭
Cloudflare 查看方式：
Analytics → Cache → Cache Hit Ratio
描述：CDN 效能監控儀表板示意圖，顯示快取命中率、各地區延遲、流量趨勢和 Core Web Vitals 分數
構圖：四象限儀表板、圖表和數字視覺化
-->
常見設定錯誤
快取設定錯誤
1. 快取了不該快取的內容
問題：使用者看到其他人的資料
解決：
檢查 Cookie 是否正確處理
確認登入後的頁面使用 Cache-Control: private
使用 CDN 的快取繞過規則
2. 沒有快取應該快取的內容
問題：每次都回源，CDN 效益低
解決：
檢查 Origin 的 Cache-Control 標頭
移除不必要的 no-cache
在 CDN 設定強制快取規則
Origin 負載過重
症狀：
快取命中率低
Origin 回應時間長
CDN 錯誤增加
解決方案：
檢查快取規則是否正確
增加 TTL
使用 Origin Shield
優化 Origin 效能
SSL 混合內容
問題： HTTPS 頁面載入 HTTP 資源
解決：
啟用 Automatic HTTPS Rewrites
檢查並修正程式碼中的硬編碼 HTTP URL
使用相對路徑或 protocol-relative URL
快取導致內容不更新
解決方案：
Cache Busting
檔名加版本號：style.v1.2.3.css
URL 加 hash：style.css?v=abc123
快取失效
Cloudflare：Purge Cache
CloudFront：Create Invalidation
降低 TTL
對於經常更新的內容，使用較短的 TTL
各平台設定範例
WordPress + CDN
推薦設定：
安裝快取外掛
WP Rocket
W3 Total Cache
LiteSpeed Cache
Cloudflare 設定
啟用 Automatic Platform Optimization（APO）
設定 Page Rules 排除 wp-admin
Page Rules 範例
*example.com/wp-admin/*
→ Cache Level: Bypass
→ Security Level: High
*example.com/wp-login.php*
→ Cache Level: Bypass
Next.js + CDN
推薦設定：
設定 Cache-Control 標頭
// next.config.js
module.exports = {
async headers() {
return [
{
source: '/_next/static/:path*',
headers: [
{
key: 'Cache-Control',
value: 'public, max-age=31536000, immutable',
},
],
},
]
},
}
CDN 設定
/_next/static/* → 長期快取
/api/* → 不快取
其他頁面 → 根據 ISR/SSR 設定
電商平台 + CDN
關鍵設定：
商品頁面
快取公開內容
價格/庫存通過 API 即時取得
購物車/結帳
絕對不快取
設定 Cache-Control: private, no-store
搜尋結果
短時間快取（1-5 分鐘）
或不快取
CDN 規則範例
/cart/* → Bypass Cache
/checkout/* → Bypass Cache
/account/* → Bypass Cache
/products/* → Cache 1 day
/static/* → Cache 1 year
結論：持續優化的心態
CDN 優化不是一次性的工作，而是持續改進的過程：
優化循環：
測量現況
識別瓶頸
實施改進
驗證效果
重複以上步驟
關鍵指標追蹤：
快取命中率 > 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 處理相同內容會增加複雜度。