Blogger 使用 Cloudflare CDN、DNS 的幾點心得

由於 Google 的網路服務,目前被 GFW ( 防火長城 ) 遮蔽,連帶 Blogger 網誌在中國地區也無法進入,而 Cloudflare 目前沒有被 GFW 阻擋,所以將 Blogger 綁上 Cloudflare CDN,主要是想藉由 Cloudflare 的 DNS 解析,測試是否能建立起與 GFW 牆內網民溝通的橋梁。

經測試過後,由於 IP 直接由原來的 Google 轉接到了 Cloudflare 上,所以結果是可行的,不過還是有幾點需要留意!

使用 Cloudflare CDN 服務需要有自己的網址,所以 Blogspot 使用者需另購網址才能使用;另外在晚間 18:00 至 24:00 是 Cloudflare 的網路塞車時段 ( 台灣 ),嘗試著 ping 網址,速度大都在 400 ms ( 毫秒 ) 以上,離峰時段速度則在 130 ms 左右,而在原本的 Google 上 ping 時,速度則相當快,大都處於 1x 至 2x ms 之間。

Blogger 使用 Cloudflare CDN、DNS 的幾點心得_001

除了測試 Blogger 的對應速度,也試著觀察幾個 Wordprss 使用 Cloudflare 服務的大站,在峰值高的時段,大都有圖檔開啟過慢的問題,HTML 文檔與 CSS 的部份則較沒有遲緩的現象。

Blogger 使用 Cloudflare CDN、DNS 的幾點心得_002

觀察了 Cloudflare 官網提供的 CDN 數據中心佈屬圖,可以發現大部份的 CDN 節點都集中在歐洲地區,離台灣最近的一個節點則在香港,而目前台灣是沒有數據中心的,連網需求激增時的網路延遲大致應是這個原因。

所以 Blogger 有連網至中國需求的朋友,若你的網站屬於文字類型的網誌就較為適宜使用 Cloudflare,當然網誌裡的圖片也需要找其他的地方放置,預設的圖片上傳網址『http://3.bp.blogspot.com/』目前還是被 GFW 阻擋的。




