Bunny CDN 教學:WordPress 網站加速、減輕主機負擔,不怕流量突然暴增

Bunny CDN 教學:WordPress 網站加速、減輕主機負擔,不怕流量突然暴增

如果你的 WordPress 網站圖片很多、頁面載入速度變慢,或是擔心廣告、社群分享、活動檔期帶來大量流量,Bunny CDN 是一個很值得了解的網站加速工具。

Bunny CDN 可以幫你的網站分擔圖片、CSS、JavaScript 等靜態資源的載入壓力,讓訪客開啟網站時,不需要每次都直接從你的主機讀取所有檔案。

對一般部落格、形象網站、電商網站、課程網站來說,網站速度不只是技術問題,也會影響訪客體驗、SEO 表現、銷售頁轉換,以及學員是否能順利瀏覽課程內容。

這篇文章會用比較白話的方式,帶你了解 Bunny CDN 是什麼、為什麼能幫 WordPress 網站加速、什麼情況適合使用,以及如何從建立 Pull Zone、設定 CNAME、安裝 WordPress 外掛,到最後確認 Bunny CDN 是否成功啟用。

先說結論:什麼網站適合使用 Bunny CDN?

Bunny CDN 不是每個網站一開始都一定要用,但如果你有以下任一情況,就很值得評估:

  • 網站圖片很多,頁面載入速度偏慢。
  • 使用 Elementor 製作銷售頁、活動頁或方案頁。
  • 有投放廣告,擔心短時間湧入大量訪客。
  • 經營課程網站,學員登入和瀏覽課程時希望更順。
  • 經營電商網站,希望商品頁、圖片與前台瀏覽更穩定。
  • 網站主機需要處理會員、訂單、購物車、課程權限與資料庫。
  • 想把圖片、CSS、JavaScript 等靜態資源交給 CDN 分擔。
  • 想用低成本方式提升 WordPress 網站速度與穩定度。

簡單說,如果你的網站已經開始經營內容、銷售產品、投放廣告,或是準備做線上課程與會員系統,CDN 就不只是加速工具,而是讓網站更穩定承接流量的重要基礎。

Bunny CDN 是什麼?

CDN 的全名是 Content Delivery Network,中文可以理解成「內容傳遞網路」。

你可以把 CDN 想成分散在不同地區的網站資源中繼站。

沒有 CDN 的時候,訪客每次開你的網站,圖片、CSS、JavaScript 等檔案,多數都會直接從你的主機讀取。就算一千個人看同一張圖片,主機也可能要反覆回應大量請求。

啟用 Bunny CDN 之後,這些靜態資源可以被快取在 Bunny 的節點上。當訪客打開網站時,圖片、樣式表、JavaScript 等資源,就可以優先從 Bunny CDN 節點載入,而不是全部回到你的網站主機。

這樣做有兩個主要好處:

  • 第一,靜態資源載入速度更快,訪客開頁面時體感更順。
  • 第二,主機不用一直處理重複的圖片、CSS、JavaScript 請求,負擔會降低。

如果你的網站有大量圖片、銷售頁、課程頁、商品頁,或是活動期間會有大量訪客進來,使用 Bunny CDN 可以讓網站在流量增加時更穩定。

用一萬人流量暴增做例子:CDN 怎麼幫你分擔壓力?

假設你正在投放 Meta 廣告,今天廣告表現很好,短時間湧入一萬人到你的銷售頁。

每個人打開頁面時,都會載入圖片、網站樣式、JavaScript、背景圖、Logo、按鈕圖示等資源。

如果沒有 Bunny CDN,這些請求大多會直接打到你的網站主機。主機 CPU、I/O、頻寬可能瞬間上升,最常見的狀況就是網站突然變慢,甚至出現 504 超時。

如果有 Bunny CDN,大部分靜態資源請求可以由 Bunny 節點分擔。你的主機就可以專心處理真正需要動態運算的部分,例如:

  • 會員登入
  • 購物車
  • 下單流程
  • 訂單建立
  • 課程權限判斷
  • 學員帳號資料
  • 後台管理操作

對課程網站、電商網站、會員網站來說,這一點很重要。因為你不只是希望訪客順利打開頁面,也希望學員可以順利登入、付款、觀看課程。

Bunny CDN 和 Bunny Stream 不一樣

Bunny 除了 CDN,也有提供影片串流服務。這裡要先釐清:Bunny CDN 和 Bunny Stream 用途不同。

  • Bunny CDN:適合 WordPress 網站加速、圖片加速、CSS 與 JavaScript 靜態資源加速。
  • Bunny Stream:適合課程影片、教學影片、會員影片播放。

