Cloudflare CDN 教學,免費提升 WordPress 網站速度 50 %

你想提升自己網站的速度以及安全性嗎?常常聽到人家說使用 CDN 可以幫網站加速,但卻不知從何下手嗎?

如果你也有遇到上述提到的 2 個問題,那麼使用 Cloudflare 將可以免費幫你解決!

【2021】Cloudflare CDN 教學,免費提升 WordPress 網站速度 50 % | 3

使用 Cloudflare 之後,最大的好處就是網站速度快了 45%,並且防護下不計其數的潛在威脅與功能,真的是令人感到非常身心愉悅。

因此,接下來這篇文章主要是幫助不懂程式碼的新手站長,透過啟用 Cloudflare 這家雲端運算服務商,免費地為自己的 WordPress 網站附加上 CDN ( 內容傳遞網路 )、DNS 解析、防 DDOS 攻擊等功能,讓自己的網站變的更加快速與安全。

Cloudflare 是什麼?

【2021】Cloudflare CDN 教學,免費提升 WordPress 網站速度 50 % | 4

Cloudflare 是一家位於美國舊金山的雲端運算服務商,這家公司的主要業務為提供網站管理者 CDN服務,同時降低網站的頻寬流量,並提升效能、載入速度以及改善使用者體驗。

除此之外,Cloudflare 還可以保護你的網站 DDOS ( 阻斷服務攻擊 )等駭客攻擊,確保網站免於遭受攻擊就掛掉的情況,能一直保持上線狀態,光是這點就可以說非常適合為客戶架設網站的網頁設計公司、接案工作者們使用。

不過,要真的了解 Cloudflare 的業務內容究竟是什麼,我們必須先解釋一下前面一直提到的 CDN 這個名詞。

CDN 是什麼?

CDN 全名為 Content Delivery Network,中文翻譯作內容傳遞網路,是指一種透過互相連接的伺服器網路系統,利用最靠近每位使用者的伺服器,更快地將網站上的資料傳送給使用者。

如果你曾架過一個 WordPress 網站就會知道,你的網站是架設在一個遠端運行的主機上面,而這個主機的位置會依照你承租的服務商,可能位於新加坡、美國、日本等不同的國家。

舉例來說,假設你的主機是位於美國,而你的網站主要是服務台灣人,這時在台灣上網的人想要看你網站的東西,但卻必須連線到你位於美國的主機,因此導致了你的網站載入速度很慢,讓使用者的體驗不佳。

【2021】Cloudflare CDN 教學,免費提升 WordPress 網站速度 50 % | 5

這其實是非常沒有效率的,因為你人就在台灣,訪客也都在台灣,結果大家必須連線到美國才能看你的網站,中間這一來一往就浪費的很多流量與時間。

說到這邊,這時你可能會好奇:「那為什麼我要承租美國的主機呢?我直接承租台灣的主機商不就好了?」

其實這個問題蠻見仁見智的,的確有蠻多人會因為這樣去選擇台灣的主機商,不過以我個人來說,我選擇的國外的主機商 ( Linode, Cloudways ) 相較於國內的主機商,通常都比較大,也經營的比較久遠,因此對我來說相對比較不容易出問題。

延伸閱讀:2020/09 台灣知名主機商遠振資訊遭到 DDOS 攻擊

還有一點是,如果你選擇了台灣的主機商,那麼假設有些在美國或是歐洲的台灣人想要看你的網站的時候,這時候他們一樣會遭遇到主機距離太遠、而導致網站載入速度緩慢的問題。

因此,為了要徹底解決這種地域性差別的問題,讓不管在哪邊的訪客都能享受到最快的網頁載入速度,這時就需要使用到一種稱為 CDN ( Content Delivery Network 內容傳遞網路 ) 的技術。

CDN 如何運作?

所謂的 CDN 就是透過一種稱為雲端運算的技術,將你的網站中所有的靜態檔案儲存起來 ( 類似快取的概念 ),並將這些檔案分送到 Cloudflare 位於全球各大不同城市的服務據點上。

如此一來,便可以讓使用者們直接就近取得網站的資料,因此解決了地域性差別的問題,大幅的提升了網站的載入速度。

【2021】Cloudflare CDN 教學,免費提升 WordPress 網站速度 50 % | 6

以剛剛的例子來說,雖然你的主機位於美國,但如果你有使用 Cloudflare 的 CDN 服務,位於台灣的使用者將會連線到 Cloudflare 的台北資料中心取得資料;位於法國的使用者將會連線到 Cloudflare 的法國資料中心取的資料,大家不用每次都再千里迢迢的跑到美國主機去拿資料。

