我從4年網頁監控中所學到的

英文原文：What I’ve learned From Monitoring Four Years of Web Page Bloat

每半年我會看一看一些來自于 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 寫了一篇極好的博客文章，在文中他犀利地點破了為什么如果你只關注頁面重量的話，就會犯錯。他這樣寫道：

秘密就在于“頁面重量”——頁面重量被廣泛地定義為一個頁面的總文件大小以及它所有的子資源（圖片，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 統計，一個顯示性能和業務成功之間相關性的研究型存儲庫。

-

譯文鏈接：http://www.codeceo.com/article/monitor-4-years-web-page.html

翻譯作者：碼農網 – 小峰

來自: www.codeceo.com