轉：Yahoo!網站效能最佳體驗的34條黃金規則——圖片、Coockie與行動裝置 App

英文地址：http://developer.yahoo.com/performance/rules.html
      我們在前面的幾節中分別講了提高網站效能中內容、伺服器、JavaScript和CSS等方面的內容。除此之外，圖片和Coockie也是我們網站中幾乎不可缺少組成部分，此外隨著行動裝置的流行，對於行動裝置 App的最佳化也十分重要。這主要包括：
Coockie:

1. 減小Cookie體積
2. 對於頁面內容使用無coockie網域名稱

圖片：

1. 最佳化映像
2. 最佳化CSS Spirite
3. 不要在HTML中縮放映像
4. favicon.ico要小而且可緩衝

行動裝置 App：

1. 保持單個內容小於25K
2. 打包組件成複合文本

27、減小Cookie體積
      HTTP coockie可以用於許可權驗證和個人化身份等多種用途。coockie內的有關資訊是通過HTTP檔案頭來在web伺服器和瀏覽器之間進行交流的。因此保持coockie儘可能的小以減少使用者的回應時間十分重要。
有關更多資訊可以查看Tenni Theurer和Patty Chi的文章“When the Cookie Crumbles”。這們研究中主要包括：

• 去除不必要的coockie
• 使coockie體積盡量小以減少對使用者響應的影響
• 注意在適應層級的網域名稱上設定coockie以便使子網域名稱不受影響
• 設定合理的到期時間。較早地Expire時間和不要過早去清除coockie，都會改善使用者的回應時間。

28、對於頁面內容使用無coockie網域名稱
      當瀏覽器在請求中同時請求一張靜態圖片和發送coockie時，伺服器對於這些coockie不會做任何地使用。因此他們只是因為某些負面因素而建立的 網路傳輸。所有你應該確定對於靜態內容的請求是無coockie的請求。建立一個子網域名稱並用他來存放所有靜態內容。
      如果你的網域名稱是www.example.org，你可以在static.example.org上存在靜態內容。但是，如果你不是在 www.example.org上而是在頂級網域名稱example.org設定了coockie，那麼所有對於static.example.org的請求 都包含coockie。在這種情況下，你可以再重新購買一個新的網域名稱來存在靜態內容，並且要保持這個網域名稱是無coockie的。Yahoo!使用的是 ymig.com，YouTube使用的是ytimg.com，Amazon使用的是images-anazon.com等等。
      使用無coockie網域名稱存在靜態內容的另外一個好處就是一些代理（伺服器）可能會拒絕對coockie的內容請求進行緩衝。一個相關的建議就是，如果你 想確定應該使用example.org還是www.example.org作為你的一首頁，你要考慮到coockie帶來的影響。忽略掉www會使你除了 把coockie設定到*.example.org（*是泛網域名稱解析，代表了所有子網域名稱譯者dudo注）外沒有其它選擇，因此出於效能方面的考慮最好是使用帶有www的子網域名稱並且在它上面設定coockie。

29、最佳化映像
      設計人員完成對頁面的設計之後，不要急於將它們上傳到web伺服器，這裡還需要做幾件事：

• 你可以檢查一下你的GIF圖片中映像顏色的數量是否和調色盤規格一致。 使用imagemagick中下面的命令列很容易檢查：
  identify -verbose image.gif
  如果你發現圖片中只用到了4種顏色，而在調色盤的中顯示的256色的顏色槽，那麼這張圖片就還有壓縮的空間。
• 嘗試把GIF格式轉換成PNG格式，看看是否節省空間的。大多數情況下是可以壓縮的。由於瀏覽器支援有限，設計者們往往不太樂意使用PNG格式的圖 片，不過這都是過去的事情了。現在只有一個問題就是在真彩PNG格式中的alpha通道半透明問題，不過同樣的，GIF也不是真彩格式也不支援半透明。因 此GIF能做到的，PNG（PNG8）同樣也能做到（除了動畫）。下面這條簡單的命令可以安全地把GIF格式轉換為PNG格式：
  convert image.gif image.png
  “我們要說的是：給PNG一個施展身手的機會吧！”
• 在所有的PNG圖片上運行pngcrush（或者其它PNG最佳化工具）。例如：
  pngcrush image.png -rem alla -reduce -brute result.png
• 在所有的JPEG圖片上運行jpegtran。這個工具可以對圖片中的出現的鋸齒等做無損操作，同時它還可以用於最佳化和清除圖片中的注釋以及其它無用資訊（如EXIF資訊）：
  jpegtran -copy none -optimize -perfect src.jpg dest.jpg

30、最佳化CSS Spirite

