精簡網頁的方法(Simplify Your Web Pages)

精簡網頁的方法(Simplify Your Web Pages)
Fred Wang(http://fredwang.blogspot.com)
2005/03/30

經營網站、製作網頁往往會遇到一個問題, 為什麼我的網頁比別人的慢, 一般人可能採用的方法是加大網路頻寬, 昇級網頁伺服器等, 有時投入大筆金錢後發現效果還是不大, 這時就該檢討根本的網頁大小的問題, 因為Garbage in and garbage out, 若能將過於肥大的網頁減肥50%, 就等於加快一倍的速度。這要如何辦到的? 請看下面各個重點:

1. 正確的HTML設計 :
可避免無效的程式碼, 可以用 HTML Validator來檢查網頁語法的正確性, 如cselite : HTML validator就是不錯的工具。
免費下載往網址: http://www.download.com/CSE-HTML-Validator-Lite/3000-2068-10035333.html?part=dl-CSEHTMLVa&subj=dl&tag=button

2. 設計的精簡化 :
去除不必要的Tag, 用FrontPage, MS Word or Excel等產生的HTML網頁往往十分龐大, 其中包含許多不必要的Tags可以加以去除。
網頁經過多次修改後也常用註解的方式, 留下一些已經不用的HTML 或Javascript codes, 應該加以去除。
Table設計可以改用Div搭配Style定位的方式設計, 除了提昇設計的彈性外, 也減少許多TD, TR的Tags。

3. 程式再用化設計 :
採用CSS(Cascading Style Sheets)的設計, 可將非關內容的設計部份如字型、顏色、背景等抽離成可再用的設計樣式(Styles), 簡化HTML程式碼。
如果這些設計樣式, 可以給更多的HTML網頁共用則將它們集中至一個外部樣式檔(external style sheet), HTML內用LINK tag來載入此檔, 若是只有單一HTML內部共用則採用文件級樣式(document style sheet)將styles寫在HTML檔的STYLE tags內。
另外, HTML內有大量且重複出現的HTML區段, 可以將這重覆的部份寫成Javascript function, 要顯示時再呼叫此Javascript function。當然若是JSP網頁則可以用將這重覆的部份寫成included JSP, 原JSP要顯示時再Include它就可以了。

4. 控制網頁中圖檔的大小及數量
圖檔的大小通常數K到數百K bytes, 因此影響網頁大小比文字還要大得多, 因此應該減少圖檔的大小, 如長寬、解析度、壓縮比、色彩等, 並用jpg or gif的壓縮檔案格式。
有些圖形化的文字, 若可以直接用文字顯示就不要用圖形。
另外, 圖檔的數量越多表示用戶端對Web server的request數量越大, 同樣大小的圖形, 切割成10個圖形或是以單一圖形顯示, 前者的速度將遠慢於後者。

5. 避免使用Frame的設計
用Frame的網頁其實是很多個HTML檔案的組合, 也會增加用戶端對Web server的request數量。

6. 避免使用Applet
需下載Applet到用戶端後才顯示出來, 若改用Flash技術邊傳送邊顯示的方式, 用戶的感受會比較快。

7. 運用工具縮簡網頁大小
推薦兩個工具 :
“LightSpeed Websize Optimizer”: 將html最佳化, 去除不必要的tag及符號
“Absolute HTML compressor” : 換行, 空白及註解等與顯示網頁無關的部份予以刪減

我個人的實作案例是將原109.7K bytes的總網頁大小經過上面的處理及設計, 縮減成68.9K Bytes, 縮簡約40%, requests數也因減少許多圖檔及改變Frame的設計後, 大幅降低, 使得顯示速度超過原來速度一倍以上。