因此,如果你跟我一樣是來自台灣的 WordPress 站長,即使你的網站主機位於美國,使用 Cloudflare 將可以直接讓用戶取用你存放在 Cloudflare 台北資料中心的資料,不用再橫跨一座太平洋去把 http request 傳送到在美國的機房,進而為你的網站帶來更快的載入速度。

【2021】Cloudflare CDN 教學,免費提升 WordPress 網站速度 50 % | 7

目前,Cloudflare 的服務據點已經遍佈超過 200 個城市、並橫跨 100 多個國家,其中 Cloudflare 也有在台北 ( Taipei ) 設立資料管理中心,因此相當適合台灣使用者,具體還有在那些國家與城市設點,可以參考官方網站

延伸閱讀:Cloudflare CDN(內容傳遞網路)

註:免費版的 Cloudflare CDN 並不會走最短路徑,而是有可能你人在台灣卻將你的伺服器帶往美國,因此請確認之後再進行使用。

使用 Cloudflare 的好處?

【2021】Cloudflare CDN 教學,免費提升 WordPress 網站速度 50 % | 8
  • 提高網站載入速度:如同前面所提到的,Cloudflare 將會利用位於訪客最近的 CDN 資料中心來儲存網站資料,因此可以讓訪客以更快的速度讀取到網站內容,進而提升網站整體的使用者體驗。
  • 降低故障風險:短時間的大量流量或主機故障將可能會導致網站當機以及連線失敗,透過 CDN 分攤主機的流量,可以減少因短時間內的大量流量而造成網站故障的問題。
  • 減少頻寬耗損:由於使用 CDN 可以分攤主機的流量,因此也相對降低了主機頻寬的耗損,進而減輕對主機的負擔。
  • 加強網站防護:使用 Cloudflare CDN 還能防護 DDOS 攻擊、內建防火牆、雙向加密 SSL 憑證,讓網站變得更加安全。

總之,使用 Cloudflare CDN 最大的好處主要在於提升網站的效能安全性,而且上述提到的功能都是完全免費的 ( 一個信箱可以對應一個網域 ) 。

基本上使用 Cloudflare 對網站沒有任何缺點 ( 至少我目前用下來找不到 ),因此建議你在架站的時候,可以一併將 Cloudflare 納入考量。

延伸閱讀:Cloudflare CDN SSL/TLS | CDN Security

如何啟用 Cloudflare

【2021】Cloudflare CDN 教學,免費提升 WordPress 網站速度 50 % | 9使用 Cloudflare 之後,最大的好處就是網站速度快了 45%,並且防護下不計其數的潛在威脅與功能,真的是令人感到非常身心愉悅。

啟用 Cloudflare 的方式非常簡單,只要去 Cloudflare 註冊一個免費帳號,然後再將你網域的 Nameserver ( 域名伺服器 ) 換成它們的就可以了。

舉例來說,假設你原本是使用 Godaddy 來管理你的網域,你只要去 Godaddy 那邊將你的 Nameserver ( 名稱伺服器 ) 更改為 Cloudflare 的 Nameserver 即可完成,非常簡單。

不過醜話先說在前頭,正確啟用 Cloudflare 的步驟,可能還是會因為每個人網站結構的不同而有所調整,這部分還是需要網站管理者對於主機、網域、DNS 有相關的了解再來操作比較好。

因此當你依照了下面的教學,可能會出現 Error Too Many Log 的錯誤,這時候建議你先停用 Cloudflare,並詢問你的主機商如何解決。

預計完成時間: 15 分鐘。

註冊 Cloudflare

【2021】Cloudflare CDN 教學,免費提升 WordPress 網站速度 50 % | 10來到 Cloudflare 官網,並點擊右上角的註冊按鈕。

輸入帳號密碼

【2021】Cloudflare CDN 教學,免費提升 WordPress 網站速度 50 % | 11Cloudflare 的註冊非常簡單,不需要姓名也不需要身分證,只要 Email 跟一組密碼即可完成。

值得注意的是,由於安全性的考量,Cloudflare 的密碼需要包含特殊字元,例如@~,要記得加進去才能順利註冊。

輸入你的網域

【2021】Cloudflare CDN 教學,免費提升 WordPress 網站速度 50 % | 12接著需要輸入你想要啟用 Cloudflare 的網站網域,例如我的是 midnightnonsense.com

選取免費方案

