網站串接 Bunny CDN 完整教學：加速網站、減輕主機負擔、流量暴增也更穩
如果你的 WordPress 網站圖片很多、頁面載入速度變慢，或是擔心網站流量突然變大，Bunny CDN 是一個很值得了解的網站加速工具。
Bunny CDN 可以幫你的網站分擔圖片、CSS、JavaScript 等靜態資源的載入壓力，讓訪客開啟網站時，不需要每次都直接從你的主機讀取所有檔案。
對一般部落格、形象網站、電商網站、課程網站來說，網站速度不只是技術問題，也會影響訪客體驗、SEO 表現、銷售頁轉換，以及學員是否能順利瀏覽課程內容。
這篇 Bunny CDN 教學會用比較白話的方式，帶你了解 Bunny CDN 是什麼、為什麼能幫 WordPress 網站加速、什麼情況適合使用，以及如何從建立 Pull Zone、設定 CNAME、安裝 WordPress 外掛，到最後確認 Bunny CDN 是否成功啟用。
先說結論：Bunny CDN 不是每個網站一開始都一定要用，但如果你有以下任一狀況，很值得評估。
- 網站圖片多、頁面重，想要更快的載入速度
- 使用 Elementor 製作銷售頁、方案頁或活動頁
- 有時會突然湧入大量訪客，例如打廣告、上新聞、被轉發
- 課程網站同時上線的人變多，主機壓力上升
- 想把圖片、CSS、JavaScript 等靜態資源交給 Bunny CDN 處理
- 想讓主機專心處理會員、訂單、資料庫、購物車與課程權限
- 不是大流量，但單純想加快 WordPress 網站速度
- 想用低成本、用多少算多少的方式，提升網站速度與穩定度
Bunny CDN 的優點是計費彈性，用多少算多少，沒有固定月費。一般小型網站如果流量不大，一個月可能不到 1 美金，換算大約 30 台幣左右。實際費用仍要依 Bunny 後台當下價格與你的實際流量為準。
常見區域價格例如 Asia & Oceania 約 $0.03 美金 / GB，Europe 約 $0.01 美金 / GB。建議你以 Bunny 官方後台顯示價格為準，並依照主要訪客所在地選擇區域。
為什麼 CDN 能加快網站？用白話講清楚
CDN 的全名是 Content Delivery Network，中文可以理解成「內容傳遞網路」。
你可以把 CDN 想成分散在不同地區的網站資源中繼站。
沒有 CDN 的時候，訪客每次開你的網站，圖片、CSS、JavaScript 都要從你的主機抓取。就算 1,000 個人看同一張圖片，你的主機也可能要回應很多次請求。
用了 Bunny CDN 之後，靜態檔案會被快取在 Bunny 的節點上。當訪客打開網站時，圖片、CSS、JavaScript 這類靜態資源，可以從 Bunny CDN 節點載入，而不是全部直接回到你的主機。
這樣做有兩個好處。
- 第一，靜態資源載入速度更快，訪客開頁面時體感更順。
- 第二，主機不用一直處理重複的圖片、CSS、JavaScript 請求，負擔會降低。
如果你的網站有大量圖片、銷售頁、課程頁、文章頁，或是活動期間會有大量訪客進來，使用 Bunny CDN 可以讓網站在流量增加時更穩定。
用 1 萬人流量暴增做例子：CDN 怎麼幫你分擔壓力？
想像你正在投放 Meta 廣告，今天廣告表現很好，短時間湧入 10,000 人到你的著陸頁。
每個人打開頁面時，都會載入圖片、網站樣式、JavaScript、背景圖、Logo、按鈕圖示等資源。
如果沒有 Bunny CDN，這些請求大多會直接打到你的主機。主機 CPU、I/O、頻寬可能瞬間上升，最常見的狀況就是網站突然變慢，甚至出現 504 超時。
如果有 Bunny CDN，大部分靜態請求會由 Bunny 節點分擔。你的主機就可以專心處理真正需要動態運算的部分。
- 會員登入
- 購物車
- 下單流程
- 訂單建立
- 課程權限判斷
- 學員帳號資料
- 後台管理操作
對課程網站、電商網站、會員網站來說，這一點很重要。
因為你不只是希望訪客順利打開頁面，也希望學員可以順利登入、付款、觀看課程。
順便補充：課程影片建議用 Bunny 串流，不要放主機硬扛
Bunny 除了 CDN，也有提供影片串流相關服務。這裡要先釐清：Bunny CDN 和 Bunny Stream 用途不同。
- Bunny CDN：適合 WordPress 網站加速、圖片加速、CSS 與 JavaScript 靜態資源加速。
- Bunny Stream：適合課程影片、教學影片、會員影片播放。
如果你有很多學員同時觀看課程影片，影片會比圖片更吃頻寬與連線資源。把影片直接放在 WordPress 主機上播放，容易造成主機負擔變大，也可能拖慢網站。
比較好的做法是：網站靜態資源用 Bunny CDN，課程影片用 Bunny Stream 或其他專門的影片串流服務。
這樣主機不需要同時承擔網站、會員、購物車、課程權限和影片播放的壓力，整體會比較穩。
本文主要教的是 Bunny CDN，也就是網站靜態資源加速。你可以把它想成同一個方向：把大量重複下載的內容，交給專門做分發的服務。
開始前你要準備什麼？
在 WordPress 網站串接 Bunny CDN 之前，建議先準備好以下項目。
- 一個 Bunny 帳號
- 你的 WordPress 網站
- 你的網域管理權限，例如 Gandi 或其他網域商
- WordPress 後台可安裝外掛
- 網站備份
- 基礎快取外掛
除了 Bunny CDN，你也可以搭配基礎快取外掛，讓網站速度更好。像我們的主機客戶有提供 WP Rocket 快取外掛付費進階版，可以用來協助 WordPress 快取、檔案優化與網站速度調整。
設定 CDN 前，建議先備份網站。你可以使用 UpdraftPlus 免費版，把網站備份到 Google 硬碟。若設定過程中遇到問題，可以用備份檔還原網站，會比較安心。
第 1 步：到 Bunny 註冊帳號並登入後台
第一步，先到 Bunny 官方網站註冊帳號。
如果你願意，可以使用下方連結申請 Bunny 帳號，可免費試用 14 天，我們也會收到一點聯盟獎金，感謝支持。
https://bunny.net?ref=9g260zmvka
- 前往 bunny.net 註冊帳號。
- 可使用 Email 註冊，也可以用 Google 登入。
- 完成信箱驗證後登入 Bunny 控制台。
- 進入後台後，你會看到 CDN、Storage、Stream 等產品選項。
- 本文要設定的是 Bunny CDN，所以接下來要建立 Pull Zone。
設定 Bunny CDN 不會永久改壞網站。之後如果不想使用，也可以關閉 CDN 服務，或在 WordPress 外掛裡停用 CDN Rewrite。
第 2 步：建立 Bunny CDN 的 Pull Zone
Pull Zone 的概念很簡單：你提供原站網址，也就是你的網站，Bunny CDN 會去抓取你的靜態資源並快取。之後訪客就可以從 Bunny 節點下載這些靜態資源。
- 在 Bunny 後台找到 CDN 或 Pull Zones 相關入口。
- 點選新增 Pull Zone。
- 填寫 Pull Zone Name，例如 mxpx，這只是後台辨識用的名稱。
- 填寫 Origin URL，也就是原站來源。
- 通常填你的網站主網域，例如 https://mxpx.tw。
- 如果你有特定靜態網域或來源，也可以填對應來源，多數人填主站即可。
- 儲存建立。
建立完成後，Bunny 會產生一組 CDN 預設網址，例如：
mxpx.b-cdn.net
前面的 mxpx 是你自己命名的 Pull Zone 名稱。
你可以直接使用 Bunny 預設的 b-cdn.net 網址，也可以再建立一個自訂子網域，例如：
cdn.mxpx.tw
自訂子網域看起來比較像自己的品牌，也比較適合正式網站長期使用。
Pricing zones 要選哪些區域？
Pricing zones 是 Bunny CDN 用來設定服務區域與流量計費的地方。
原則很簡單：選你的主要訪客所在區域就好。區域越多，涵蓋越廣，但費用也會依不同區域流量計價。
- 主要客群在台灣或亞洲：建議至少選 Asia & Oceania。
- 如果你有歐美客群：可以再評估 Europe、North America。
- 中東非洲、南美通常費率較高，如果你幾乎沒有那邊的客群，可以先不選，之後真的有需求再開。
提醒：即使你關閉某些區域，當那些區域有人訪問時，流量可能會被導向最近的可用區域。你要做的是平衡費用與使用者體驗。
剛開始可以先保守選擇主要訪客所在區域，跑一段時間後，再依照 Bunny 後台的實際流量與費用調整。
第 3 步：設定自訂網域，讓 CDN 使用自己的子網域
這一步是讓你的 Bunny CDN 網址看起來像自己的網域，例如：
- cdn.mxpx.tw
- static.mxpx.tw
- media.mxpx.tw
你要用哪個子網域名稱，可以自行命名。本文用 cdn.mxpx.tw 當範例，你也可以換成你自己的網域與命名。
- 回到 Bunny 的 Pull Zone 設定頁。
- 找到 Custom Hostname、Add Hostname 或 Custom Domains。
- 新增你的子網域，例如 cdn.mxpx.tw。
- Bunny 會提供一個目標網域，通常類似 mxpx.b-cdn.net。
- 接下來到你的網域商做 DNS 設定。
第 4 步：到網域商新增 CNAME，以 Gandi 為例
在 Gandi 後台設定 DNS 時，通常需要建立一筆 CNAME，讓 cdn.mxpx.tw 指向 Bunny 提供的網域，例如 mxpx.b-cdn.net。
以 Gandi 為例，常見要注意的一點是：目標值有時需要在最後面加上一個點。
mxpx.b-cdn.net.
這是 Gandi 後台的格式習慣，不代表所有網域商都一樣。其他網域商如果沒有要求結尾點，就照該平台介面規則填寫即可。
Gandi CNAME 範例，請用你的實際資料替換
| 項目 | 範例 |
| Record Type | CNAME |
| Name / Host | cdn |
| Target / Value | mxpx.b-cdn.net. |
| TTL | 預設即可 |
設定完成後，DNS 生效可能需要幾分鐘到數小時不等，會依照網域商與快取狀況不同而有差異。
第 5 步：安裝 Bunny 官方 WordPress 外掛並連線帳號
Bunny 官方 WordPress 外掛可以協助你把 WordPress 網站的圖片、CSS、JavaScript 改寫成 Bunny CDN 網址。
現在 Bunny 外掛有一種方式是直接在外掛介面登入 Bunny 帳號。登入後會自動連線並抓取你後台的 Zone 資料，不一定需要手動輸入一長串 API Key，實作上方便很多。
- 到 WordPress 後台。
- 進入「外掛」→「安裝外掛」。
- 搜尋 Bunny 或 Bunny.net 官方外掛。
- 安裝並啟用外掛。
- 進入 Bunny 外掛設定頁。
- 使用外掛介面登入 Bunny 帳號。
- 登入成功後，外掛通常會列出你已建立的 Pull Zone。
- 選取你要使用的 Pull Zone。
- 啟用 CDN rewriting，讓圖片、CSS、JavaScript 變成 cdn 子網域。
外掛選項解釋：Add CORS Headers 要不要開？
CORS 是跨來源資源共享，主要和跨網域載入資源有關。
一般網站的圖片、CSS、JavaScript 多數情況不一定需要特別調整，但如果你遇到以下情境，可以考慮開啟或檢查 CORS 設定。
- 你的資源會被不同網域的頁面載入，例如多網域、子站或外部嵌入。
- 某些字體、腳本或特定資源被瀏覽器阻擋。
- 前台出現跨網域相關錯誤訊息。
如果你不確定，建議先維持預設。若前台出現異常，再依照錯誤訊息調整會比較安全。
外掛選項解釋：Disable for Admin 管理員不走 CDN 要不要開？
Disable for Admin 的意思是：你以管理員登入後台，或登入狀態瀏覽網站時，不把資源改寫成 CDN。
這個選項有好處，也有需要注意的地方。
- 優點：你在編輯、調整、測試時，看到的是比較即時的原始資源，不容易被 Bunny CDN 快取干擾。
- 缺點：你登入狀態下看到的速度可能不如一般訪客，因為訪客有走 CDN。
如果你很常調整外觀、修改 Elementor、更新圖片、改 CSS，開啟這個選項會比較省事。
如果你希望用訪客角度驗證 Bunny CDN 效果，可以用無痕視窗或登出狀態檢查。
第 6 步：確認是否成功，最簡單的檢查方式
設定完成後，建議不要只看後台顯示成功，而是實際到前台檢查 Bunny CDN 是否真的有作用。
- 用無痕視窗打開網站任一頁。
- 在前台對圖片按右鍵，或新分頁開啟圖片。
- 查看圖片網址。
- 如果網址變成 https://cdn.你的網域/… 或出現 b-cdn.net，代表改寫成功。
- 你也可以打開瀏覽器開發者工具 Network，查看 CSS、JavaScript 是否走 CDN 網域。
如果你看到圖片網址已經變成類似：
https://cdn.mxpx.tw/...
或出現：
b-cdn.net
通常就代表 Bunny CDN 已經開始運作。
第 7 步：啟用後的建議設定與維護習慣
Bunny CDN 設定完成後，不是完全不用管理。建議養成幾個維護習慣，網站會比較穩。
- 改版或更新大量圖片後，記得在 Bunny 後台或外掛中 Purge Cache，避免訪客看到舊檔。
- 如果更新 CSS 或 JavaScript 後前台沒變，先 Purge Cache，再清理網站快取與瀏覽器快取。
- 如果你有 HTTPS，確保 Bunny 自訂網域也有正確啟用 SSL。
- 如果使用 Elementor，必要時可以重新產生 CSS 檔案。
- 定期查看 Bunny 後台流量與費用，避免流量暴增時沒有注意到成本變化。
- 活動、廣告投放、課程開賣前，先確認 Bunny CDN 是否正常運作。
很多時候前台沒有更新，不一定是設定錯誤，而是快取還沒清除。
如果你同時使用 Bunny CDN、WordPress 快取外掛、Elementor，更新頁面後建議依序清除快取，避免看到舊內容。
常見問題排除
1) 圖片沒有變成 CDN 網址
如果設定完成後，前台圖片還是原本網站網址，可以先檢查以下幾點。
- 先用無痕視窗測試，避免你自己的快取干擾。
- 確認 Bunny 外掛已選對 Pull Zone。
- 確認已啟用 CDN rewriting。
- 確認 DNS 的 CNAME 已生效。
- 清除 Bunny CDN 快取與網站快取後再測一次。
如果你剛設定完 CNAME，DNS 可能還沒完全生效，可以等一段時間再重新檢查。
2) 前台圖片或背景圖不顯示
如果啟用 Bunny CDN 後，前台圖片、背景圖或字型不顯示，通常可能和快取、SSL、CORS 或頁面編輯器的資源載入方式有關。
若你使用 Elementor，有些背景圖是用 CSS 載入，可能會牽涉到延遲載入、快取或改寫規則。
- 先暫時關閉針對 CSS 背景圖片的延遲載入設定，觀察是否恢復。
- 清除 Bunny CDN 快取後再測試。
- 確認 CDN 網域有正確 SSL，避免混合內容被瀏覽器擋下。
- 到 Elementor 工具裡重新產生 CSS 檔案。
- 使用無痕視窗或登出狀態重新測試。
3) 更新圖片或版面後，前台還是舊畫面
這通常是快取問題。
可以依照這個順序處理：
- 先清除 WordPress 快取外掛。
- 再清除 Bunny CDN 快取。
- 如果用 Elementor，重新產生 CSS。
- 用無痕視窗測試前台。
- 必要時換瀏覽器或手機網路再看一次。
很多時候不是設定錯誤，而是你看到的是舊快取。
4) 我之後不想用 CDN 了怎麼辦？
如果你之後不想使用 Bunny CDN，可以先在 Bunny 外掛關閉 CDN 改寫，或直接停用 Bunny 外掛。
網站就會回到原本從主機載入靜態資源的方式。
如果你有設定 DNS 的 cdn 子網域，也可以保留或移除，視你未來是否可能再啟用 Bunny CDN 而定。
建議不要一開始就刪除所有設定，可以先關閉外掛測試，確認網站前台都正常，再決定是否移除 DNS 記錄。
結語：Bunny CDN 值不值得用？用你的情境來判斷
Bunny CDN 值不值得用，要看你的網站情境。
如果你目前網站很輕、圖片不多、流量也穩定，其實不一定要急著上 CDN。
但如果你有流量可能突然放大的情境，例如打廣告、活動、課程開賣、免費直播報名頁、社群轉發，或你想讓網站在尖峰時段更穩，Bunny CDN 就很值得評估。
Bunny CDN 的核心價值，是把大量重複的靜態請求分擔掉，讓你的主機不會被同一件事情一直消耗，網站體感速度與穩定度也更容易維持。
如果不是流量問題，只是單純想讓 WordPress 網站速度更快，也可以用 Bunny CDN 做低成本測試。
建議你先用最小成本的方式上線測試：
- 先選主要訪客區域
- 先用一個 cdn 子網域
- 先讓 WordPress 靜態資源走 Bunny CDN
- 跑一週觀察速度、流量與主機負載
- 再決定要不要擴大區域或搭配更多功能
Bunny 計費彈性，按照實際使用收費，用多少算多少，沒有固定月費。小流量網站，一個月大約 1 美金左右，約 30 台幣，實際費用仍以 Bunny 後台顯示為準。
如果你願意，可以使用下方連結申請 Bunny 帳號，可免費試用 14 天，我們也會收到一點聯盟獎金，感謝支持。
https://bunny.net?ref=9g260zmvka
如果你正在規劃線上課程或想把網站做起來
如果你正在規劃線上課程，或想把自己的網站做起來，這兩個資源可以直接拿去用。