網站的視覺設計及內容，是能否吸引訪客的重要因素之一，但也不能因而顧此失彼，造成網站效能的瓶頸。從過去的訪客行為研究分析指出，等待一個網頁的呈現時間不能超過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項準則，解決效能表現不佳的現象。
作者表示，這些準則都經過實務證明為有效的解法，可以幫網站減少平均二至三成的網路傳輸時間。對照本書，檢視你的網站架構出了哪些問題，並對症下藥加以落實，我相信可以讓訪客感受到明顯的效能提升。
作者簡介：
陳宏一─交通大學資訊管理研究所碩士
目前任職於某數位行銷公司技術經理，曾任職於南亞科技資訊部工程師、資迅人網路研發副理、艾群科技產品研發部經理，專精於OOAD、 J2EE 相關技術、Open Source、資料庫設計、軟體開發流程及專案管理等；取得SCJP、SCWCD、SCJD、SCEA、ITIL等認證。曾經歷大型社群及電子商務網站、 WAP/3G行動加值服務、CTI/CRM客服系統架構規畫設計等。
最新主題
‧ [虛擬主機]4myWeb (hanklu)
‧ 4/12 處理器新聞與文章 - AMD技術長離職 VIA Isaiah測試現身 (guruchin)
‧ 三論「博X來」— 訂購商品與結帳是否是同一個使用案例？ (Kenming)
‧ 今天好爽 (love72629s)
‧ SOA對於營運流程的衝擊(下)～加速知識型企業的產生 (duncan)
‧ 救回 Exchange Server 上被刪除的郵件 (jay214)
‧ Openads廣告管理與追蹤系統 (adao)
‧ Microsoft、Yahoo、Google的併購記錄 (5min)
‧ 難得糊塗 Lifestyle Management Group Limited (jsjsjj)
‧ iT邦幫忙每日發送問答與知識摘要給您 (ithelp)
‧ 【政府採購】VASCO OTP動態密碼系統正式供貨 (joyce1104)
‧ 準備好了嗎？ERP顧問師告訴你微利時代中小企業如何省錢開步走 (amigosoft)
‧ HP 1600/2600/2605 Toner chip resetter (blueeratw)
‧ 【Gogrok】遊戲破不了關時…這樣求救就對啦！ (plus318)
‧ 全球效能第一的SSL加速卡 (asiapeak)
‧ PGP Command Line 協助企業加密防護機密資料 (pgp)
‧ 各家病毒回報方式與心得 (come2)
‧ 酷愛汽車機車自行車的最佳工具§行動影像記錄器§ (urainbow)
‧ OCUP/UML初級認證保證班 (271080)
‧ jeep1688 (jeep1688)
‧ ERP、POS整合，才能在製造、通路、品牌混戰中百戰百勝。 (sutp)
‧ JCOP10簡裝版套件包: 1,500元 (futako)
‧ 用離線編輯軟體Live Writer來輕鬆的寫詳細圖文IT技術分享的部落格 (dotjum)
‧ 策略和營運(一) (yinshih)
‧ 改良 UI 減少企業無形的人力浪費 - 多規格貨品輸入畫面設計 (marlon)
‧ Cisco UC520 (Call Manager Express) 統合通訊產品教育訓練 (kammy)
‧ 點選式交換排序(Javascript) (aqr199)
‧ 物件導向Javascript - what is this (fillano)
‧ 請介紹一下您們網頁設計中融入SEO及網路行銷理念的好處是什麼? (wangysj001)
沒有留言:
張貼留言