提高內容生產力

Ilya Grigorik
Ilya Grigorik

我們的網頁應用程式在範圍、目標和功能方面持續成長,這是好事。不過,隨著網路內容越來越豐富,另一個趨勢也隨之而來:每個應用程式下載的資料量持續穩定增加。為了提供優異效能,我們必須最佳化每個位元組的傳送!

現代化的網頁應用程式是什麼樣子?HTTP 封存可協助我們回答這個問題。這項專案會定期檢索最熱門的網站 (Alexa 前 100 萬名單中的 30 萬多個網站),並記錄及匯總各個目的地的資源數量、內容類型和其他中繼資料分析資料,藉此追蹤網路的建構方式。

HTTP Archive 趨勢

第 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 的資料,而且必須在數百毫秒內整合,才能提供我們追求的即時網頁體驗。

考量到這些要求,要實現即時網頁體驗並非易事,因此最佳化內容效率至關重要:消除不必要的下載、透過各種壓縮技術最佳化每個資源的傳輸編碼,並盡可能利用快取來消除多餘的下載。