優化網站的 14 項原則性建議－Mercury的部落格

Yahoo! 的首席網站優化工程師 Steve Souders 從去年三月至九月發表了一系列優化網站的 14 項原則性建議，他和他的團隊研究後發現，下載一頁網頁的時間，80% 是花在瀏覽器的工作上，這些工作其實可以透過簡單的優化來刪除掉，從而大幅提高網站的效率，我們不妨看一看這位專家給我什麼建議。

儘量減少發出 HTTP 請求：網頁上各式各樣的 JavaScript、CSS、圖像、Flash 等佔去了瀏覽器大部分的工作，所以減少網頁中需要下載的元件，從而減少發出 HTTP 請求，是優化網站的最重要一步。方法是合拼多個 JavaScript 和 CSS 檔案，利用「CSS 精靈」技術等。
把內容分散到不同的伺服器：把所有內容從一個伺服器送出，顯然會做成瓶頸效應，既加重伺服器的負擔，也增加伺服器周邊網絡的負擔，對於大型的網站最理想的作法是在世界各地設立區域性的伺服器，減少網絡擠塞現象，至於較小型的公司則可以光顧商業性的「內容傳送網絡」服務供應商。更小型甚至個人網站又如何呢？可以嘗試把靜態的內容分離出來，從應用伺服器移到另一台伺服器。
每一項內容都註明到期日期：為了避免訪客經常重複下載網站內不常改動的內容，我們應該為每一項內容註明到期日期，瀏覽器會把未過期的內容放在緩存區，節省了不必要的 HTTP 請求。圖像是最值得使用這個技巧的內容，不過其他內容包括 JavaScript、CSS、Flash 等在可能的情況下也應該盡量使用。
把內容用 Gzip 壓縮：任何文本內容都應該在發送前用 Gzip 壓縮，包括 HTML、JavaScript、CSS，甚至 XML 和 JSON，一般來說可以節約 70% 的頻寬，現代的瀏覽器都支援 Gzip 壓縮的內容，少數亦支援 deflate。不過圖像和 PDF 的檔案卻不要壓縮，因為他們本身的編碼方法已經壓縮，額外的壓縮程序可以說沒有任何幫助，反而會增加伺服器和瀏覽器的工作量。
把 CSS 放在網頁的開始位置：這樣做讓瀏覽器可以漸進式顯示頁面，無須等待整個網頁下載完畢才顯示。以 IE 來說，只有當所有 CSS 檔案下載完畢它才開始顯示頁面，以免萬一 CSS 的最終設定與開始時不同，IE 需要把畫面重新調整，所以把 CSS 放在最前面的位置有助 IE 盡早開始顯示頁面。Firefox 雖然無需等待所有 CSS 下載完成才顯示頁面，但若果它發現 CSS 的最終設定與開始時不同，它會把畫面重新整理，換句話說訪客有機會在開始的時候看到非最終版本的頁面。總之，把 CSS 放在最前面的位置對兩個瀏覽器都是最佳的安排。
把 JavaScript 放在網頁的最底位置：跟 CSS 的問題差不多，JavaScript 也會阻擋流灠器漸進式顯示頁面，但是解決的方法卻剛好相反，因為瀏覽器會把 JavaScript 以後的內容暫停顯示，直至 JavaScript 下載完畢，所以 JavaScript 放在越後的位置越好。
不要使用 CSS 表達式：這是 IE 獨有的功能，在 CSS 中加入動態表達式可以製作一些特別效果，例如背景顏色每分鐘自動轉換等，可惜 CSS 表達式不單只在顯示頁面時進行運算，當我們改變瀏覽器的大小、上下滾動頁面、甚至鼠標在頁面上移動也會引發這些表達式重複運算，次數達到數以萬計！
把 CSS 和 JavaScript 放在外部檔案：這一點乍聽起來似乎與前面建議的儘量減少 HTTP 請求有衝突，其實大部分的 CSS 和 JavaScript 都很少改動，硬把他們塞進網頁中會引致網頁太大，增加了下載的時間，反而把它們分離出來，瀏覽器可以利用緩存的 CSS 和 JavaScript 來節約頻寬和時間，整體的效率反而提升。
儘量減少瀏覽器查閱 DNS：網頁的內容來自多個不同的伺服器，瀏覽器便要查閱 DNS 來讀取每一個伺服器的 IP 地址，內容分散得越廣泛，需要查閱 DNS 的次數便越多，雖然作業系統和瀏覽器會把得到的 IP 地址放在緩存，但緩存的時間一般不超過一小時，所以我們要儘量減少內容的分散程度。不過若果內容太集中的話，不單只違反了前面第二點原則，也令到平衡下載內容的成效降低，Steve Souders 建議不要把內容分散在超過四個伺服器上。
壓縮 JavaScript 檔案：把 JavaScript 中的注釋和空白字元刪除，能大幅減小所佔的空間，節約頻寬和下載時間。JSMin 和 YUI Compressor 是其中兩個比較受歡迎的 JavaScript 壓縮工具。
避免使用重新導向：重新導向一般是透過 HTTP 301 和 302 來實現的，目的是把瀏覽器從原來的網址引導向另一個網址，過程中瀏覽器提出了多個請求才能下載真正的網頁，這種情況應儘量避免。若果你的網頁更改了路徑，又不希望使用舊路徑的用戶的用戶碰釘子，可以使用 Apache 的 Alias 或者 mod_rewrite 模組。此外，一個很常見卻很少人知道的重新導向陷阱就是在 URL 的最後漏掉了「/」，例如在瀏覽器輸入 http://www.hkpug.net/forum（注意後面沒有「/」），伺服器可能會把瀏覽器重新導向到 http://www.hkpug.net/forum/，解決的方法也是使用 Alias 或 mod_rewrite 模組，或者 Apache 的 DirectorySlash 指示。
避免重複的 JavaScript：這個建議看來有點可笑，但在現實世界它出現的機會比我們想像的高得多，尤其是在開發人員眾多的項目，與及項目中涉及的 JavaScript 互相依賴而錯綜複雜。IE 並不懂得分辨重複的 JavaScript，後果是同一個 JavaScript 被下載多次，每次都重新運算，浪費了大量的時間和資源，Firefox 雖然不會把同一個 JavaScript 重複下載，但卻會重複運算。理想的解決方法是在應用系統中使用 JavaScript 管理模組，中央解決重複和互相依賴的問題。
正確配置 ETag：ETag 是 HTTP 用來判斷一個網絡資源（HTML 檔案、一幅圖像、JavaScript、獲任何可以從伺服器上下載的內容）是否已經過期，它比 ExpiryDate 這個 HTTP 變量有更大的彈性，不過在叢集伺服器（server cluster）的環境中不正確配置 ETag 很容易得到反效果，若果你不打算使用 ETag 的驗證模式，建議你關掉伺服器的 ETag 功能。
把 Ajax 的結果緩存：Ajax 其中一個主要好處是用戶可以較迅速地得到回應，但若果我們不正確地使用 Ajax，用戶仍未可以享用最優化的網絡服務，前面提及的技巧很多都可以應用在 Ajax，包括 (3) 每一項內容都註明到期日期，(4) 把內容用 Gzip 壓縮，(9) 儘量減少瀏覽器查閱 DNS，(10) 壓縮 JavaScript 檔案，(11) 避免使用重新導向，(13) 正確配置 ETag。其中第三點是最重要的，因為它直截了當地減少了 HTTP 請求。