如果你有很多學員同時觀看課程影片,影片會比圖片更吃頻寬與連線資源。把影片直接放在 WordPress 主機上播放,容易造成主機負擔變大,也可能拖慢網站。

比較好的做法是:網站靜態資源用 Bunny CDN,課程影片用 Bunny Stream 或其他專門的影片串流服務。

這樣主機不需要同時承擔網站、會員、購物車、課程權限和影片播放的壓力,整體會比較穩。

Bunny CDN 費用怎麼看?

Bunny CDN 的特色之一,是費用通常依照使用量與區域流量計算。也就是說,網站流量越大,費用越高;網站流量不大,費用通常也會比較低。

不過 CDN 價格、區域費率與最低費用可能會調整,因此不建議在文章裡把價格寫死。實際費用請以 Bunny 官方後台與官方定價頁面顯示為準。

剛開始設定時,建議先依照主要訪客所在地選擇服務區域。例如你的客戶主要在台灣,就優先評估 Asia & Oceania;如果你有歐美客群,再評估是否加開 Europe 或 North America。

新手建議先保守選擇主要市場,跑一段時間後,再依照 Bunny 後台實際流量與費用調整。

開始前你要準備什麼?

在 WordPress 網站串接 Bunny CDN 之前,建議先準備好以下項目:

  • 一個 Bunny 帳號。
  • 你的 WordPress 網站。
  • 你的網域管理權限,例如 Gandi 或其他網域商。
  • WordPress 後台可安裝外掛。
  • 網站備份。
  • 基礎快取外掛。

設定 CDN 前,建議先備份網站。你可以使用 UpdraftPlus 或其他備份工具,把網站備份到 Google Drive、Dropbox 或主機空間外部位置。若設定過程中遇到問題,可以用備份檔還原網站,會比較安心。

除了 Bunny CDN,你也可以搭配基礎快取外掛,讓網站速度更好。CDN 負責分擔靜態資源,快取外掛則負責頁面快取、檔案優化、延遲載入等網站速度調整。

第 1 步:到 Bunny 註冊帳號並登入後台

第一步,先到 Bunny 官方網站註冊帳號。

如果你願意,也可以使用下方連結申請 Bunny 帳號。若之後產生消費,我們可能會收到一點聯盟獎金,感謝支持。

前往 Bunny 官方網站註冊帳號

  1. 前往 bunny.net 註冊帳號。
  2. 可使用 Email 註冊,也可以用 Google 登入。
  3. 完成信箱驗證後登入 Bunny 控制台。
  4. 進入後台後,你會看到 CDN、Storage、Stream 等產品選項。
  5. 本文要設定的是 Bunny CDN,所以接下來要建立 Pull Zone。

設定 Bunny CDN 不會永久改壞網站。之後如果不想使用,也可以關閉 CDN 服務,或在 WordPress 外掛裡停用 CDN rewriting。

第 2 步:建立 Bunny CDN 的 Pull Zone

Pull Zone 的概念很簡單:你提供原站網址,也就是你的網站,Bunny CDN 會去抓取你的靜態資源並快取。之後訪客就可以從 Bunny 節點下載這些靜態資源。

  1. 在 Bunny 後台找到 CDN 或 Pull Zones 相關入口。
  2. 點選新增 Pull Zone。
  3. 填寫 Pull Zone Name,例如 mxpx,這只是後台辨識用的名稱。
  4. 填寫 Origin URL,也就是原站來源。
  5. 通常填你的網站主網域,例如 https://mxpx.tw。
  6. 如果你有特定靜態網域或來源,也可以填對應來源,多數人填主站即可。
  7. 儲存建立。

建立完成後,Bunny 會產生一組 CDN 預設網址,例如:

mxpx.b-cdn.net

前面的 mxpx 是你自己命名的 Pull Zone 名稱。

你可以直接使用 Bunny 預設的 b-cdn.net 網址,也可以再建立一個自訂子網域,例如:

cdn.mxpx.tw

正式網站長期使用時,我比較建議設定自訂子網域。這樣網址看起來比較像自己的品牌,也比較容易管理。

第 3 步:選擇 Pricing Zones

Pricing Zones 是 Bunny CDN 用來設定服務區域與流量計費的地方。

原則很簡單:選你的主要訪客所在區域就好。區域越多,涵蓋越廣,但費用也會依不同區域流量計價。

  • 主要客群在台灣或亞洲:建議優先評估 Asia & Oceania。
  • 如果你有歐美客群:可以再評估 Europe、North America。
  • 中東非洲、南美等區域通常費率較高,如果你幾乎沒有那邊的客群,可以先不選,之後真的有需求再開。