( 2017/01/12 ) 中國防火長城審查更新:
使用 ( http://www.websitepulse.com/ ) 幫技研可樂做測試,目前只有上海被擋。

使用 ( https://zh.greatfire.org/ ) 做測試,則是直接被擋。


目前「Blogger 自訂網域」用戶,使用 CloudFlare CDN 已無法完全通過中國防火長城的審查。



(16/07/22)文章更新:
CloudFlare 目前已新增台北數據路由中心,網站連線情況較撰文當時還要穩定了許多。



測試資料

以下則運用了相關測試網頁與 Windows 命令提字元,分別測試了 GFW 可連性、網站開啟速度與 ping 值當作記錄資料,測試網址則為「www.techcoke.com」。



PING 測試

首先,觀察網站在 Google 與 Cloudflare 的 ping 值,系統為 Windows 7,使用網路則為中華電信光世代 60M/20M,這邊挑了一組在網路離峰時段的樣張。

 在 Google 時的 ping 值 15 ms

Blogger 使用 Cloudflare CDN、DNS 的幾點心得_003



 在 Cloudflare 時的 ping 值 132 ms 遺失兩個封包

Blogger 使用 Cloudflare CDN、DNS 的幾點心得_004



GFW 可連性測試

接著在使用 Cloudflare 之後,藉由「WebSitePluse」與「GreatFire.org」測試網站連入中國時是否有被 GFW 阻擋。

WebSitePluse 北京、上海、廣州都沒有受到限制的情形

Blogger 使用 Cloudflare CDN、DNS 的幾點心得_005



GreatFire.org 則顯示為沒有限制

Blogger 使用 Cloudflare CDN、DNS 的幾點心得_006



網站開啟速度測試

在速度測試時,則使用「PageSpeed Insights」與「Gtmetrix」做測試。

PageSpeed Insights 的部份是當時在能力範圍內將網站調整為最佳化後,首頁的讀取數值,接上 CDN 後數據不變;由於電腦版網站圖檔相當多,在網路使用峰值高的時段,網站出現的圖檔遲滯現象還是有的。

行動版數值為 89

Blogger 使用 Cloudflare CDN、DNS 的幾點心得_007



電腦版數值為 82

Blogger 使用 Cloudflare CDN、DNS 的幾點心得_008



Gtmetrix 的部份則忘了擷取接上 CDN 時的圖片,接上 CDN 後 PageSpeed Score 還是 98 %、不過 YSlow Score 則上升為 89 % ( 第 2 次為 93% ),YSlow Score 數值較低是因為無法使用快取與表頭資源。

Blogger 使用 Cloudflare CDN、DNS 的幾點心得_009


後期試著最大化的優化網站,Gtmetrix 將 Total Page Size 調整至 254 kb、Page Load Time 降至 1.3 s、Requests 降至 3x 左右 ( 沒記錯的話 );PageSpeed Insights 的部份,行動版調整為 94、電腦版調整為 97,在網路使用峰值高的時段,網站的圖檔也還是有顯示遲滯的現象發生。



小結

Blogger 結合 Cloudflare CDN 越過 GFW 是可行的,不過最大的問題還是圖片,如果更換了原本的 blogspot 圖片位置到其他圖床,圖片的縮圖功能就無法使用,網站於設計的靈活性上就少了些變化。



相關文章

[教學] Blogger 自訂網址套用 CloudFlare Flexible SSL 設定全流程

[教學] Cloudflare 啟用 Authy 兩步驟驗證登入設定

[教學] 註冊申請 CloudFlare CDN 網址綁定 DNS 設定

Blogger 自訂網址使用 CloudFlare Flexible SSL 設定 HTTPS

Blogger 啟用 Cloudflare HTTPS 之後問題總整理 (持續更新)


留言

  1. 真可惜 cloudflare 晚上會塞車,原本考慮使用 CDN,這樣的話,我想還是會以速度為優先考量~~

    回覆刪除
    回覆
    1. 試用了才知道 google 與 Blogger 強大。測試時,試著把站內的 jquery 全關掉,在 PageSpeed Insights 電腦版調到 97 的完整度,網站首頁開啟的速度,可以跟 google 首頁開啟的速度一樣快 0.43 秒。

      掛 Cloudflare CDN,沒有太多 jquery 效果,其實不會太塞!不過,圖片會慢出。如果完全不用 feed 去導縮圖,使用非 Picasa 圖床就沒什麼影響。繞過 gfw 就沒問題。

      觀察有掛 https 的 WordPress 網站,在做台灣 google 搜尋時可能只有一點差別;若用不限語系搜尋,https 則佔很大優勢!

      刪除
    2. 記得看過一篇文章, Blogger 本身就放在 Google 的 CDN 了,所以 Blogger 速度很快。

      如果Blogger放 Cloudflare 對搜尋有幫助的話,那我的英文網站應該來放 cloudflare 才是! ^^

      不過我看你的網址並沒有出現 https → 所以你還沒放 Cloudflare 對吧 ?

      刪除
    3. 目前,解除綁定在 Cloudflare 上了。由於首頁圖檔太多,峰值高的時段完整跑完要42秒左右!另外,常在 Gtmetrix 測速,YSlow 在沒綁上 Cloudflare CDN 時,確實也有測得有在跑 CDN 的狀態,不過很少。

      如果,Blogger 有開放 https,應該會再用 Cloudflare,不過就要設計新版型了;為了增加速度,可能會盡量少用 jquery @@

      昨天,剛好 Cloudflare 寄信來說網址被解除了,已經完全指回 namecheap
      http://lh3.googleusercontent.com/-F_RCDuVx6wY/VfwSO1M2JbI/AAAAAAAAHV8/NfAk9I9QJ7w/s640-Ic42/blogger-cloudflare-cdn-dns-gfw-comment_001.jpg


      話說,已經低調在標題不用 gfw,結果還是在發文隔天,百度搜尋又變零了@@

      刪除
    4. 我測了一下 //ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js → google cdn 的網域好像會被大陸擋 → 也許 jquery 改用官方提供的 cdn 試試 https://code.jquery.com/

      然後 js 連結要放在什麼空間才不會被擋,這還需要另外研究了~~

      刪除
    5. 嗯嗯:)
      不過,圖片開啟慢,還是主要原因。圖片用 jquery 導縮圖,兩者是相互在交應,視覺的體感速度,會感覺圖片在慢出。

      刪除
    6. 突然發現我好像雞同鴨講...XD
      你測試的速度慢並不是大陸的速度,而是你電腦的速度~~:P

      這樣看起來或許還是 cloudflare 的關係,因為 techcoke.com 這個網域的資料能 cache,但其他網域的檔案,例如 jquery,圖片都不能 cache,所以就慢了,也許是這樣?

      那麼或許,檔案都放在同一個主機(js/css),CDN 比較能發揮效用 ?

      刪除
    7. 我的意思是,js/css 放在跟網站同一個主機,就是網站放在虛擬主機的意思。

      BTW, 現在才發現,你的每則留言有個別的讚按鈕、+1 按鈕,這個 idea 滿厲害的!!沒有看過呢~~ =D

      刪除
    8. 呀 XD 抱歉 ~~
      速度的問題,主要是在台灣沒有 CDN 節點。觀察 Wordpress 站台與自己的測試結果,都有這樣的情況。Wordpress 的使用者,也有覺得慢的狀況。

      Wordpress 的使用者會用 CDN,主要在減少伺服負擔,與 SSL 和網路攻擊。Blogger 這方面,如果不是為了 gfw 及 https,可以不用 CDN。

      Cloudflare 也有 jquery 的連結:

      https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js

      https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js


      (js/css) 在同一主機,沒測試過,這方面就不是很確定了。

      刪除
    9. 由於是 +1 留言的 URL,所以文章的 +1 總數並不會增加。但是,若做留言分享,就能到所屬 comments 區塊。

      主要是想模仿 FB 與 G+,有人留言時都能幫他加 1 ^_^

      刪除
  2. Three years ago CDN picked up the practice once again.

    回覆刪除
  3. This is great, good to know that Blogger's recently launched "RWD Adaptive Template Themes" does not have a "mobile service" setting option. Thanks to the cdn provider too for the well-shared post. The arrangement sounds and is interesting too.

    回覆刪除
◎ 留言板中提問「代碼」問題,可至『留言代碼轉換器』轉換代碼。

張貼留言

繼續閱讀:

這個網誌中的熱門文章

[教學] LINE 電腦版行動條碼登入設定

[外掛] Chrome 擴充:ColorPick Eyedropper 網頁色碼擷取器

[教學] 使用 PuTTYgen 產生 SSH 連線 RSA、DSA 公鑰與私鑰

Line 分享按鈕:文章分享語法相容網頁版、行動裝置、APP

[教學] Twitter 手機簡訊、APP 兩步驟驗證設定

[教學] Google Compute Engine ( GCE ) 使用 PuTTY SSH 登入實例

[外掛] Chrome 擴充:Window Resizer 瀏覽器視窗大小調整比例

[教學] Blogger 自訂網址綁定自有域名

[密技] Windows OneDrive Dropbox 移至 SD 卡,讓 SSD 使用壽命更長久

[教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