網站如何使用CDN提升載入速度介紹與KeyCDN設定使用教學

4.6
07

KeyCDN設定使用教學

網站載入速度的重要性我相信不用多說了,沒有人會喜歡網頁開半天打不開,Google喜歡開啟速度快的網頁,所以會影響SEO排名。國外調查數據顯示,若購物網站速度在15~7秒間,每加快一秒可增加3%的成交率(資料來源),網頁開啟速過慢度造成訪客沒有耐心等候,最直接的影響當然就是業績。Jack今天要講一個能明顯讓網站速度改善的方法,不管是用入門的虛擬主機,或是進階的VPS都受用。

對於網站速度的改善,Jack希望大家想像一下一個人全副武裝在跑步,我們要怎樣讓這個人能夠跑得快,應該不外乎從兩個方向:裝備減輕 或是 體能加強

  1. 裝備減輕: 就是讓你的圖片檔案小一點、外掛少一點,也就是載入的東西變少。
  2. 體能加強則是換效能好一點的主機或是選擇離訪客近一點的機房…..等等。

但在這篇文章我們要講的是第三種方法,就是請人幫忙背裝備。請想像一下,當原本全副武裝的那個人旁邊多了一個人在幫忙背裝備跑步的樣子。

這個請人幫忙背裝備的方法,指的是使用CDN廠商的服務。透過CDN的服務,我們可以讓原本網頁上的圖片、CSS檔案以及JS檔案都不需要透過我們自己的主機來提供,而是透過CDN的主機來提供,而且一般CDN廠商的主機都會跨國家設置多個主機,可以判斷訪客的位置來就近提供讀取,比方說我們網頁主機在美國,但是CDN廠商在日本或是香港有主機,所以在亞洲的訪客就可以讀到日本或是香港主機的資料。這樣不僅僅會改善訪客的讀取速度,對於原本網站主機能承受的訪客人數,也能有所提升(可以同時服務更多的訪客數量)。

之前有講過Cloudflare這個CDN,但其實他跟實際的CDN服務是有點差距的,Cloudflare做的是在訪客讀取你的網站之前,他可以提供快取,若是沒有快取的情況之下,還是讀取網站主機本身的檔案資料。但真正的CDN是能夠取代讀取你的主機檔案,完全改由CDN廠商的主機來提供。

如果是使用WordPress的話,可以透過jetpack這個外掛來啟用photon的圖片CDN服務,這是免費的服務,而且速度也很不錯。photon的使用方式請參考這篇文章裡面的影片教學33分20秒處:WordPress網站提速:WP Super Cache 與 圖片優化實作

但使用jetpack有兩個問題:

  1. 只能使用圖片(gif, png, and jpg),其他像是CSS或是JS檔案,無法使用。
  2. 免費的服務有可能被中國的防火牆阻斷。

所以我們必須要找到其他的CDN來幫我們背裝備改善網頁開啟速度,在找CDN服務的時候,我有四個要求:

  1. 要有亞洲節點(有台灣的更好)
  2. 要便宜
  3. 要支援https(最好還能支援http/2,後來還希望能支援letsencrypt)
  4. 要能在一個帳號裡頭掛上多個網站(一般人可能不會需要)

其實Jack大約是2013年就開始關注CDN的服務了,但一直找不到適合的,所以就先從VPS主機跟機房的地區來改善網站開啟速度。找到最後(2015年末),符合上面四點的是KeyCDN(按此前往)

接下來看一下KeyCDN如何滿足我的四個要求:

  1. 要有亞洲節點:就這點來說,AWS(亞馬遜雲主機)的Cloudfront算是最好的選擇,因為他有台灣節點(說明頁面)。但是Cloudfront的費用比較貴,亞洲節點流量費用 0.14美元/GB。第二名是KeyCDN,他有日本、香港跟新加坡,這幾個節點Cloudfront跟MaxCDN也都有,但MaxCDN要用亞洲節點要另外收15美元/月。
  2. 要便宜:KeyCDN的價格算是非常的平民,他不分美洲、歐洲或是亞洲,一律0.04美元/GB起跳,相較於Cloudfront的 0.14美元/GB 只有不到1/3的價格,一個小網站一個月可能用不了10G,那麼在KeyCDN的費用就是0.4美元,大約是12元新台幣,真心不貴,尤其如果小網站只有2~3G,那就更便宜了。甚至有些CDN服務商會採取月費套餐的收費方式,像是MaxCDN的套餐是9美元/月,套餐含100GB。100GB在KeyCDN只要4美元,還不用限定一個月用完。
  3. 支援https(http/2跟letsencrypt):這些KeyCDN都有,其他的廠商不是還沒支援就是有些跟https有關的設定要另外收費。
  4. 要能在一個帳號裡頭掛上多個網站:這點Cloudfront是完全沒有限制,KeyCDN一個帳號官網上寫的是可以放5個網站(zone)免費,多一個網站每個月多1美元,但我實測是可以放到10個。如果真的有很多網站需要掛KeyCDN,但又不想多付費用的話,因為KeyCDN沒有固定月租費的要求,我想應該可以分開多個帳號來放,不過我還沒實際這樣用過,有需要的人可以自己試試看。而MaxCDN的9美元月套餐只能放兩個網站,每多一個網站一年12美元。(意思是要一次先繳一年的樣子?)

費用的比較上,我有找到有人已經做好列表,大家可以參考一下:

常見CDN價格比較表
圖片來源網站:7 Alternatives to Amazon CloudFront CDN

如果你不確定你的網站一個月會用掉多少流量,怕用了CDN之後一下子花掉一大筆錢,那麼KeyCDN提供了免費的試用方案就可以派上用場。試用方案提供25GB的流量,最長使用時間為30天,看哪個先達到,就結束試用。比方說你10天就用完25GB的流量,那試用就結束。若是你30天也只用了5GB的流量,那因為30天期滿,還是結束試用。

有興趣試用的朋友,可以看我的影片了解一下做法:


以下內容請註冊免費會員並登入後即可觀看!



付費會員請登入後觀看Vimeo版無廣告影片

延伸閱讀:

分享本文:

“網站如何使用CDN提升載入速度介紹與KeyCDN設定使用教學” 有 2 則留言

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料