CDN 基礎教學：什麼是 CDN？網站加速、快取策略與安全防護完整指南

很多人聽過 CDN，第一反應就是「網站會變快」。這個方向沒錯，但如果你不知道 CDN 真正快在哪裡、哪些流量能快、哪些問題它其實幫不了，你在設定時就很容易期待錯誤。這篇先把 CDN 最重要的觀念講清楚。

你如果希望這篇不只是看完「大概知道」，而是真的能拿來安排自己的部署或排錯順序，那就把每一步都對照你現在的環境去看，效果會差很多。

你會學到什麼

• 理解 CDN 對網站速度與穩定性的實際作用。
• 知道邊緣節點、快取與來源站之間怎麼合作。
• 分辨哪些情況適合導入 CDN，哪些情況該先優化原站。
• 搞懂快取策略（Cache-Control、TTL）怎麼設才不會出事。
• 知道 CDN 的安全防護功能（DDoS、WAF、Bot Management）能做到什麼程度。

什麼情況最適合先看這篇

• 想讓網站更快、更穩，並把 DNS、SSL、快取一起整理好的站長
• 你的網站圖片很多、載入明顯慢，想知道 CDN 是不是解法
• 你聽過 Cloudflare 但不確定免費方案到底能幫多少忙
• 你希望做完後不只是功能可用，連驗證與風險也一起想進去

開始前先確認

• 先知道你的網站現在流量大致來自哪裡（用 Google Analytics 或主機後台看）。
• 確認目前 DNS 與主機架構，知道你的 A Record 指向哪裡。
• 如果網站已上線，先了解目前 SSL 與快取狀態。
• 如果你對 DNS 還不熟，建議先看 DNS 基礎教學。

先提醒你一件事

CDN、DNS、Proxy 與 SSL 是互相連動的，不要一次開很多開關卻沒有逐步驗證。

詳細教學與操作步驟

什麼是 CDN（Content Delivery Network）？

CDN 中文叫「內容傳遞網路」，是一群分布在全球各地的伺服器網絡。當訪客造訪你的網站時，CDN 會從「距離訪客最近」的伺服器提供靜態資源（如圖片、CSS、JS 檔案），而不需要每次都回到你的原始主機讀取。

用一個生活化的比喻：你的原站就像工廠，CDN 邊緣節點就像各地的便利商店。客人要買水，去最近的便利商店拿就好，不用每次都跑去工廠。

這能顯著降低延遲（Latency），讓網頁開啟速度更有感。侃瑞科技的 VPS 方案 與虛擬主機皆完美支援各式 CDN 設定。

延遲（Latency）到底差多少？

你可能會想：「差幾十毫秒有差嗎？」答案是：非常有差。

假設你的主機在美國西岸，一個台灣的訪客：

• 沒有 CDN：每次請求都要跑到美國再回來，光是網路往返（RTT）就大約 150-200ms。一個網頁如果有 30 個資源要載入，就算有 HTTP/2 多工，也要好幾輪。
• 有 CDN：靜態資源從台灣的邊緣節點拿，RTT 只有 5-10ms。差距是 10 到 20 倍。

Google 的研究指出，頁面載入時間每增加 1 秒，跳出率就增加 32%。對電商網站來說，這直接影響營收。

邊緣節點（Edge Node）怎麼運作？

CDN 的核心概念是「把內容放到離使用者最近的地方」。全球各地的資料中心裡，CDN 供應商部署了大量的快取伺服器，這些就是邊緣節點。

當訪客發出請求時，CDN 的 DNS 解析系統（通常是 Anycast）會自動把訪客導向最近的邊緣節點。這個過程對訪客來說是完全透明的，他們只知道「網站開很快」。

哪些東西適合 CDN 快取？

不是所有內容都適合快取。搞清楚這件事，你才不會踩到「登入頁被快取」或「購物車顯示別人的東西」這種恐怖的坑。

適合快取的（靜態資源）：

• 圖片（JPG、PNG、WebP、SVG）
• CSS 樣式表
• JavaScript 檔案
• 字型檔案（WOFF2、TTF）
• 靜態 HTML 頁面（部落格文章、產品介紹頁）
• 影片和音訊檔案

不適合快取的（動態內容）：

• 含有使用者登入狀態的頁面
• 購物車、結帳頁面
• API 回應（尤其是含有個人資料的）
• 後台管理頁面
• 即時搜尋結果

要特別注意的灰色地帶：

• 產品列表頁：可以短時間快取（例如 5 分鐘），但不能太久
• 首頁：如果有個人化推薦就不能快取，如果是純靜態就可以

快取策略：Cache-Control 怎麼設？

快取策略是 CDN 設定裡最關鍵但也最容易搞錯的部分。你需要理解兩個層面的快取：

1. 瀏覽器快取（Browser Cache）

這是存在訪客電腦裡的快取。設定方式是透過 HTTP Header：

Cache-Control: public, max-age=31536000

這行的意思是：「這個資源可以被任何人快取，有效期一年。」

