網站的視覺設計及內容,是能否吸引訪客的重要因素之一,但也不能因而顧此失彼,造成網站效能的瓶頸。從過去的訪客行為研究 分析指出,等待一個網頁的呈現時間不能超過9秒鐘,但面對目前網頁內容多媒體化的現實挑戰,要達到這樣的目標,在前端頁面的設計上,也就需要多花些心思。

著重網頁前端的效能改善

《High Performance Web Sites》內容主要針對網站前端的設計人員所設計。作者曾經擔任雅虎CPO(Chief Performance Officer),在雅虎負責研究改善網站效能的方法,他以多年的經驗整理出14個網站前端設計需要注意的準則。全書內容簡明扼要,具有網站設計經驗的讀者,可以快速領略要點;初次接觸的生手,也可以透過本書建立良好的網站設計觀念。

14條必勝定律

如何有效提升網站效能?作者針對網站效能最佳化歸納出以下方針,並舉例加以說明:

1. 減少需要發出HTTP Request的數量

當你設計的網頁中包含的元件數量越多,Client需要對網站伺服器發出的HTTP Request也會增加,同時也會延長網頁處理的時間。

2. 採用Content Delivery Network服務

由Mirror Image、Akamai、SAVVIS等業者所提供的Content Delivery Network(CDN,內容遞送網路服務),可以供應強大的全球網路基礎架構,將網站以最有效的方式傳送給全球使用者,並自動幫網站選擇最佳路徑傳送資 料,例如,根據瀏覽者所在地、網路品質及流量狀況,選擇距離用戶端最近的資料中心傳送資料,確保網頁的瀏覽品質及運作速度。

3. 在網頁中加入過期檔頭

你可以利用這個設定讓網頁具備快取機制,縮短頁面載入時間,尤其是針對內容不常變動的網頁。當然這樣的運用,得視你的網頁性質而定,若內容變動頻率高的網頁,則不適用此方式。

4. 善用Gzip壓縮機制

以XML/HTTP做為資料交換的開放格式已經十分普遍,傳輸的檔案體積,較過去單純的 EDI方式增加許多,用傳送壓縮時間換取傳輸時間,也是一種提升效率的策略,目前常見的網站伺服器大都支援此項技術。你甚至也可以視情況選擇壓縮 HTML、CSS及JavaScript的檔案內容。

5. 將Stylesheet置於網頁頁首

將樣式表(Stylesheet)置於頁首,可以讓CSS設定先行載入,在第一時間套用設定直接呈現網頁。相較於把樣式表放置在頁尾,等所有內容都下載完畢後才套用,樣式表置於頁首的作法,除了頁面呈現速度較快,載入過程中也較不易造成空白頁的出現。

6. 將Script內容置於頁尾

許多實際狀況中,網頁包含的Script程式,本身並不需要在載入後立即執行,所以作者建議將這些程式碼置於頁尾,至少內容可以在傳輸前段時間即備妥,讓使用者有較佳的瀏覽體驗。

7. 避免CSS Expression的撰寫方式

CSS Expression的目的,在於讓自訂樣式的語法可以取代部分的Script內容,雖然這麼做很好用,但因網頁顯示過程中花費較多的邏輯判斷時間,造成網站效能的致命傷。

8. 將JavaScript及CSS內容獨立於網頁內容之外

透過獨立內容的方式,讓HTML本文檔案縮小,而且可以同時被瀏覽器下載,以縮短網頁呈現的時間。

9. 減少DNS查找的次數,縮短取得網頁內容之前的前置時間

雖然網頁可以串連不同網站來源的內容,但是不同網站來源的內容一旦太多,便會延遲頁面載入速度;如果能夠減少網頁內不同網站來源的內容,就可以減少從用戶端發出的DNS Request數量,縮短DNS的查詢時間。

10. JavaScript內容精簡化

網頁中的JavaScript也是下載的一部分,所以當程式碼內容較多時,亦會直接影響網頁下載的速度。檢視一下程式碼,移除不必要的部分。

11. 避免重導向

網頁重新導向是很方便的功能,但對於使用者而言,他必須等待更多的時間直到最終頁面被載入,所以應該盡可能避免使用重導向轉址功能。

12. 移除重複的Script程式碼

重複的Script程式碼需要花費更多的下載時間,這個問題通常發生在程式碼未能妥善模組化的情況下,檢查一下你的Script程式吧。

13. 善用Etag

透過設定Web Server中的Entity Tag方式,能決定網頁中被快取的內容,以加速網頁呈現,但也得視網頁內容特性而定,Etag主要運用在靜態頁面上,而動態顯示內容的網頁則不適用此方式。

14. 讓Ajax程式可做到暫存快

Ajax架構透過非同步的傳輸方式,讓使用者具有較佳的使用體驗,卻不見得是效能的保證。除了可以透過利用Gzip壓縮、避免DNS查找次數、簡化JavaScript內容之外,控制HTTP過期檔頭來快取Ajax網頁,也能發揮明顯效果。

