網站性能:圖片和Coockie以及移動應用的優化

2024-08-30 08:33:58

字體：大中小

來源：轉載

供稿：網友

我們在前面的幾節中分別講了提高網站性能中內容、服務器、JavaScript和CSS等方面的內容。除此之外，圖片和Coockie也是我們網站中幾乎不可缺少組成部分，此外隨著移動設備的流行，對于移動應用的優化也十分重要。這主要包括：
Coockie:

減小Cookie體積對于頁面內容使用無coockie域名
圖片：

優化圖像優化CSS Spirite 不要在HTML中縮放圖像 favicon.ico要小而且可緩存
移動應用：

保持單個內容小于25K 打包組件成復合文本
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格式的圖片，不過這都是過去的事情了?，F在只有一個問題就是在真彩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的圖像中間留有較大空隙。這雖然不大會增加文件大小但對于用戶代理來說它需要更少的內存來把圖片解壓為像素地圖。100x100的圖片為1萬像素，而1000x1000就是100萬像素。
31、不要在HTML中縮放圖像

不要為了在HTML中設置長寬而使用比實際需要大的圖片。如果你需要：
<img width="100" height="100" src="mycat.jpg" alt="My Cat" />
那么你的圖片（mycat.jpg）就應該是100x100像素而不是把一個500x500像素的圖片縮小使用。
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就不支持）。

上一篇：網頁設計的尺寸和網頁中廣告設計的規則

下一篇：新手快速學習制作網站ICON的步驟