• 在Spirite中水平排列你的圖片，垂直排列會稍稍增加檔案大小；
• Spirite中把顏色較近的組合在一起可以降低顏色數，理想狀況是低於256色以便適用PNG8格式；
• 便於移動，不要在Spirite的映像中間留有較大空隙。這雖然不大會增加檔案大小但對於使用者代理程式來說它需要更少的記憶體來把圖片解壓為像素地圖。100×100的圖片為1萬像素，而1000×1000就是100萬像素。

31、不要在HTML中縮放映像
      不要為了在HTML中設定長寬而使用比實際需要大的圖片。如果你需要：
<img width="100" height="100" src="mycat.jpg" alt="My Cat" />
那麼你的圖片（mycat.jpg）就應該是100×100像素而不是把一個500×500像素的圖片縮小使用。

32、favicon.ico要小而且可緩衝
      favicon.ico是位於伺服器根目錄下的一個圖片檔案。它是必定存在的，因為即使你不關心它是否有用，瀏覽器也會對它發出請求，因此最好不要返回一 個404 Not Found的響應。由於是在同一台伺服器上，它每被請求一次coockie就會被發送一次。這個圖片檔案還會影響下載順序，例如在IE中當你在 onload中請求額外的檔案時，favicon會在這些額外內容被載入前下載。
      因此，為了減少favicon.ico帶來的弊端，要做到：

• 檔案盡量地小，最好小於1K
• 在適當的時候（也就是你不要打算再換favicon.ico的時候，因為更換新檔案時不能對它進行重新命名）為它設定Expires檔案頭。你可以很安全地把Expires檔案頭設定為未來的幾個月。你可以通過核對當前favicon.ico的上次編輯時間來作出判斷。

Imagemagick可以幫你建立小巧的favicon。

33、保持單個內容小於25K
      這條限制主要是因為iPhone不能緩衝大於25K的檔案。注意這裡指的是解壓縮後的大小。由於單純gizp壓縮可能達不要求，因此精簡檔案就顯得十分重要。
      查看更多資訊，請參閱Wayne Shea和Tenni Theurer的檔案“Performance Research, Part 5: iPhone Cacheability – Making it Stick”。

34、打包組件成複合文本
      把頁面內容打包成複合文本就如同帶有多附件的Email，它能夠使你在一個HTTP請求中取得多個組件（切記：HTTP請求是很奢侈的）。當你使用這條規則時，首先要確定使用者代理程式是否支援（iPhone就不支援）。

英文地址：http://developer.yahoo.com/performance/rules.html
      我們在前面的幾節中分別講了提高網站效能中內容、伺服器、JavaScript和CSS等方面的內容。除此之外，圖片和Coockie也是我們網站中幾乎不可缺少組成部分，此外隨著行動裝置的流行，對於行動裝置 App的最佳化也十分重要。這主要包括：
Coockie:

1. 減小Cookie體積
2. 對於頁面內容使用無coockie網域名稱

圖片：

1. 最佳化映像
2. 最佳化CSS Spirite
3. 不要在HTML中縮放映像
4. favicon.ico要小而且可緩衝

行動裝置 App：

1. 保持單個內容小於25K
2. 打包組件成複合文本

27、減小Cookie體積
      HTTP coockie可以用於許可權驗證和個人化身份等多種用途。coockie內的有關資訊是通過HTTP檔案頭來在web伺服器和瀏覽器之間進行交流的。因此保持coockie儘可能的小以減少使用者的回應時間十分重要。
有關更多資訊可以查看Tenni Theurer和Patty Chi的文章“When the Cookie Crumbles”。這們研究中主要包括：

• 去除不必要的coockie
• 使coockie體積盡量小以減少對使用者響應的影響
• 注意在適應層級的網域名稱上設定coockie以便使子網域名稱不受影響
• 設定合理的到期時間。較早地Expire時間和不要過早去清除coockie，都會改善使用者的回應時間。

28、對於頁面內容使用無coockie網域名稱
      當瀏覽器在請求中同時請求一張靜態圖片和發送coockie時，伺服器對於這些coockie不會做任何地使用。因此他們只是因為某些負面因素而建立的 網路傳輸。所有你應該確定對於靜態內容的請求是無coockie的請求。建立一個子網域名稱並用他來存放所有靜態內容。
      如果你的網域名稱是www.example.org，你可以在static.example.org上存在靜態內容。但是，如果你不是在 www.example.org上而是在頂級網域名稱example.org設定了coockie，那麼所有對於static.example.org的請求 都包含coockie。在這種情況下，你可以再重新購買一個新的網域名稱來存在靜態內容，並且要保持這個網域名稱是無coockie的。Yahoo!使用的是 ymig.com，YouTube使用的是ytimg.com，Amazon使用的是images-anazon.com等等。
      使用無coockie網域名稱存在靜態內容的另外一個好處就是一些代理（伺服器）可能會拒絕對coockie的內容請求進行緩衝。一個相關的建議就是，如果你 想確定應該使用example.org還是www.example.org作為你的一首頁，你要考慮到coockie帶來的影響。忽略掉www會使你除了 把coockie設定到*.example.org（*是泛網域名稱解析，代表了所有子網域名稱譯者dudo注）外沒有其它選擇，因此出於效能方面的考慮最好是使用帶有www的子網域名稱並且在它上面設定coockie。