剛開始可以先保守選擇主要訪客所在區域,跑一段時間後,再依照 Bunny 後台實際流量與費用調整。

第 4 步:設定自訂 CDN 網域

這一步是讓你的 Bunny CDN 網址看起來像自己的網域,例如:

  • cdn.mxpx.tw
  • static.mxpx.tw
  • media.mxpx.tw

你要用哪個子網域名稱,可以自行命名。本文用 cdn.mxpx.tw 當範例,你也可以換成你自己的網域與命名。

  1. 回到 Bunny 的 Pull Zone 設定頁。
  2. 找到 Custom Hostname、Add Hostname 或 Custom Domains。
  3. 新增你的子網域,例如 cdn.mxpx.tw。
  4. Bunny 會提供一個目標網域,通常類似 mxpx.b-cdn.net。
  5. 接下來到你的網域商做 DNS 設定。

第 5 步:到網域商新增 CNAME,以 Gandi 為例

在 Gandi 後台設定 DNS 時,通常需要建立一筆 CNAME,讓 cdn.mxpx.tw 指向 Bunny 提供的網域,例如 mxpx.b-cdn.net。

以 Gandi 為例,常見要注意的一點是:目標值有時需要在最後面加上一個點。

mxpx.b-cdn.net.

這是 Gandi 後台的格式習慣,不代表所有網域商都一樣。其他網域商如果沒有要求結尾點,就照該平台介面規則填寫即可。

Gandi CNAME 範例:

項目範例
Record TypeCNAME
Name / Hostcdn
Target / Valuemxpx.b-cdn.net.
TTL預設即可

設定完成後,DNS 生效可能需要幾分鐘到數小時不等,會依照網域商與快取狀況不同而有差異。

第 6 步:安裝 Bunny 官方 WordPress 外掛並連線帳號

Bunny 官方 WordPress 外掛可以協助你把 WordPress 網站的圖片、CSS、JavaScript 改寫成 Bunny CDN 網址。

現在 Bunny 官方文件也提供 WordPress quickstart 教學,新手可以依照官方外掛流程設定。實際介面可能會隨版本更新,但大方向通常是登入 Bunny 帳號、選擇 Pull Zone,並啟用 CDN acceleration。

  1. 到 WordPress 後台。
  2. 進入「外掛」→「安裝外掛」。
  3. 搜尋 Bunny 或 bunny.net 官方外掛。
  4. 安裝並啟用外掛。
  5. 進入 Bunny 外掛設定頁。
  6. 使用外掛介面登入 Bunny 帳號。
  7. 登入成功後,外掛通常會列出你已建立的 Pull Zone。
  8. 選取你要使用的 Pull Zone。
  9. 啟用 CDN rewriting 或 CDN acceleration,讓圖片、CSS、JavaScript 改由 CDN 網域載入。

如果你網站已經使用 WP Rocket 這類快取外掛,也可以評估是否使用快取外掛內建的 CDN 設定。重點是不要重複改寫同一批網址,避免外掛之間互相衝突。

外掛選項:Add CORS Headers 要不要開?

CORS 是跨來源資源共享,主要和跨網域載入資源有關。

一般網站的圖片、CSS、JavaScript,多數情況不一定需要特別調整。但如果你遇到以下情境,可以考慮開啟或檢查 CORS 設定:

  • 你的資源會被不同網域的頁面載入,例如多網域、子站或外部嵌入。
  • 某些字體、腳本或特定資源被瀏覽器阻擋。
  • 前台出現跨網域相關錯誤訊息。

如果你不確定,建議先維持預設。若前台出現異常,再依照瀏覽器錯誤訊息調整會比較安全。

外掛選項:Disable for Admin 要不要開?

Disable for Admin 的意思是:當你以管理員身分登入網站時,前台或後台資源不走 CDN。

這個選項通常可以開啟,原因是管理員常常會修改頁面、更新圖片、調整版面。如果登入狀態也走 CDN,有時候你可能會看到快取後的舊畫面,誤以為修改沒有成功。

讓管理員不走 CDN,可以減少後台編輯時的干擾;訪客則照常透過 CDN 載入靜態資源。

第 7 步:確認 Bunny CDN 是否成功啟用

設定完成後,不要只看外掛顯示成功,建議實際檢查前台資源網址。

  1. 開啟你的網站前台。
  2. 使用瀏覽器右鍵,點選「檢查」或「檢查元素」。
  3. 切到 Network 網路分頁。
  4. 重新整理頁面。
  5. 查看圖片、CSS、JavaScript 是否出現你的 CDN 網域,例如 cdn.mxpx.tw。