常見設定建議：

2. CDN 邊緣快取（Edge Cache）

這是存在 CDN 邊緣節點裡的快取。可以用 s-maxage 單獨控制：

Cache-Control: public, max-age=300, s-maxage=86400

這行的意思是：「瀏覽器快取 5 分鐘，但 CDN 邊緣節點可以快取 1 天。」

這個設定很實用：就算 CDN 快取了 1 天，你隨時可以去 CDN 後台清除快取（Purge），讓邊緣節點重新抓取最新內容。但瀏覽器快取你就管不到了，只能等它過期。

TTL（Time To Live）的選擇策略

TTL 設太短，快取命中率低，CDN 等於白開。TTL 設太長，內容更新後訪客看到舊版。怎麼抓平衡？

策略一：版本化檔名（推薦）

把 CSS 和 JS 的檔名加上 hash：

style.a1b2c3d4.css
app.e5f6g7h8.js

這樣你可以放心把 TTL 設成 1 年。因為內容一改，檔名就不同，瀏覽器和 CDN 自然會去抓新的。大多數前端建構工具（Webpack、Vite、Next.js）都會自動幫你做這件事。

策略二：短 TTL + Purge

適合沒辦法改檔名的情況（例如固定路徑的圖片）。把 TTL 設成 5-15 分鐘，每次更新後手動或自動清除快取。

策略三：Stale-While-Revalidate

Cache-Control: public, max-age=300, stale-while-revalidate=86400

這個進階設定的意思是：「快取有效 5 分鐘。過期後，先把舊的給使用者看（不要讓他等），同時在背景去抓新的。」這對使用者體驗很好，但你要接受短暫的「舊內容」風險。

回源機制（Origin Fetch）

當邊緣節點沒有快取（Cache Miss），或者快取已經過期，它就需要「回源」——也就是回到你的原始伺服器去拿最新的內容。

回源的流程：

1. 訪客請求到達邊緣節點
2. 邊緣節點發現沒有快取或快取過期
3. 邊緣節點向原始伺服器發出請求
4. 原始伺服器回傳內容
5. 邊緣節點存一份（快取），然後把內容給訪客

回源時的注意事項：

• 回源頻寬：如果你的 TTL 設太短，大量邊緣節點會頻繁回源，你的主機流量可能不減反增。
• 回源失敗：如果原站掛了，CDN 可以設定「提供過期的快取」（Serve Stale），讓網站在原站故障時仍能部分運作。
• 回源延遲：邊緣節點到原站的延遲會加到第一位訪客的載入時間裡。如果你的原站在美國，亞洲的邊緣節點回源就比較慢。

在侃瑞科技的 VPS 方案，主機位於高速網路環境，回源延遲比一般共享主機低很多。

CDN 的安全防護功能

現代 CDN 不只做加速，安全防護已經變成核心功能之一。

DDoS 防護

DDoS（分散式阻斷服務攻擊）是用大量假流量把你的伺服器灌爆。CDN 的優勢是：攻擊流量先到邊緣節點，邊緣節點有龐大的頻寬容量可以吸收攻擊，你的原站完全不受影響。

Cloudflare 免費方案就包含基本的 DDoS 防護，這對中小型網站來說已經非常夠用。

WAF（Web Application Firewall）

WAF 會檢查每個請求的內容，擋掉常見的攻擊手法：

• SQL Injection（SQL 注入）
• XSS（跨站腳本攻擊）
• 路徑穿越（Path Traversal）
• 已知漏洞的利用（例如 WordPress 的特定版本漏洞）

Cloudflare 免費方案有基本的 WAF 規則，Pro 方案以上可以自訂規則。

Bot Management

CDN 可以分辨真人訪客和機器人，擋掉惡意爬蟲、暴力破解嘗試和垃圾註冊。Cloudflare 的 Bot Fight Mode 在免費方案就可以開啟。

速率限制（Rate Limiting）

限制單一 IP 在一段時間內的請求次數，防止暴力破解或 API 濫用。例如設定「同一個 IP 每分鐘最多 100 次請求」。

為什麼你的網站需要 CDN？

把前面講的整理一下，CDN 能幫你做的事：

• 加速：靜態資源從最近的節點取得，載入時間大幅縮短。
• 省頻寬：大量靜態資源由 CDN 承擔，你的主機流量支出大幅下降。對於侃瑞科技的方案來說，這等於幫你省下超額流量費用。
• 安全防護：DDoS 擋在門外，WAF 過濾攻擊請求，讓你的原站只處理正常流量。
• SEO 提升：Google 把網站速度列為排名因素之一。Core Web Vitals（LCP、FID、CLS）都會因為 CDN 而改善。
• 穩定性：就算原站短暫故障，CDN 的快取還能撐一段時間。

CDN 不能幫你解決什麼？

這點很重要，很多人開了 CDN 卻失望，通常是因為搞錯期待：

