轉 Web程式最佳化的最佳實務：Cookie、圖片及行動裝置 App篇

標籤：

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

延伸閱讀：

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

本文為Cookie、圖片及行動裝置 App部分的內容。

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

Coockie:

1. 減小Cookie體積

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

圖片：

3. 最佳化映像

4. 最佳化CSS Spirite

5. 不要在HTML中縮放映像

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

行動裝置 App：

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的請求。建立一個子網域名稱並用他來存放所有靜態內 容。

如果你的網域名稱是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。

3、最佳化映像

設計人員完成對頁面的設計之後，不要急於將它們上傳到 網頁伺服器，這裡還需要做幾 件事：

• 你可以檢查一下你的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 就不支援）。

轉 Web程式最佳化的最佳實務：Cookie、圖片及行動裝置 App篇