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

12/19/202517 min 分鐘閱讀

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

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

CDN 設定前的準備

評估網站現況

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

1. 測量基準效能

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

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

記錄關鍵指標：

指標	說明	目標值
TTFB	首位元組時間	< 200ms
LCP	最大內容繪製	< 2.5s
FCP	首次內容繪製	< 1.8s
CLS	累計版面位移	< 0.1

2. 分析流量來源

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

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

3. 識別可快取內容

將網站內容分類：

類型	範例	建議快取時間
靜態資源	圖片、CSS、JS、字型	1 年
動態但少變	文章頁面、商品頁	1 天 - 1 週
動態常變	使用者資料、即時價格	不快取或短時間
敏感資料	會員專區、結帳頁	不快取

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

選擇適合的 CDN

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

CDN	優化功能
Cloudflare	自動壓縮、Rocket Loader、Polish（圖片優化）
AWS CloudFront	Lambda@Edge、CloudFront Functions
Akamai	圖片管理、智慧壓縮

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

備份與測試環境

優化前的安全措施：

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

描述：CDN 優化前準備清單圖，以檢查清單形式列出評估現況、分析流量、識別內容、備份設定等步驟構圖：垂直清單設計、勾選框、簡潔圖示 -->

CDN 基礎設定

DNS 設定

DNS 是 CDN 生效的關鍵：

1. 選擇正確的 DNS 模式

模式	說明	適用
Proxied（橘雲）	流量經過 CDN	網站主要內容
DNS Only（灰雲）	只解析 DNS	Email、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=N`	CDN 快取 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

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

項目	Gzip	Brotli
壓縮率	良好	更好（約 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	功能	備註
Cloudflare	Polish（需 Pro）	自動轉 WebP
AWS CloudFront	需搭配 Lambda@Edge	可自訂邏輯
Bunny CDN	Bunny Optimizer	自動優化

使用 <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

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

資源	一般壓縮率
CSS	10-30%
JavaScript	15-40%
HTML	5-15%

CDN 設定：

Cloudflare：Speed → Optimization → Auto Minify
建議在建置時就 minify，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）

現代協定顯著提升效能：

協定	優勢
HTTP/2	多工傳輸、標頭壓縮、伺服器推送
HTTP/3	QUIC 協定、更低延遲、更好的行動網路表現

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 CloudFront	Origin Shield
Akamai	SureRoute

費用考量：

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 處理相同內容會增加複雜度。

需要專業的雲端建議？

無論您正在評估雲平台、優化現有架構，或尋找節費方案，我們都能提供協助

預約免費諮詢

CDN

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

CDN 設定前的準備

評估網站現況

選擇適合的 CDN

備份與測試環境

CDN 基礎設定

DNS 設定

Origin 設定

SSL 憑證設定

快取策略設定

什麼該快取？

TTL 設定原則

快取標頭（Cache-Control）

動態內容處理

壓縮與格式優化

Gzip vs Brotli

圖片優化（WebP、AVIF）

Minify CSS/JS

進階優化技巧

預載入（Preload）

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

智慧路由

效能監控與測試

使用 GTmetrix / PageSpeed

真實用戶監控（RUM）

快取命中率分析

常見設定錯誤

快取設定錯誤

Origin 負載過重

SSL 混合內容

快取導致內容不更新

各平台設定範例

WordPress + CDN

Next.js + CDN

電商平台 + CDN

結論：持續優化的心態

常見問題 FAQ

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

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

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

CDN 會影響 Google Analytics 的數據嗎？

多個 CDN 可以同時使用嗎？

需要專業的雲端建議？

相關文章

AWS CloudFront 教學：7 步驟完成 CDN 設定與優化

CDN 與 DDoS 防護：3 層機制保護你的網站安全

Cloudflare CDN 完整教學：5 步驟從註冊到進階設定