2012年7月1日 星期日

大型EC網站網頁效能調校 ── Image Server

由於筆者本身負責國內某大型 EC 網站的 Infrastructure 規劃,隨著商品圖片與廣告 banners 數量越來越多,網頁與圖片的載入速度也開始逐漸變慢。因此,透過如 FirebugYSlow 以及 WebPageTest 等網頁效能檢測工具去觀察、比較其他同業網站的作法,發現到「Image Server」或許可以解決此一問題,而這也是我撰寫本文的動機。

一、什麼是「Image Server」?

顧名思義,「Image Server」就是專門負責輸出圖檔的 Web Server 或 Reverse Proxy,您可以使用:Apachelighthttpdnginx IIS...等都可以架設這類 Servers。當然,也不是只能放圖檔而已啦,只要是一些網站常用的靜態元件(static components)其實都是可以放在上面的,比方說 HTML、CSS、Javascript、Flash 或影音..等類型的檔案。

如果您還希望能做到兩部以上 servers 的負載平衡或者 HA,那麼您可能還需要在前端架設一組「layer 4 switch」的硬體設備(或稱 Server Load Balancer),不過這類設備通常不便宜,動輒從數十萬到數百萬之間都有。如果您的預算有限,也是可使用「軟體」的方式來架設,例如 HAProxyLVS 就是這方面知名的 Open Source 軟體。

您也可以利用目前很流行的雲端服務來建置這類 server,例如 Amazon 的 EC2。而如果您的網站是全球性或國際性的大網站,則可以考慮請 CDN 業者協助規劃(Akamai)。由於筆者只有實作「layer 4 switch + Apache」的經驗,所以本文僅就此方式來討論。若讀者們有其他的經驗或想法,還請不吝指教。

二、運作原理:

為什麼「Image Server」可以加速網頁與圖片的載入速度?其實要先從「BrowserScope」這個網站開始說起。「BrowserScope」是一個專門蒐集各種瀏覽器版本功能規格的網站,請先連上這個網站:http://www.browserscope.org/、再點擊「Network」頁籤:
圖一、BrowserScope 請點選「Network」這個頁籤
圖一、BrowserScope 請點選「Network」這個頁籤
就可以看到如下的比較表:
圖二、BrowserScope 各種瀏覽器的 Network 功能規格比較表
圖二、BrowserScope 網站提供各種瀏覽器的 Network 功能規格比較表

請注意上圖以紅框標示的「Connections per Hostname」欄位,這就是 Image Servers 之所以能加速圖片或其他靜態元件下載/顯示的原因所在!這個欄位代表「瀏覽器在同一時間內對某一台主機之間最多可以建立幾個 connections」,我們可以看到上表中共列出 23 種瀏覽器版本,而有 16 種瀏覽器在同一時間內對於一組主機名稱(Hostname)最多可以建立 6 個 connections。

這是什麼意思呢?以下藉由「WebPageTest」這個檢測工具來做進一步說明。

 三、使用 WebPageTest 測試國內三大 EC 網站的 Image Server


關於「WebPageTest」的介紹,在此就不贅述了,請自行參考網站說明或對岸朋友的這篇文章:「WebPagetest专业的网站测速工具」。筆者挑選了「Yahoo!奇摩購物中心」、「PChome線上購物」以及「momo富邦購物網」這三家 EC 業者的「首頁」作為此次測試的比較對象。

首先,WebPageTest 的使用方式相當簡單。連上首頁以後,參照下圖以數字標示的順序輸入,最後再按下「SART TEST」即可開始進行檢測,這四個欄位分別是:
  1. 要檢測的網址。
  2. 要從何處進行檢測,因為目前在台灣還沒有人提供 WebPageTest 作測試來源主機,所以我在這裡選擇的是地理位置較近的東京(Tokyo),而東京這一台主機只有「IE 8」一種Browser可以選擇。
  3. 報告的標籤文字,此欄位是 Optional 的,可填可不填,可讓您為您的報告命名。
  4. 開始進行檢測,按下後即可開始進行檢測(或排隊)。
圖三、WebPageTest 設定畫面
約數分鐘以後,檢測結束就會產生檢測報告。由於 WebPageTest 的檢測與評分項目很多,也會提供許多效能上的改善建議,由於本文主題是探討「Image Server」,所以僅就這方面作相關探討,其餘項目就麻煩各位讀者自行研究一下囉。
在 WebPageTest 報告裡面,我們要特別注意的是「Details」裡面的「Connection View」那一張圖表裡頭紫色長條狀的部份(即代表「Image」的部份),如以下三張圖表所示:

2012/07/01 - Yahoo! 購物中心首頁測試結果
圖四、2012/07/01 - Yahoo! 購物中心首頁測試結果

由圖四中,我們可以看到「Yahoo! 購物中心」有三部 Image Server,分別為:「l.yimg.com」、「rp1.monday.vip.tw1.yahoo.net」與「rp2.monday.vip.tw1.yahoo.net」。我們從這張圖可以確認:在同一時間內,WebPageTest 測試主機上的 IE 8 瀏覽器與 Web Servers 之間最多都只能建立 6 個connections,這與圖二 BrowserScope 提供的數據是吻合的。

2012/07/01 - PC home 線上購物 首頁測試結果
圖五、2012/07/01 - PC home 線上購物 首頁測試結果
由圖五中,我們可以看到「PC home 線上購物」則只有一部 Image Server,其主機名稱為「ec1img.pchome.com.tw」,而且在同一時間也是只能建立 6 個 connections。 
2012/07/01- momo 富邦購物網
圖六、2012/07/01- momo 富邦購物網
由圖六中,我們可以看到「momo 富邦購物網」的圖片由五部主機吐出,這大概是因為 「<img src="xxx.jpg" />」的 HTML 標籤未妥善指定到不同 Image Servers 之故,所以導致 www.momoshop.com.tw、img1.momoshop.com.tw img2.momoshop.com.tw、img3.momoshop.com.tw 和  img4.momoshop.com.tw  這五部主機並未妥善發揮使瀏覽器「平行下載」(Parallel Download)的作用,反而讓瀏覽器花了太多時間在「Initial Connection」,卻未 reuse 這些 connections。

另外,嚴格來說,「PC home 線上購物」和「momo 富邦購物網」的 Image Servers 其實都還是有一個小問題。因為根據「Web Performance Best Practices and Rules」一文的「Use Cookie-free Domains for Components」,靜態元件最好與動態網頁分開放置於不同域名,也就是說 Image Server 主機所在的 domain 應該與放置動態頁面的 domain 不一樣,如此 request header 中就不會有許多用不到的 cookie,也減少不必要的頻寬與效能耗損,可參考「Yahoo! 購物中心」的作法,他們就是使用「*.yimg.com」和「*.monday.vip.tw1.yahoo.net」作為 Image Server 域名,以便和動態頁面的「buy.yahoo.com.tw」有所區隔。

靜態元件(圖片)應和動態網頁(程式)分開,使用獨立的 domain
圖七、靜態元件(圖片)應和動態網頁(程式)分開,使用獨立的 domain

四、Image Server 的附帶好處

Image Server 除了能加速圖片或其他靜態元件的下載速度之外,還有以下附帶好處:
  1. 提高消費者的瀏覽與購物意願。
  2. 減少頻寬用量 ─ ─ 透過 cache 以及減少 cookie 區段來減少頻寬的使用。
所以,「Image Server」對於大型 EC 網站絕對是一套不可或缺的系統。

沒有留言:

張貼留言