小心使同CSS sprites

網頁設計CSS sprites 是網站速度的優化很重要的一環,但也有其對性能的不利之處。

Vladimir Vukićević 的博文《To Sprite Or Not To Sprite》提到:

CSS sprites 的最大問題是記憶體佔用。非精確構造的 sprite 圖片會佔用意想不到的記憶體空間。以 WHIT TV 網站為例,這裏是一張 sprite 圖片,1299x15,000 的png,已經經過很好的壓縮,實際下載大小只有26K左右,但是流覽器不會轉換壓縮的圖像資料。當圖片下載並解壓,將耗費75MB記憶體(1299 * 15000 * 4)。如果圖片沒有阿爾法透明,可能會減小到1299 * 15000 * 3,可往往還是犧牲了渲染速度。即便如此,我們佔用了55MB記憶體。這張圖片絕大部分是空白的,什麼都沒有,沒有什麼有用的內容。僅僅因為這張圖片,當流覽器只載入WHIT 主頁時會增加75+MB記憶體。

Mozilla Web Development Blog 在《 Use Sprites Wisely》中總結道:

簡而言之,Web Design 即使是很小的 sprite 圖片也有可能吃掉大量的系統記憶體 -- 每個頁面50M甚至100M或者更多。速度雖然至關重要,但要意識到 sprite 及其他 hacks 同樣會影響用戶體驗。

現在再回過頭看之前的《Yahoo與Gmail的CSS Sprites對比》,綜合性能方面 Gmail 無疑占了上風。當然,這些只是前端層面的優化,從根源上來看,設計師用最少的圖片來實現最優的效果才是王道 SEO。

正如雅虎女工程師 Nicole Sullivan 在 Velocity 2009 大會演講 PPT 《The Fast And The Fabulous》所提到的:

consistent design = clean code = fast site(一致的設計 = 更乾淨的代碼 = 更快的網站) 網上推廣