最佳化內容效率

Ilya Grigorik
Ilya Grigorik

我們的網頁應用程式持續擴大範圍、擴展野心並增加功能,這都是好事。不過,為了打造更豐富的網路,我們也持續推動另一項趨勢:各應用程式下載的資料量持續以穩定速度增加。為了提供出色的效能,我們需要最佳化每個位元組的傳送!

現代化的網頁應用程式長什麼樣子?HTTP 封存檔可協助我們回答這個問題。這個專案會定期檢索最熱門的網站 (Alexa 百大網站清單中的 300,000 個以上),並記錄及匯總各個目的地的資源數量、內容類型和其他中繼資料的分析資料,以追蹤網際網路的建構方式。

HTTP 封存區趨勢

第 50 個百分位數 第 75 個百分位數 第 90 個百分位數
HTML 13 KB 26 KB 54 KB
圖片 528 KB 1213 KB 2384 KB
JavaScript 207 KB 385 KB 587 KB
CSS 24 KB 53 KB 108 KB
其他 282 KB 308 KB 353 KB
總計 1054 KB 1985 KB 3486 KB

上方資料記錄了 2013 年 1 月至 2014 年 1 月期間,網站上熱門目的地下載位元組數量的成長趨勢。當然,並非所有網站的成長率都相同,也不一定需要相同的資料量,因此我們會在分布圖中標示不同的百分位數:第 50 位數 (中位數)、第 75 位數和第 90 位數。

2014 年初,中位網站由 75 個要求組成,總共傳輸的位元組數為 1054 KB,且位元組 (和要求) 總數在去年持續穩定成長。這項結果本身並沒有什麼特別之處,但確實對效能有重要影響:雖然網路速度越來越快,但不同國家/地區的網路速度提升速度不同,許多使用者仍受限於數據上限和昂貴的計量型方案,尤其是在行動裝置上。

與電腦版應用程式不同,網頁應用程式不需要單獨的安裝程序:只要輸入網址,即可立即啟用,這正是網頁的一大特色。不過,為了實現這項功能,我們通常必須擷取數十個,甚至數百個不同的資源,這些資源加起來可能會產生數 MB 的資料,而且必須在數百毫秒內完成,才能提供我們追求的即時網頁體驗。

根據這些需求提供即時的網頁體驗絕非易事,因此必須盡可能提高內容效率:消除不必要的下載作業、透過各種壓縮技術最佳化各項資源的轉移編碼,並盡可能利用快取功能來消除多餘的下載作業。