• 原站程式太慢：如果你的 PHP 跑一個頁面要 5 秒，CDN 不會讓它變快。CDN 只加速靜態資源，動態請求還是要回原站。
• 資料庫查詢太慢：這跟 CDN 完全無關，你需要優化 SQL 或加 Redis 快取。
• 上傳速度：CDN 主要加速「下載」（訪客看網站），使用者上傳檔案的速度不會因為 CDN 而改善。
• 後台操作速度：WordPress 後台是動態頁面，CDN 通常不會（也不應該）快取這些。

什麼時候該導入 CDN？

馬上導入的情況：

• 網站有來自不同地區的訪客
• 圖片或靜態資源很多
• 需要基本的安全防護
• 你用的是 Cloudflare 免費方案（零成本，沒理由不開）

先處理原站再說的情況：

• 網站根本打不開（先修程式或主機）
• 動態頁面占 90% 以上（CDN 幫助有限）
• 流量全部來自同一個城市，主機也在那個城市（CDN 距離優勢不大）

實際案例：一個圖片很多的部落格

假設你經營一個旅遊部落格，每篇文章 20 張照片，每張 500KB。一篇文章的圖片就要 10MB。

沒有 CDN：

• 每個訪客都從你的主機下載 10MB
• 100 個人看這篇文章，你的主機就要傳 1GB 的流量
• 主機頻寬吃完，網站開始變慢

有了 CDN：

• 第一個訪客觸發回源，邊緣節點快取這 20 張圖片
• 之後 99 個訪客都從邊緣節點拿，你的主機只需要傳 1 次
• 主機頻寬幾乎沒影響，網站一直快

如果你搭配侃瑞科技的虛擬主機方案，CDN 幫你省下的流量更是直接反映在成本上。

做完後怎麼確認自己真的有設對

• 用 Chrome DevTools 的 Network 面板，檢查回應 Header 裡的 cf-cache-status。看到 HIT 表示快取命中，MISS 表示回源。
• 至少從不同網路或無痕模式測一次，確認快取與代理後的實際結果。
• 用 GTmetrix 或 PageSpeed Insights 測一下開啟 CDN 前後的速度差異。
• 從使用者視角再跑一次實際流程，不要只看後台畫面。
• 如果你有改 DNS、Proxy、背景服務或權限，請逐層確認，不要一次判斷全部成功。
• 測試 SSL 是否正常：打開 https:// 看有沒有鎖頭，用 SSL Labs 做進階檢查。

這一題最常踩的坑

• 把 CDN 當成萬靈丹，原站本身太慢照樣救不起來。
• 快取規則亂開，反而讓後台或動態頁面出問題。WordPress 後台被快取是經典悲劇。
• 只看首頁速度，不看 API、圖片與靜態資源實際載入。
• Cache-Control Header 設錯，瀏覽器快取和 CDN 快取打架。
• 忘了在 CDN 設定裡排除含有 Cookie 的請求，導致登入狀態錯亂。
• 更新網站後沒清快取，以為程式碼沒改成功，其實只是邊緣節點還在提供舊版本。
• SSL 模式沒選對，Cloudflare 用 Flexible 但原站也有 SSL，造成無限迴圈。這部分可以看 Cloudflare 設定教學 的 SSL 段落。

Troubleshooting：常見問題排除

Q：開啟 CDN 後，修改網頁怎麼沒看到更新？ CDN 還存有舊的快取。到 Cloudflare 的 Caching > Configuration 點選「Purge Everything」清除所有快取。如果你不想全清，也可以用「Custom Purge」只清特定 URL。

Q：使用 CDN 會影響 SEO 嗎？ 不但不會，反而有正面幫助。CDN 提供更穩定的連線與更快的載入速度，這正是 Google 搜尋引擎喜愛的優質網站特質。關於更多 DNS 相關知識，可以參考 DNS 基礎教學。

Q：CDN 會不會讓 Google Analytics 統計不準？ 不會。Google Analytics 是透過 JavaScript 在使用者瀏覽器端執行的，CDN 不會影響它的運作。

Q：我的主機在台灣，訪客也都在台灣，還需要 CDN 嗎？ 還是建議開。即使距離優勢不大，CDN 的快取功能依然能減少主機負載，而且安全防護（DDoS、WAF）是額外的保障。Cloudflare 免費方案零成本，沒有理由不用。

Q：開了 CDN 之後 WordPress 外掛出問題怎麼辦？ 某些 WordPress 外掛（例如安全類外掛）會偵測訪客 IP，開了 CDN 之後所有訪客的 IP 都變成 CDN 的。需要在 WordPress 設定裡加上 $_SERVER['HTTP_CF_CONNECTING_IP'] 或使用 Cloudflare 的 WordPress 外掛來修正。

如果你要往下一步走

看懂基本概念後，可以接著看 CDN 工作原理圖解 理解完整的請求流程，或直接跳到 Cloudflare 設定教學 動手操作。如果你想先把 DNS 基礎打穩，建議看 DNS 基礎教學 和 DNS 問題排除教學。如果你要讓網站直接套用這些做法，可以搭配侃瑞的 主機方案。