服務端響應時間只占整個請求路徑上很小的一部分,PC上更重要的是優化首屏的加載,無線端更多則是優化中間的管道。
1.無線端請求合并
無線環境下做請求合并的收益是比較大的,所以會將當前的兩次請求在服務端做ESI合并為一個請求。在無線環境下減少請求的數量可以明顯減少總耗時。
無線環境下數據大小對性能的影響比在PC端的更明顯,PC端數據從20KB到80KB增加了100毫秒,而無線端數據從20KB到80KB增加了700 毫秒。因此是否能控制頁面大小對無線端的性能影響很大。
綜上,我們得出如下結論。
在無線環境下,減少網絡請求次數對首屏加載性能有比較明顯的影響;
無線環境下的文件大小與PC環境下的文件大小對性能的影響效果不同:無線環境下的數據大小對性能影響比在PC環境下的更明顯,所以是否能控制頁面大小對無線環境下的性能影響很大;
CDN直接Cache可以大幅提升性能,所以盡量將數據Cache到CDN,這對無線端同樣是有效的;
小數據情況下,動態加速和直接回主站沒有明顯優勢,再加上當前動態加速鏈路還在調優中,所以當前無線數據直接回統一Cache比較理想,待動態加速更加成熟后再走CDN。
3. CDN動態加速
CDN的動態加速技術也是比較流行的一種優化技術,它的技術原理就是在CDN的DNS解析中通過動態的鏈路探測來尋找回源最好的一條路徑,然后通過DNS的調度將所有請求調度到選定的這條路徑上回源,從而提高用戶訪問的效率。
由于CDN節點是遍布全國的,所以用戶接人一個CDN節點后,可以選擇一條從自己最近的CDN節點到源站鏈路的最好路徑。這里的一個簡單原則就是在每個CDN節點上,從源站下載一個一定大小的文件,看哪條鏈路的總耗時最短。這樣可以構成一個鏈路列表,然后綁定到DNS解析上、更新到CDN的LocalDNS。當然,是否走這條鏈路并不定只依據“耗時”這個唯一條件, 有時候也要考慮網絡成本,例如走某個節點雖然可以節省10毫秒時間,但是網絡帶寬成本卻增加很多,還要綜合考慮網絡鏈路安全等其他因素。
4. WebP圖片優化
WebP是一種同時提供了有損壓縮與無損壓縮的圖片文件格式,派生自圖像編碼格式VP8。WebP最初在2010年發布,目標是縮小文件并達到和JPEG格式相同的圖片質量,以便節省圖片文件的網絡傳送時間。
Chrome瀏覽器以及Chromium 內核的瀏覽器都支持WebP格式的圖片,Android 4.0 以上也都原生支持該類型圖片。根據caniuse com的統計,目前約有70%的用戶可以享受到WebP格式帶來的好處。
(1) WebP帶來的收益
節約的帶寬=CDN流量x可以使用WebP格式圖片的流量占比x支持WebP的瀏覽器占比xWebP格式壓縮率(實測為38%~ 41%)。從公式可知,帶寬收益與CDN流量、支持WebP的瀏覽器(主要是Chrome內核瀏覽器)占比、頁面中可以使用WebP格式的圖片占比成正比。
我們以商品詳情系統的放大鏡圖片(40x40/ 310x310)和所有裝修中的圖片使用WebP為例,計算出詳情系統使用WebP后,一個月大約會節約數十萬元左右的帶寬費用,非?捎^。
(2)最佳實踐
WebP有m0~m6等7種壓縮級別,一般來說級別越高畫質越好。但級別越高轉換為WebP所要消耗的CPU資源也更多。在用WebP轉換圖片時要注意以下問題。
①轉換為WebP圖片的時候,使用有損壓縮(與m0~m6壓縮級別無關)會導致:紅色字體被壓縮之后普遍偏暗;
部分藍色字體被壓縮之后偏模糊;
當背景為黑色的時候,紅色小字體偏模糊;當背景為紅色的時候,黑色小字體偏模糊。
②低版本的Chrome瀏覽器不支持透明通道的WebP,所以對PNG圖片不能使用WebP格式。
③gif轉換為WebP動畫非常耗性能,所以只處理第一幀圖片。
④原圖轉換成WebP非常耗性能,圖片的所有縮略圖(如310x310)都是先轉換為JPEG格式,再轉換為WebP格式。
通過分析近萬張圖片我們得出以下結論:網站制作壓縮級別在m0~m2時,不少圖片丟失色塊(出現馬賽克),壓縮級別為m3及以上時則極少出現此問題,同時m3級別所節約的帶寬和m4級別是非常接近的,但m3的轉化性能明顯高于m4。因此,我們決定使用m3級別。