29、最佳化映像
      設計人員完成對頁面的設計之後，不要急於將它們上傳到web伺服器，這裡還需要做幾件事：

• 你可以檢查一下你的GIF圖片中映像顏色的數量是否和調色盤規格一致。 使用imagemagick中下面的命令列很容易檢查：
  identify -verbose image.gif
  如果你發現圖片中只用到了4種顏色，而在調色盤的中顯示的256色的顏色槽，那麼這張圖片就還有壓縮的空間。
• 嘗試把GIF格式轉換成PNG格式，看看是否節省空間的。大多數情況下是可以壓縮的。由於瀏覽器支援有限，設計者們往往不太樂意使用PNG格式的圖 片，不過這都是過去的事情了。現在只有一個問題就是在真彩PNG格式中的alpha通道半透明問題，不過同樣的，GIF也不是真彩格式也不支援半透明。因 此GIF能做到的，PNG（PNG8）同樣也能做到（除了動畫）。下面這條簡單的命令可以安全地把GIF格式轉換為PNG格式：
  convert image.gif image.png
  “我們要說的是：給PNG一個施展身手的機會吧！”
• 在所有的PNG圖片上運行pngcrush（或者其它PNG最佳化工具）。例如：
  pngcrush image.png -rem alla -reduce -brute result.png
• 在所有的JPEG圖片上運行jpegtran。這個工具可以對圖片中的出現的鋸齒等做無損操作，同時它還可以用於最佳化和清除圖片中的注釋以及其它無用資訊（如EXIF資訊）：
  jpegtran -copy none -optimize -perfect src.jpg dest.jpg

30、最佳化CSS Spirite

• 在Spirite中水平排列你的圖片，垂直排列會稍稍增加檔案大小；
• Spirite中把顏色較近的組合在一起可以降低顏色數，理想狀況是低於256色以便適用PNG8格式；
• 便於移動，不要在Spirite的映像中間留有較大空隙。這雖然不大會增加檔案大小但對於使用者代理程式來說它需要更少的記憶體來把圖片解壓為像素地圖。100×100的圖片為1萬像素，而1000×1000就是100萬像素。

31、不要在HTML中縮放映像
      不要為了在HTML中設定長寬而使用比實際需要大的圖片。如果你需要：
<img width="100" height="100" src="mycat.jpg" alt="My Cat" />
那麼你的圖片（mycat.jpg）就應該是100×100像素而不是把一個500×500像素的圖片縮小使用。

32、favicon.ico要小而且可緩衝
      favicon.ico是位於伺服器根目錄下的一個圖片檔案。它是必定存在的，因為即使你不關心它是否有用，瀏覽器也會對它發出請求，因此最好不要返回一 個404 Not Found的響應。由於是在同一台伺服器上，它每被請求一次coockie就會被發送一次。這個圖片檔案還會影響下載順序，例如在IE中當你在 onload中請求額外的檔案時，favicon會在這些額外內容被載入前下載。
      因此，為了減少favicon.ico帶來的弊端，要做到：

• 檔案盡量地小，最好小於1K
• 在適當的時候（也就是你不要打算再換favicon.ico的時候，因為更換新檔案時不能對它進行重新命名）為它設定Expires檔案頭。你可以很安全地把Expires檔案頭設定為未來的幾個月。你可以通過核對當前favicon.ico的上次編輯時間來作出判斷。

Imagemagick可以幫你建立小巧的favicon。

33、保持單個內容小於25K
      這條限制主要是因為iPhone不能緩衝大於25K的檔案。注意這裡指的是解壓縮後的大小。由於單純gizp壓縮可能達不要求，因此精簡檔案就顯得十分重要。
      查看更多資訊，請參閱Wayne Shea和Tenni Theurer的檔案“Performance Research, Part 5: iPhone Cacheability – Making it Stick”。

34、打包組件成複合文本
      把頁面內容打包成複合文本就如同帶有多附件的Email，它能夠使你在一個HTTP請求中取得多個組件（切記：HTTP請求是很奢侈的）。當你使用這條規則時，首先要確定使用者代理程式是否支援（iPhone就不支援）。