【編者按】來自Yahoo!的Exceptional Performance團隊為我們帶來瞭改善Web性能的最佳實踐方案。為此，他們為此進行瞭 一系列的實驗、開發瞭各種工具、寫瞭大量的文章和博客並在各種會議上參與探討。最佳實踐的核心就是提高網站性能。通過各種努力，xcetional Performance團隊總結出瞭一系列可以提高網站速度的方法。可以分為 7 大類 34 條。包括內容、服務器、cookie、CSS、JavaScript、圖片、移動應用等七部分。

延伸閱讀：

• Web程序優化的最佳實踐（網站內容篇）
• Web程序優化的最佳實踐（服務器篇）
• Web程序優化的最佳實踐：JavaScript和CSS篇

本文為Cookie、圖片及移動應用部分的內容。

圖片和 Coockie 也是我們網站中幾乎不可缺少組成部分，此外隨著移動設備的流行，對 於移動應用的優化也十分重要。這主要包括以下幾個部分。

Coockie:

1. 減小Cookie體積

2. 對於頁面內容使用無coockie域名

圖片：

3. 優化圖像

4. 優化CSS Spirite

5. 不要在HTML中縮放圖像

6. favicon.ico要小而且可緩存

移動應用：

7. 保持單個內容小於 25K

8. 打包組件成復合文本

1、減小Cookie體積

HTTP coockie可以用於權限驗證和個性化身份等多種用途。coockie內的有關信息是通 過HTTP文件頭來在web服務器和瀏覽器之間進行交流的。因此保持coockie盡可能的小以 減少用戶的響應時間十分重要。

有關更多信息可以查看Tenni Theurer和Patty Chi的文章”When the Cookie Crumbles”。

這們研究中主要包括：

• 去除不必要的 coockie

• 使 coockie 體積盡量小以減少對用戶響應的影響

• 註意在適應級別的域名上設置 coockie 以便使子域名不受影響

• 設置合理的過期時間。較早地 Expire 時間和不要過早去清除 coockie，都會改 善用戶的響應時間。

2、對於頁面內容使用無coockie域名

當瀏覽器在請求中同時請求一張靜態的圖片和發送coockie時，服務器對於這些coockie 不會做任何地使用。因此他們隻是因為某些負面因素而創建的網絡傳輸。所有你應該確 定對於靜態內容的請求是無coockie的請求。創建一個子域名並用他來存放所有靜態內 容。

如果你的域名是，YouTube使用的是ytimg.com，Amazon使用的是images-anazon.com等等。

使用無coockie域名存在靜態內容的另外一個好處就是一些代理（服務器）可能會拒絕 對coockie的內容請求進行緩存。一個相關的建議就是，如果你想確定應該使用example.org還是作為你的一主頁，你要考慮到coockie帶來的影響。 忽略掉www會使你除瞭把coockie設置到*.example.org（*是泛域名解析，代表瞭所有子 域名譯者dudo註）外沒有其它選擇，因此出於性能方面的考慮最好是使用帶有www的子 域名並且在它上面設置coockie。

3、優化圖像

設計人員完成對頁面的設計之後，不要急於將它們上傳到 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

4、優化 CSS Spirite

• 在 Spirite 中水平排列你的圖片，垂直排列會稍稍增加文件大小；

• Spirite 中把顏色較近的組合在一起可以降低顏色數，理想狀況是低於 256 色以 便適用 PNG8 格式；

• 便於移動，不要在 Spirite 的圖像中間留有較大空隙。這雖然不大會增加文件 大小但對於用戶代理來說它需要更少的內存來把圖片解壓為像素地圖。

100×100 的圖片為 1 萬像素，而 1000×1000 就是 100 萬像素。

5、不要在 HTML 中縮放圖像

不要為瞭在 HTML 中設置長寬而使用比實際需要大的圖片。如果你需要：

<img width=”100″ height=”100″ src=”mycat.jpg” alt=”Web程序優化 網站優化 圖片優化 Web優化” />

那麼你的圖片（mycat.jpg）就應該是 100×100 像素而不是把一個 500×500 像素的圖 片縮小使用。

6、favicon.ico 要小而且可緩存

favicon.ico 是位於服務器根目錄下的一個圖片文件。它是必定存在的，因為即使你不 關心它是否有用，瀏覽器也會對它發出請求，因此最好不要返回一個 404 Not Found 的 響應。由於是在同一臺服務器上，它每被請求一次 coockie 就會被發送一次。這個圖片 文件還會影響下載順序，例如在 IE 中當你在 onload 中請求額外的文件時，favicon 會 在這些額外內容被加載前下載。

因此，為瞭減少 favicon.ico 帶來的弊端，要做到：

• 文件盡量地小，最好小於 1K

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

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

7、保持單個內容小於 25K

這條限制主要是因為iPhone不能緩存大於 25K的文件。註意這裡指的是解壓縮後的大小。 由於單純gizp壓縮可能達不要求，因此精簡文件就顯得十分重要。 查看更多信息，請參閱Wayne Shea和Tenni Theurer的文件”Performance Research,Part 5: iPhone Cacheability – Making it Stick”。

8、打包組件成復合文本

把頁面內容打包成復合文本就如同帶有多附件的 Email，它能夠使你在一個 HTTP 請求中 取得多個組件（切記：HTTP 請求是很奢侈的）。當你使用這條規則時，首先要確定用戶

代理是否支持（iPhone 就不支持）。