Cloudways 網站加速 – 設定 CDN 內容傳遞網路

先來說說什麼是內容傳遞網路 (CDN – Content Delivery Network)。

內容傳遞網路是指一種透過網際網路互相連接的內容快取機制，透過將網站上的靜態資源作分散式的鏡像複製 / 保存，利用最靠近每位使用者的伺服器，更快、更可靠地將音樂、圖片、影片、應用程式及其他檔案傳送給使用者，來提供高效能、可擴展性及低成本的網路內容傳遞給使用者。

能夠有效降低內容傳輸的延遲，確保網站在世界各地讀取維持同等的速度。因此，CDN 具有加速網頁瀏覽、有效分流、高穩定性及高安全性等特質。

相較於其他 CDN 的服務，CloudwaysCDN 在使用上規畫的相當便利，基本上只需要 one click 就能同時完成在 Cloudways 主機以及 WordPress 上的設定了。

啟用 CloudwaysCDN

Step 1 – 進入 Cloudways 的主機管理面板

登入 Cloudways 之後，點選上方的 Applications 之後，選取要新增 CDN 設定的 WordPress，以我的網站為例，就是 QuantsNote。

Step 2 – CloudwaysCDN

1. 在 Application Management 的選單中，點選 CloudwaysCDN。
2. 接著，在 Website URL 的地方填入你的網站網址，這裡記得要填入正確的網路協定，未加密的網址 http:// 或加密的網址 https://。以我的網站為例，就是 https://www.quantsnote.com/。
3. 接著，點擊 CREATE 按鈕產生 CDN 的設定。

Step 3 – Cloudways CDN 功能選項

CDN 設定完成之後，會看到 CDN URL 也生成了，並且還有相關的維護資訊。

• CDN URL：有了 CDN URL 之後，就能整合到 WordPress 上。
  (請參考下述 將 CDN 設定整合至 WordPress 章節說明)
• Bandwidth Usage：配合 CloudwaysCDN 的收費方式 (每個月，每 25 GB $1 美元，超過的部分每 1GB 為 $0.04 美元)，這邊會顯示這個月目前使用的資料傳輸量。訂閱後在個人帳號的 Real Time Billing 上就會立即看到 $1 美元的費用了。
• Purge Content：可供管理人員把 CDN 上儲存的暫存版本刪除掉。可以避免造訪人員看到老舊版本的網頁資料。
• Remove Subscription：當未來不想使用 CloudwaysCDN 或想改用其他 CDN 廠商的服務時，可以移除訂閱。注意，在點選移除訂閱之前，切記必須先將 WordPress 上的 CDN URL 先移除並取消。否則有可能會對網站功能造成損害。
  (請參考下述 取消 CloudwaysCDN 章節說明)

參考 Cloudways 的 Knowledge Base – activate-cloudways-cdn。

將 CDN 設定整合至 WordPress

Step 1 – 整合 CloudwaysCDN

在上一個章節步驟 3 的圖片中，APPLICATION INTEGRATION 下點選 APPLY 會將 CDN URL 設定到 WordPress 管理頁面下 Breeze 功能的 CDN 區塊中的 CDN CNAME 欄位。

接續上個章節的步驟，點選 APPLY 之後 CloudwaysCDN 上會顯示 CDN 已經成功整合到你的應用程式。

接著，來到 WordPress 後台的 Breeze 設定。

CDN 區塊也能看到已經套用 CDN 設定，並且整合了 CloudwaysCDN 的路徑。

• 啟用 CDN：已勾選。
• CDN CNAME：已自動填入了先前獲得的 CDN URL。

Step 2 – 驗證網站是否已包含 CloudwaysCDN 設定

為了確認 CDN 設定是否已經整合到了網站上，到網頁 (首頁) 按滑鼠右鍵、點選檢視網頁原始碼 (或按 Ctrl + U)，並搜尋 StackPath 字串。

確認網頁內容已經包含相關字串代表 CDN 設定已經整合到網站上了。

如果發現網頁內容出現異常，先別擔心，如果有使用 Cloudways Varnish 功能進行快取的最佳化，記得先清除所有的快取，然後再重新訪問網站一次即可。

參考 Cloudways 的 Knowledge Base – wordpress-cloudways-cdn。

取消 CloudwaysCDN

Step 1 – 取消 WordPress 中的 CDN 設定

首先，登入 WordPress 的後台，來到 Breeze 的 CDN 區塊下。

1. 在啟用 CDN 的選項下，取消勾選。
2. 在 CDN CNAME 的選項下，將欄位中的 CDN URL 清除。

上述步驟完成後，記得按下儲存設定。

Step 2 – 取消 CloudwaysCDN 的訂閱

登入 Cloudways 的管理頁面後，在 Application Management 下的 CloudwaysCDN 頁面，點選 REMOVE SUBSCRIPTION 即可取消訂閱。

這邊要特別注意的是，取消之後如果馬上又要再訂閱 CDN 服務的話，個人帳號的 Real Time Billing 上會顯示 $2 美元的費用。基礎費用 $1 在訂閱時就會發生。

因為在測試 CDN 的效能，所以我遇到了這個問題。如果大家想研究使用 CDN 對網頁讀取速度或網頁的 Speed Index 的影響，記得事先做好紀錄，別像我重來了一次多花了 $1 美元 (其實也不多)。

CDN 的功用

當然也會有人想，如果自己網站的目標客群都是來自於本地的使用者，還有必要使用 CDN 嗎?

其實 CDN 除了適用跨國的公司，讓在地的瀏覽者不用跨區存取網站的資料外，現在的服務還包含防止 DDoS 網絡攻擊、SSL 認證、DNS 服務等。

如果從前瀏覽者要向您的主機發出 100 個請求，例如要求圖片、字形、JS 檔案、CSS 樣式和 HTML 等資料，愈多的請求會拖慢網站的效能。使用 CDN 後，可以把部分的工作量轉嫁給 CDN 服務供應商，網站的負擔就會變得比較小。

能夠確實的分散和減輕主機請求數量，也間接的減少了雲端主機代管所使用的網路流量，別忘了網路流量也是有成本的唷。

參考資料

一般而言，CDN 需要一到數個小時的時間擴散到各個 CDN 伺服器上才能開始發揮效用。以下是 Cloudways 曾經做過的研究，比對不同 CDN 供應商在處理小、中、大圖檔的時候，各個 CDN 供應商花費了多少時間將網站資料擴散到了 CDN 伺服器上。

以及下載測試圖檔時，平均花費的時間：

想知道 Cloudways 做了哪些分析? 以及 CDN 的重要性? 可以閱讀他們的分析報告：WordPress CDN: A Definitive Guide to Boost Your Global Visibility。

後記 – 關於其他 CDN 服務商

後續在進行網站最佳化的過程中，我們研究了幾個提供 CDN 服務的廠商也進行了網頁速度評分的分析。有興趣的朋友可以參考以下文章章節。

「14 天網站最佳化衝刺實作 – Clearfy v.s Heavy Theme」
– CDN 章節
– 使用不同 CDN 的差異

使用優惠碼完整步驟，請參考「Cloudways – 按步驟輕鬆完成主機試用、租購與基本設定」一文。