優化網站內容提升效能

魚戀秋波 Neil Y.K. :

相當重要第一條。根據Yahoo的研究，減少一個網站的HTTP請求數目會增進相當大的效能與速度。以下有幾種方法可以有效的減少HTTP Request ：

1. 合併檔案文件：如把多個css或js檔案併成一個。
2. CSS Sprites：什麼是CSS Sprites？簡單的說，就是把網頁上用到的多個小圖片全部統一放到一張圖片上，如此就只需要一次HTTP Request啦！而後在排版時再利用CSS的background-position屬性來調整背景圖片(background-image)的絕對位置。
3. 影像地圖(Image maps)：與CSS Sprites相同理由，但此法只適合用在連續的圖片上，故CSS Sprites較優。
4. Inline images：使用data:URL scheme內嵌圖片到你的HTML裡，但此法會加大你的HTML大小，比較好的方式是將Inline images放在你可暫存的樣式表中。不過不是所有瀏覽器都支援Inline images！

2. 減少DNS解析 (Reduce DNS Lookups)

就是去DNS伺服器詢問將網址解析為IP的過程，一次DNS Lookups大約會花掉20-120 milliseconds的時間，而在這段期間瀏覽器只能邊發呆邊等DNS回應。建議一個網頁最好保持Hostname在2~4個之間，太多會花太多時間在DNS解析，太少則會不利於檔案的平行下載(parallel downloads，後面會談到)。

3. 避免重新導向 (Avoid Redirects)

盡量避免301與302重新導向。一個值得住意的是要記得幫你的子目錄URL加上slash「/」，試試看沒加的話連往http: //yourdomain/123的request是不是會被重新定向到http://yourdomain/123/呢。而如果你是使用Apache你可以透過Alias、mod_rewrite或DirectorySlash這些指令來解決這個問題。

4. 暫存你的AJAX (Make Ajax Cacheable)

為你的Ajax加上Expires。

5. 延遲載入元件 (Post-load Components)

有些你不會立即用到的檔案圖片你可以稍後再載入，像是用來drag and drop還有空置依些動畫的Javascript等。

6. 預先載入元件 (Preload Components)

你可以預先利用在瀏覽器空檔時，載入一些使用者接下來可能會用到的檔案圖片等。

7. 減少DOM元素數量 (Reduce the Number of DOM Elements)

太多的DOM Element會降低Javascript執行效能。

8. 將元件放到不同的網域 (Split Components Across Domains)

這是為了提高頁面同時間能下載愈多的元件(平行下載)，因為一個Hostname正常同一時間只能下載兩個請求檔案。實踐方法例如你可以將HTML或動態內容放在www.example.org，而靜態元件像是圖片、JS檔則分別放在static1.example.org和 static2.example.org。但需注意一個網頁最好保持Hostname在2~4個之間(第2點)。

9. 最小化iframe數量 (Minimize the Number of iframes)

iframe的好壞是大家長久以來爭論的話題之一，使用iframe有好有壞端看個人用途吧。

10. 不要有404錯誤 (No 404s)

除了會破壞使用者體驗外，還會停止平行下載，此外，有些瀏覽器還會花時間去解析傳回來的404文件。

參考資料：http://developer.yahoo.com/performance/

• 關鍵字 : example, Sprites, Components, 網頁, 檔案圖, 會花, 平行下載, 保持Hostname, yourdomain, images, background, Reduce, Number, Inline, 過程, 連續, 速度, 這段期, 請求檔案, 話題