拿知名網站開刀,保證你大呼過癮

本書最後以全球十大網站做為案例分析的對象,包括Yahoo、Google、Amazon、YouTube等。這些網站之所以成功,除了透過內容及社群機制吸引訪客,在網站效能的表現上,也必須克服流量提高所帶來的問題。

作者使用3個度量值(Page Weight、Response Time、YSlow Grade)逐一檢視這些網站,找出問題點以及可以改善的地方,配合前述建議的14項準則,解決效能表現不佳的現象。

作者表示,這些準則都經過實務證明為有效的解法,可以幫網站減少平均二至三成的網路傳輸時間。對照本書,檢視你的網站架構出了哪些問題,並對症下藥加以落實,我相信可以讓訪客感受到明顯的效能提升。

試圖想像以下情境:當你所建立的內容網站不斷地湧入訪客,並進行大量的檔案上傳及下載,傳輸量如指數般地成長,檔案系統的存取頻率居高不下,雖然你會因為 網站使用率提升而覺得十分高興,但同時也要面臨系統效能不斷下降的問題。你會怎麼作?花大把銀子購買更好規格的硬體進行擴充?還是仔細檢討流程是否還有改 善之處?

從問題的根本思考解決之道

本書作者Cal Henderson在書中便提到同樣的問題,他在任職於Flickr.com期間,曾面臨到檔案上傳功能效能不彰的難題,當時的解決方式並非直接以增購硬 體設備的方式來改善,而是針對他們的網站特性,自行研發出一種更精簡的檔案傳輸協定取代傳統的FTP功能,僅僅撰寫了600餘行的PHP程式碼,便省下了 一筆可觀的金錢,並有效地提升系統效能。

你會發現,當資訊人員在面臨一些難題或錯誤時,通常會採用既定的解法,也就是我們常聽到的最佳實踐方案(Best Practice)。雖然前人經驗值得參考,但有時這些所謂的Best Practice還真的會害死人,最佳實踐方案往往限制了解決問題的思考方向,並磨滅了許多尚未被發掘出來的更好的點子,也讓你未能更深一層鑽入問題的核 心,找到真正適合的解決方法。

何謂可延展性?

從本書的標題《Building Scalable Web Sites》來看,你也許會十分直覺地認為書中所討論的主題,應該不外乎是建置你的硬體及網路架構,當使用者、資料量、及網路流量增加時,便以增加硬體設 備的方式維持良好的系統效能。不過這樣的內容已經是老生常談,想必無法吸引讀者青睞,也有損O’Reilly叢書的品味。

本書對於「可延展系統(Scalable System)」的定義,並非狹隘地侷限於系統效能面或是某特定技術上,而是廣義的定義在以下幾個觀點:

● 系統可以容納日益成長的使用量

● 系統可以容納日益成長的資料量

● 系統是可以被輕易維護的(Maintainable)

若你身為網站開發人員,本書所討論的議題無疑可以讓你受益良多,書中內容主要包含以下重點:

● 網站應用系統本身的架構議題:此架構議題包含了所有相關的硬體及軟體平臺。在設計的原則上通常以階層方式(Layered)來進行,而為了符合階層化設 計,所採用的技術以及搭配的方式亦影響甚鉅。像是利用MVC框架讓軟體階層更加彈性,或是採用一些樣版機制,讓界面設計更加靈活等。

● 對於開發過程的組態環境,通常依循以下原則進行:建立程式撰寫標準,針對程式碼的版本控管,快速的軟體構建機制,完整的測試計畫,以及有效追蹤錯誤及問 題。這些程序雖然不是直接影響到系統本身,但整個過程的流暢能有效提升系統開發的作業,亦符合Scalable System的基本精神。

● 考慮國際化及多重語系的設計彈性,尤其在資料編碼上,從展現層到資料層及資料交換需要考慮問題及處理方式,同時考量資料的正確性及安全性。

● 網路服務的結合,像是電子郵件內容的處理,不同主機之間透過不同傳輸協定的溝通,同步及非同步的方式進行資料交換,保持系統之間良好的一致性及互動性。

● 利用流量統計監控工具來發覺系統運行的瓶頸所在,透過閾值的定義及自動系統檢測功能,讓系統管理者能在第一時間處理以免措手不及,釀成大禍。

本書並非教你如何寫好網站的程式碼,重點在於原則性的討論,是著重在架構上設計時所需要審視的重點,這裡所謂的架構,除了一般所常提及的硬體及軟 體平臺,後續的開發及維護程序也是十分重要。同時,作者在本書所介紹或使用的技術或工具,全然來自開放源碼(Open Source)社群的心血結晶,不會讓你在預算上失血太多。

Follow

Get every new post delivered to your Inbox.