網頁的臃腫化帶來的啟示

每半年我會看一看一些來自於HTTP Archive的關鍵統計資料——HTTP Archive是一個非常棒的歷史資料儲存庫，主要關於世界上訪問量最大的五十萬個網站的規模和構成。

正值Archive臨近四週年之際，我想盤點一下過去的四年時間裡發生了什麼變化，有哪些保持不變，以及我在觀看這些資料向上蠕變的過程中學到了哪些東西。

現在平均網頁2219 KB，而四年前只有991 KB

去年春天平均頁面就跨越了2 MB大關，達到2099 KB。現在的網頁平均比一年前大16％，比四年前大139％。

在過去的六個月時間裡，頁面的平均規模又增長了120 KB。對這樣的變化，我們很容易忽略不計。畢竟這又不是什麼大不了的事情，對吧？區區120 KB遠還沒有達到我們需要擔心的程度。不過，這個數值代表了：更多的頁面資源（如影像，CSS檔案，以及各種指令碼），更多的頁面複雜性，以及更多的效能故障風險。想要了解更多的話，請繼續往下看。

影像佔平均頁面重量的64％

這已經不是什麼不為人知的資訊了。自從我跟蹤了HTTP Archive之後，我就發現影像至少構成了平均網頁的60％。

讓人不可思議的是，影像的增長速度非常之快：總的影像負載在短短四年間增加了一倍都不止。更不可思議的是，現在光是影像的頁面重量就超過了兩年多前的平均整個網頁。

但是，規模並不代表一切

上個月，Nate Berkopec寫了一篇極好的部落格文章，在文中他犀利地點破了為什麼如果你只關注頁面重量的話，就會犯錯。他這樣寫道：

秘密就在於“頁面重量（page weight）”——頁面重量被廣泛地定義為一個頁面的總檔案大小以及它所有的子資源（圖片，CSS，JS等）——但這並非問題的所在。雖然頻寬不是問題，但網頁效能不會隨著寬頻接入變得更加普遍而提高。
問題在於延遲。
我們大部分的網路協議都需要網路往返時延，每一個網路往返增強了網路延時的機率。網路延時受介質傳輸速度的制約，這意味著網路延時並不是在任何地方都會發生。

我曾經寫過一篇關於為什麼更多的頻寬並不是解決效能問題的萬能鑰匙的文章，我的文章聚焦於一個事實，即很多人不明白為什麼雙倍的頻寬不等於快一倍。

Nate的帖子突出了另一個問題：只要時延仍是一個效能問題（也就是說，趨向於永遠），主要的效能元兇將仍然是這樣一個事實——當前典型的網頁包含的一百個左右的資源被託管在幾十個不同的伺服器上。這些網頁中的許多資源都是未經最佳化的，不可測的，不受監督的——因此也無法預測。

作為一個偽例項，讓我們來看一看自定義字型的突然增加。透過HTTP Archive的跟蹤，我們可以看到，在短短的幾年時間裡，自定義字型已經從幾乎只佔網站的7％，到稱霸了網站的一半以上。

自定義字型對設計師而言一個巨大的福音。它能夠讓你完全控制品牌的視覺資本，這在市場中可不是一件微不足道的事情——品牌從未像現在這樣重要。但是，當你的自定義字型實施不佳或外部託管的時候，反而可能會引入效能陣痛——從會導致惱人輸出訊號（無樣式的文字閃爍）的緩慢字型，到會完全阻止頁面其餘部分載入的不響應的字型。

而自定義字型只是資源中的一種。此外還有樣式表，JavaScript，以及幾十個可能多餘的第三方標籤。最好的情況是，這些資源只是逐漸增加了總的延遲時間。最壞的情況是，它們會給你的網頁引入潛在的單點故障。

那麼……你能做些什麼呢？

1.為頁面設定效能預算

許多快速的網頁都有一個共同點，那就是：大小最多約1 MB（或更少）。並非巧合的是，1 MB正是許多公司正在建立的“效能預算”中為他們的網頁設定的最大值。這可不是為了讓頁面更小——而是為了強迫自己最佳化出現在網頁上的資源，並做一些戰略性的優勝劣汰，以便於讓網頁變得更簡單，從而減少延遲。如果你還不熟悉關於效能預算的思路，Tim Kadlec撰寫了一些非常棒的文章，指出了為什麼你需要效能預算以及你應該跟蹤什麼樣的指標。

2.首先處理影像

如果你想在效能上取得一些快速的勝利，那麼先從最佳化你的影像開始。下面是我建立的一個高層次的影像最佳化清單，以便於你介紹影像最佳化的重要性給貴組織中的每一個人（尤其是非技術人員）。想要了解更深的話，我強烈推薦Guy Podjarny寫的這篇文章——《High Performance Images: Beautiful Shouldn’t Mean Slow》。

3.最佳化字型

Ilya Grigorik寫過一篇關於web字型最佳化的文章，很精彩，設計人員和開發人員不可不讀。

4.得到有關第三方指令碼的控制程式碼

一個典型的web頁面可以包含75+第三方指令碼，並且當涉及到管理這些指令碼的效能的時候，簡直就如同群魔亂舞。許多網站所有者其實並不知道他們的第三方指令碼真實的執行情況，以及這些指令碼會如何影響他們的網頁。這裡有一個簡短的入門介紹，可以幫助你得到有關於你的第三方指令碼的控制程式碼。

5.教育接觸網頁的每一個人

有這麼多的人——從企業老闆到市場營銷人員——他們的決定會影響頁面的執行。所有這些人都需要知道，他們做的每一個決定——從實施新的第三方外掛到使用GIF動畫作為一個標誌性圖片——都是有影響的。

6.瞭解頁面大小和複雜性對你的業務的影響

你還必須瞭解頁面大小和複雜性對載入時間的影響。一旦你將頁面大小，複雜程度，速度和業務效能之間的點連線起來，那麼知道往哪裡投入最佳化的力量就會容易得多。如果你剛進入這個領域，那麼不妨讀一讀我寫的這篇關於web效能及其對業務指標的影響的簡短文章。當然如果你同我一樣，正瘋狂致力於案例研究，那麼Tim Kadlec和我最近還發布了WPO統計，一個顯示效能和業務成功之間相關性的研究型儲存庫。