Cloudways 網站加速 – 設定 CDN 內容傳遞網路
先來說說什麼是內容傳遞網路 (CDN – Content Delivery Network)。
內容傳遞網路是指一種透過網際網路互相連接的內容快取機制,透過將網站上的靜態資源作分散式的鏡像複製 / 保存,利用最靠近每位使用者的伺服器,更快、更可靠地將音樂、圖片、影片、應用程式及其他檔案傳送給使用者,來提供高效能、可擴展性及低成本的網路內容傳遞給使用者。
能夠有效降低內容傳輸的延遲,確保網站在世界各地讀取維持同等的速度。因此,CDN 具有加速網頁瀏覽、有效分流、高穩定性及高安全性等特質。
相較於其他 CDN 的服務,CloudwaysCDN 在使用上規畫的相當便利,基本上只需要 one click 就能同時完成在 Cloudways 主機以及 WordPress 上的設定了。
注意:CloudwaysCDN 功能已於 2022 年 3 月停止服務,讀者可以參考此篇內容擴充關於 CDN 的知識,未來會將此文章陸續改版為使用其他 CDN 服務商的教學內容,敬請期待。
啟用 CloudwaysCDN
Step 1 – 進入 Cloudways 的主機管理面板
登入 Cloudways 之後,點選上方的 Applications 之後,選取要新增 CDN 設定的 WordPress,以我的網站為例,就是 QuantsNote。
![Cloudways 網站加速 - 設定 CDN 內容傳遞網路 - Cloudways CDN Setup 0 Cloudways CDN Setup 0](https://www.quantsnote.com/wp-content/uploads/2020/12/Cloudways_CDN-Setup_0-1024x270.png)
Step 2 – CloudwaysCDN
- 在 Application Management 的選單中,點選 CloudwaysCDN。
- 接著,在 Website URL 的地方填入你的網站網址,這裡記得要填入正確的網路協定,未加密的網址 http:// 或加密的網址 https://。以我的網站為例,就是 https://www.quantsnote.com/。
- 接著,點擊 CREATE 按鈕產生 CDN 的設定。
![Cloudways 網站加速 - 設定 CDN 內容傳遞網路 - Cloudways CDN Setup 0.1 Cloudways CDN Setup 0.1](https://www.quantsnote.com/wp-content/uploads/2020/12/Cloudways_CDN-Setup_0.1-1024x463.png)
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 網站加速 - 設定 CDN 內容傳遞網路 - Cloudways CDN Setup 1 Cloudways CDN Setup 1](https://www.quantsnote.com/wp-content/uploads/2020/12/Cloudways_CDN-Setup_1-1024x709.png)
參考 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 已經成功整合到你的應用程式。
![Cloudways 網站加速 - 設定 CDN 內容傳遞網路 - Cloudways CDN Setup 2 Cloudways CDN Setup 2](https://www.quantsnote.com/wp-content/uploads/2020/12/Cloudways_CDN-Setup_2-1024x634.png)
接著,來到 WordPress 後台的 Breeze 設定。
![Cloudways 網站加速 - 設定 CDN 內容傳遞網路 - Cloudways CDN Breeze Cloudways CDN Breeze](https://www.quantsnote.com/wp-content/uploads/2020/12/Cloudways_CDN_Breeze.png)
CDN 區塊也能看到已經套用 CDN 設定,並且整合了 CloudwaysCDN 的路徑。
- 啟用 CDN:已勾選。
- CDN CNAME:已自動填入了先前獲得的 CDN URL。
![Cloudways 網站加速 - 設定 CDN 內容傳遞網路 - Cloudways CDN Setup 3 Cloudways CDN Setup 3](https://www.quantsnote.com/wp-content/uploads/2020/12/Cloudways_CDN-Setup_3-1024x523.png)
Step 2 – 驗證網站是否已包含 CloudwaysCDN 設定
為了確認 CDN 設定是否已經整合到了網站上,到網頁 (首頁) 按滑鼠右鍵、點選檢視網頁原始碼 (或按 Ctrl + U),並搜尋 StackPath 字串。
確認網頁內容已經包含相關字串代表 CDN 設定已經整合到網站上了。
![Cloudways 網站加速 - 設定 CDN 內容傳遞網路 - Cloudways CDN Setup 4 Cloudways CDN Setup 4](https://www.quantsnote.com/wp-content/uploads/2020/12/Cloudways_CDN-Setup_4-1024x117.png)
如果發現網頁內容出現異常,先別擔心,如果有使用 Cloudways Varnish 功能進行快取的最佳化,記得先清除所有的快取,然後再重新訪問網站一次即可。
參考 Cloudways 的 Knowledge Base – wordpress-cloudways-cdn。
取消 CloudwaysCDN
Step 1 – 取消 WordPress 中的 CDN 設定
首先,登入 WordPress 的後台,來到 Breeze 的 CDN 區塊下。
- 在啟用 CDN 的選項下,取消勾選。
- 在 CDN CNAME 的選項下,將欄位中的 CDN URL 清除。
上述步驟完成後,記得按下儲存設定。
![Cloudways 網站加速 - 設定 CDN 內容傳遞網路 - Cloudways CDN Setup 3 1 Cloudways CDN Setup 3 1](https://www.quantsnote.com/wp-content/uploads/2020/12/Cloudways_CDN-Setup_3-1-1024x523.png)
Step 2 – 取消 CloudwaysCDN 的訂閱
登入 Cloudways 的管理頁面後,在 Application Management 下的 CloudwaysCDN 頁面,點選 REMOVE SUBSCRIPTION 即可取消訂閱。
![Cloudways 網站加速 - 設定 CDN 內容傳遞網路 - Cloudways CDN Setup 2 1 Cloudways CDN Setup 2 1](https://www.quantsnote.com/wp-content/uploads/2020/12/Cloudways_CDN-Setup_2-1-1024x634.png)
這邊要特別注意的是,取消之後如果馬上又要再訂閱 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 內容傳遞網路 - Cloudways CDN Setup 6 Cloudways CDN Setup 6](https://www.quantsnote.com/wp-content/uploads/2020/12/Cloudways_CDN-Setup_6.png)
以及下載測試圖檔時,平均花費的時間:
![Cloudways 網站加速 - 設定 CDN 內容傳遞網路 - Cloudways CDN Setup 5 Cloudways CDN Setup 5](https://www.quantsnote.com/wp-content/uploads/2020/12/Cloudways_CDN-Setup_5.png)
想知道 Cloudways 做了哪些分析? 以及 CDN 的重要性? 可以閱讀他們的分析報告:WordPress CDN: A Definitive Guide to Boost Your Global Visibility。
後記 – 關於其他 CDN 服務商
後續在進行網站最佳化的過程中,我們研究了幾個提供 CDN 服務的廠商也進行了網頁速度評分的分析。有興趣的朋友可以參考以下文章章節。
「14 天網站最佳化衝刺實作 – Clearfy v.s Heavy Theme」
– CDN 章節
– 使用不同 CDN 的差異
有任何問題也歡迎加入社團一起討論唷!
Cloudways 雲端主機託管
↓直接套用優惠碼獲得頭兩個月25%折扣↓