【2021】Cloudflare CDN 教學,免費提升 WordPress 網站速度 50 % | 13由於 Cloudflare 有提供一個帳號一組免費網域使用額度,因此在這邊直接選免費方案即可,當然如果你有其它的需求可以選擇更付費方案。

詳細的方案差別,可以參考 Cloudflare 官網價目表

確認 DNS

【2021】Cloudflare CDN 教學,免費提升 WordPress 網站速度 50 % | 14接著 Cloudflare 會去比對你在前面輸入的網域的 DNS 紀錄,並將比對結果顯示在此給你檢查,基本上不會有什麼問題,直接按繼續即可。

選擇預設轉移方法

【2021】Cloudflare CDN 教學,免費提升 WordPress 網站速度 50 % | 15接下來,我們選擇使用預設方法進行啟用 Cloudflare,也就是透過改變 Nameserver ( 名稱伺服器 ) 的方式來進行轉移 DNS 託管。

複製新的 Nameserver

【2021】Cloudflare CDN 教學,免費提升 WordPress 網站速度 50 % | 16接著複製中間 2 個 Cloudflare 提供給你的 Nameserver ( 名稱伺服器 ),先不要按下面的完成。

取代為新的 Nameserver

【2021】Cloudflare CDN 教學,免費提升 WordPress 網站速度 50 % | 17接著來到你的網域商控制介面,找到有關於 DNS, Nameserver 相關的設定,並將原本的 Nameserver 更改為剛剛複製的 2 個 Cloudflare Nameserver,即可完成。

將 SSL 改為彈性

【2021】Cloudflare CDN 教學,免費提升 WordPress 網站速度 50 % | 18更改完 Nameserver 之後,回到剛剛 Step 7 的地方,並按下完成,就會跳出這個畫面。

為了避免出現重新導向次數過多的問題,這邊我習慣先將加密模式調成彈性。

確認成功啟用

【2021】Cloudflare CDN 教學,免費提升 WordPress 網站速度 50 % | 19點選左上角的 Cloudflare Logo,如果你的畫面跟我一樣顯示著自己的網域 + 綠色的勾勾的話,就代表你成功啟用 Cloudflare 了。

如果成功了的話,就接著點選進去;如果還沒成功,就再等個 10 ~ 15 分鐘,通常就會完成了。

管理 DNS

【2021】Cloudflare CDN 教學,免費提升 WordPress 網站速度 50 % | 20最後,點選上方工具列的 DNS,如果在這邊有出現你全部的 DNS 紀錄,就說明你的網站及網域目前已經在 Cloudflare 的運作之下了,前面所提到的 Cloudflare CDN 以及 防止 DDOS 攻擊都已經成功啟用!

順帶一提,如果你之後需要更改網站的 DNS 紀錄,請直接來 Cloudflare 進行修改,不要跑回去之前的網域商唷。

Cloudflare 設定

由於我們是使用 Cloudflare 的免費版,因此基本上沒有什麼可以設定 Cloudflare 的地方,幾乎所有的好東西都要透過付費升級才能啟用。

因此,接下來我便簡單介紹幾個我常用來設定 Cloudflare 的設定。

DNS

【2021】Cloudflare CDN 教學,免費提升 WordPress 網站速度 50 % | 21

這是最常用來設定 Cloudflare 的地方,基本上就是跟一般的 DNS 記錄一樣,只是使用 Cloudflare 管理 DNS,你還可以使用它們家提供 1.1.1.1 這個網站來進行清除 DNS 快取,可以加速你為網站搬家換網域的時間。

值注意的是,如果之後你在新增新的 DNS 記錄,發現怎麼改都不能成功的時候,這時候可以試試看把透過 Proxy 處理的選項關掉,通常就不會有問題了。

詳細的 DNS 使用範例可以參考【2020】WordPress 完整教學,新手30分鐘從零架出專業網站這篇文章。

SSL/TLS

【2021】Cloudflare CDN 教學,免費提升 WordPress 網站速度 50 % | 22

如果你想要讓你的網站更加安全,你可以將 SSL/TLS 設為 完全 (嚴格),如此一來 Cloudflare 便會在瀏覽器與伺服器之中各進行一段加密驗證,雙重保護資料不會因為駭客攔截而被竊取。

不過使用這個選項要小心,如果你發現你的網站出現了重新導向次數過多的問題,通常就會是因為這個選項造成的。

如果發生了這個問題,你可以參考我之前寫的如何修復 WordPress 因為重新導向次數過多,而導致網站無法顯示的問題 這篇文章進行解決。

