Web性能優化系列(1):Web性能優化分析

如果你的網站在1000ms內加載完成,那麼會有平均一個用戶停留下來。2014年,平均網頁的大小是1.9MB。看下圖瞭解更多統計信息。

網站的核心內容需要在1000ms內呈現出來。如果失敗瞭,用戶將永遠不會再訪問你的網站。通過降低頁面加載的時間,很多著名公司的收入和下載量有顯著的提升。比如

  • Walmart 每降低100ms的加載時間, 他們的收入就提高1%;
  • Yahoo 每降低400ms的加載時間,他們的訪問量就提升9%。
  • Mozilla 將他們的頁面速度提升瞭2.2秒,每年多獲得瞭1.6億firefox的下載量。

網站優化的步驟

  1. 設定性能預算。
  2. 測試當前的性能。
  3. 找出導致性能問題的地方。
  4. 最後,duang,使用優化特技。

下面有幾種方法可以提升你的頁面性能,讓我們來看看

速度指標

速度指標是指頁面的可視部分被呈現在瀏覽器中的平均速度。表示為毫秒的形式,並且取決於viewport的大小。請看下圖(用視頻幀的形式展現頁面加載時間,以秒為單位)。

速度指標越低越好。

速度指標可以通過Webpagetest來測試(由Google維護)

長話短說

Webpage test 有很多特性,比如在不同的地方用不同的瀏覽器跑多個測試。 還可以測算其他的數據比如加載時間,dom元素的數量,首字節時間等等

例如:查看amazon在webpagetest上的測試結果。

可以看看這個視頻(https:///watch?v=euVYHee1f1M),瞭解由 Patrick Meenan 講解的關於webpagetest的更多信息(需要翻墻)。

渲染阻塞

如果你知道瀏覽器如何運行,那麼你應該知道HTML, CSS, JS是怎麼被瀏覽器解析的以及其中哪個阻塞瞭頁面的渲染。如果你不知道,請看下圖。

點擊how a browser works瞭解更多瀏覽器工作原理(作者為Tali Garsiel 和Paul Irish).

瀏覽器渲染的步驟

  1. 首先瀏覽器解析HTML標記去構造DOM樹(DOM = Document Object Model 文檔對象模型)
  2. 然後解析CSS去構造CSSOM樹( CSSOM = CSS Object Model CSS對象模型)
  3. 在將DOM和CSSOM樹結合成渲染樹之前,JS文件被解析和執行。

現在你知道瀏覽器如何進行解析瞭,讓我們看看是哪一部分阻塞瞭渲染樹的生成。

1. 阻塞渲染的CSS

有人認為CSS阻塞瞭渲染。在構造CSSOM時,所有的CSS都會被下載,無論它們是否在當前頁面中被使用。

為瞭解決這個渲染阻塞,跟著下面的兩個步驟做

  1. 將關鍵CSS內嵌入頁面中,即將最重要的(首次加載時可見的部分頁面所使用到的)style寫入head中的 <style></style>裡。
  2. 移除沒用到的CSS。

那麼我是如何找出沒用到的CSS的呢。

  1. 使用Pagespeed Insight去得到像未使用的CSS,阻塞渲染的CSS和JS文件等等的統計數據。例如:Flipkart的Pagespeed Insight統計結果。
  2. 使用Gulp任務,如gulp-uncss或是使用Grunt 任務,如grunt-uncss。如果你不知道他們是什麼,請閱讀我之前的文章。

##專業小貼士

  1. 使用CSS Stats保證頁面中完全沒有未被用到的元素,唯一的樣式和字體等等。
  2. Pagespeed Insight Chrome 插件.
  3. Tag Counter Chrome 插件.