如果圖片、CSS、JavaScript 開始從 cdn 子網域載入,就代表 CDN rewrite 大致上已經生效。

你也可以點開某個圖片網址,確認它是不是透過 Bunny CDN 網域載入。如果還是全部顯示原站網址,可能代表外掛沒有啟用 rewrite,或快取還沒清除。

啟用後的建議設定與維護習慣

Bunny CDN 設定完成後,建議養成幾個維護習慣:

  • 更新頁面或圖片後,必要時清除 WordPress 快取與 Bunny CDN 快取。
  • 定期查看 Bunny 後台流量,確認費用是否合理。
  • 確認主要訪客區域是否和 Pricing Zones 設定一致。
  • 網站改版後,檢查圖片、字體、CSS、JavaScript 是否正常載入。
  • 如果前台版面異常,先清除快取再判斷是否真的設定錯誤。
  • 課程影片不要直接放主機硬扛,建議改用 Bunny Stream 或專門影片平台。

CDN 不是設定一次就永遠不用管。尤其是網站改版、換主題、換外掛、換主機或調整 DNS 時,都建議重新確認 CDN 是否正常運作。

常見問題排除

以下整理幾個 Bunny CDN 設定時常見的問題。

圖片沒有變成 CDN 網址

可能原因包括:

  • Bunny WordPress 外掛沒有正確連線。
  • 沒有選到正確的 Pull Zone。
  • CDN rewriting 沒有啟用。
  • 快取外掛仍顯示舊頁面。
  • 圖片來自其他外部來源,不在外掛改寫範圍內。

可以先清除 WordPress 快取、Bunny CDN 快取,再重新整理前台檢查。

前台圖片或背景圖不顯示

可能原因包括:

  • CORS 設定導致資源被瀏覽器阻擋。
  • CDN 自訂網域 DNS 尚未生效。
  • SSL 憑證尚未正確啟用。
  • 資源路徑被外掛錯誤改寫。
  • 快取外掛壓縮或合併檔案後發生衝突。

可以先暫時停用 CDN rewrite,確認原站是否正常。如果原站正常、CDN 後異常,再回頭檢查 Bunny 設定、DNS、SSL 與 CORS。

更新圖片或版面後,前台還是舊畫面

這通常是快取造成的,不一定是網站壞掉。

你可以依序清除:

  1. WordPress 快取外掛快取。
  2. Bunny CDN 快取。
  3. 瀏覽器快取。
  4. 如果有使用 Cloudflare,也要檢查 Cloudflare 快取。

清除後再用無痕視窗或不同裝置確認前台是否已更新。

我之後不想用 CDN 了怎麼辦?

如果之後不想使用 Bunny CDN,可以先到 WordPress 外掛裡停用 CDN rewriting,讓圖片、CSS、JavaScript 回到原本網站網址。

確認前台正常後,再到 Bunny 後台關閉或刪除 Pull Zone,最後視情況移除 DNS 裡的 CNAME 紀錄。

建議不要一開始就直接刪除所有設定。比較安全的做法是先停用 WordPress 端 CDN 改寫,確認網站正常後,再逐步移除 Bunny 與 DNS 設定。

Bunny CDN 值不值得用?用你的情境來判斷

如果你的網站只是剛建立、流量很小、圖片也不多,Bunny CDN 不一定是第一優先。你可以先把主機、快取、圖片壓縮與基礎速度優化做好。

但是如果你的網站已經開始經營內容、投放廣告、銷售產品、開放會員登入、經營課程,或是常常擔心流量一多網站就變慢,那 Bunny CDN 就很值得考慮。

Bunny CDN 最大的價值,不只是讓網站分數變好看,而是讓網站在真正有流量、有訪客、有訂單的時候,能夠更穩定地承接。

對課程網站來說,速度和穩定度會影響學員體驗。

對電商網站來說,速度和穩定度會影響商品瀏覽、加入購物車與下單流程。

對銷售頁來說,速度和穩定度會影響廣告流量進來後,訪客是否願意繼續看下去。

所以 Bunny CDN 不是單純的技術玩具,而是當你認真經營網站、內容、課程或電商時,可以幫助網站更穩定成交的基礎工具。


如果你正在規劃線上課程或想把網站做起來,這兩個資源可以直接拿去用:

1) 領取贈品:線上課程起步指引

2) 免費架站:只需付主機費,我們直接幫你把網站架好

先拿起步指引 了解免費架站

元氣站長
元氣站長

經營網路事業,賺取持續收入!
網路賺錢修煉,成就理想人生!