Caching ( 快取 )

【2021】Cloudflare CDN 教學,免費提升 WordPress 網站速度 50 % | 23

如同前面所提到的,Cloudflare CDN 的原理是只要你啟用了 Cloudflare,Cloudflare 會在它們遍佈全球的資料中心預先儲存你網站的靜態檔案,而這就是所謂的快取

由於是預先儲存,因此可能會發生當你修改網站內容之後,網站上並沒有顯示出你修改的內容這個問題。

這時候,你必須要前往 Cloudflare 的頁面,進行刪除快取,讓 Cloudflare 重新抓取資料才行。

Speed ( 速度 )

【2021】Cloudflare CDN 教學,免費提升 WordPress 網站速度 50 % | 24
【2021】Cloudflare CDN 教學,免費提升 WordPress 網站速度 50 % | 25
  • 自動縮製:開啟這個選項,可以消除網頁中程式碼的註解、空白、間隔,減少了檔案的大小,進而達到為網站加速的目的。
  • Brotli:一個類似 Gzip 的資料壓縮格式,可以加速訪客 https 流量的網頁載入速度,開啟前請先檢查你的網站有沒有支援 Brotli,否則會沒有效果。

啟用/停用 Cloudflare CDN

由於免費版本的 Cloudflare 並不提供最短節點的 CDN 使用,意思是假設訪客在台北,但是使用免費版的 Cloudflare CDN 服務,卻有可能跑到美國去連線你的主機,等於繞了一圈,反而降低了網站速度,失去了我們原本使用 CDN 的本意。

至於要如何確認 Cloudflare CDN 有沒有幫你繞路呢?

【2021】Cloudflare CDN 教學,免費提升 WordPress 網站速度 50 % | 26

首先,先連上你的網站,再點選右鍵 -> 檢查 開啟瀏覽器的開發人員工具後,點選 Network,並在 Doc 中找到你自己的網站網址 ( 例如我是 weblai.co ),之後在 Headers 之中的 Remote Address 就可以找到你目前網站伺服器的 IP 位置囉。

【2021】Cloudflare CDN 教學,免費提升 WordPress 網站速度 50 % | 27

而有了 IP 之後,我們就可以通過市面上任何一款查找 IP 位置的網站 ( ex. IP2location ),輸入 IP ( 例如我是 104.21.59.205 ) 之後即可知道其所在的地理位置。

以我自己為例,我目前發現我的網站的 IP 位置是在美國舊金山。

但我當初租主機的時候選擇的主機位置是在日本東京,這樣算起來從美國到台灣的距離,其實比從從日本到台灣還要遠,反而減緩了網站的速度,因此可以說 Cloudflare 的 CDN 完全是在幫我繞路,必須停用。

【2021】Cloudflare CDN 教學,免費提升 WordPress 網站速度 50 % | 28

那我們該如何停用 Cloudflare 的 CDN 呢?其實很簡單,只要回到 Cloudflare 的 DNS 管理介面中,把全部原本預設為通過 Proxy 處理的選項全部關掉,變成僅 DNS,便完成了。

【2021】Cloudflare CDN 教學,免費提升 WordPress 網站速度 50 % | 29

關掉之後再重複剛剛的步驟,這次可以發現 IP 變了一個位置 ( 如果沒有變的話,請開啟無痕視窗操作,或是清除快取看看 ),取得新的 IP 之後,一樣再查找 IP 位置一次。

【2021】Cloudflare CDN 教學,免費提升 WordPress 網站速度 50 % | 30

經過確認後,確定網站目前的 IP 重新回到了日本東京,也就是我原本的主機位置,成功停用了 Cloudflare 的 CDN 服務!

使用 WordPress 外掛管理 Cloudflare

如果你覺得每次要清除 Cloudflare 快取或是進行相關設定很麻煩,你可以在自己的 WordPress 網站中安裝 Cloudflare 的外掛進行就近管理。

不過在這個外掛之中並不是完整功能,基本上我安裝來主要都只是清除 Cloudflare 快取用而已。

如果你有使用 WP Rocket,你可以直接在 WP Rocket 的附加功能中開啟 Cloudflare 整合的服務,不用另外下載這個外掛。

下載 Cloudflare 外掛
【2021】Cloudflare CDN 教學,免費提升 WordPress 網站速度 50 % | 31

前往 WordPress 後台的外掛市集中,搜尋並啟用 Cloudflare 官方外掛。

進行設定
【2021】Cloudflare CDN 教學,免費提升 WordPress 網站速度 50 % | 32

你可以在後台左側工作列中的設定裡面找到Cloudflare進行設定。

登入 Cloudflare
【2021】Cloudflare CDN 教學,免費提升 WordPress 網站速度 50 % | 33

這邊需要登入你的 Cloudflare 帳號,如果你還沒有註冊,就先去註冊一個帳號;如果你已經註冊過了,就點擊下方的連結。

取得 API Key
【2021】Cloudflare CDN 教學,免費提升 WordPress 網站速度 50 % | 34

接下來它會需要輸入你的 Email 以及 Global API Key,這時我們必須前往 Cloudflare 官網取得 Global API Key 這個東西。

【2021】Cloudflare CDN 教學,免費提升 WordPress 網站速度 50 % | 35

點選右上角的個人檔案 Icon -> 找到 我的設定檔 -> 點選 API Token -> 點選下方的 Global API Key 中的 檢視

【2021】Cloudflare CDN 教學,免費提升 WordPress 網站速度 50 % | 36

接著就可以取得你的 Global API Key,接著便點選將其複製。

【2021】Cloudflare CDN 教學,免費提升 WordPress 網站速度 50 % | 37

複製之後就可以貼上在剛剛缺少的 Global API Key 的欄位之中,如此一來便可以成功登入。

快速設定 Cloudflare
【2021】Cloudflare CDN 教學,免費提升 WordPress 網站速度 50 % | 38

登入之後,之後你就可以在 WordPress 之中快速清除 Cloudflare 快取了,不用每次都跑到 Cloudflare 網站之中,非常方便!

除此之外,也可以調整一些 Cloudflare 的相關設定,至於這些進階的東西,就再請大家自行摸索了。

Cloudflare 常見問題

Cloudflare 是什麼?

Cloudflare 是一家位於美國舊金山的雲端運算服務商,這家公司的主要業務為提供網站管理者 CDN服務,同時降低網站的頻寬流量,並提升效能、載入速度以及改善使用者體驗。

Cloudflare 是免費的嗎?

Cloudflare 有提供一組帳號一個網域的免費方案,同時也有提供多種不同的付費版本,你可以依照你的需求進行選擇。

Cloudflare 的免費版就夠用了嗎?

Cloudflare 免費版便提供了最重要 CDN 以及抗 DDOS 攻擊的功能,因此如果你跟我一樣是個人使用者、部落客、或是一人公司的話,那麼其實使用免費版就綽綽有餘了。

但如果你是為了公司的網站進行設定的,這時候可以考慮升級方案。

Cloudflare 的節點有哪些國家?

Cloudflare 的服務據點已經遍佈超過 200 個城市、並橫跨 100 多個國家,其中 Cloudflare 也有在台北 ( Taipei ) 設立資料管理中心,因此相當適合台灣使用者,具體還有在那些國家與城市設點,可以參考官方網站

Cloudflare 會影響 SEO 嗎?

由於 Cloudflare 是透過 CDN 進行快取網站的方式儲存資料的,有些人可能會擔心這樣顯示在 Google 上的搜尋結果會不會不一致。

但其實對 Google 來說,Google 的爬蟲依然會繞過 CDN 直接進入到你主機的資料庫之中,因此並不會因為啟用了 Cloudflare 而影響到 SEO。

WordPress 可以使用 Cloudflare 嗎?

就如同一般所有網站一樣,WordPress 也可以使用 Cloudflare,並且還能直接在你的 WordPress 網站上透過 Cloudflare 官方開發的 WordPress 外掛進行更改設定,非常非變。

整體評價

Cloudflare
【2021】Cloudflare CDN 教學,免費提升 WordPress 網站速度 50 % | 39

Cloudflare 是一家位於美國舊金山的雲端運算服務商,這家公司的主要業務為提供網站管理者 CDN服務,同時降低網站的頻寬流量,並提升效能、載入速度以及改善使用者體驗。

貨幣: USD

運作系統: Web

應用程式分類: CDN

推薦指數:
4.9

結語

Cloudflare 真的是一款很棒的免費服務,通常我都會搭配 WP Rocket 一起使用,來幫助客戶的網站達成載入速度的最佳化。

從 Cloudflare 我們也可以看出如 CDN、雲端運算、邊緣運算等等的這些技術,將會是下一個世代的網路發展的趨勢。

未來透過這些技術再搭配 5G 網速,我們便可以實現自動駕駛、人工智能 AI、,而這些,都是跟網路息息相關的。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *