如果你的網站在1000ms內加載完成,那麼會有平均一個用戶停留下來。2014年,平均網頁的大小是1.9MB。看下圖瞭解更多統計信息。
網站的核心內容需要在1000ms內呈現出來。如果失敗瞭,用戶將永遠不會再訪問你的網站。通過降低頁面加載的時間,很多著名公司的收入和下載量有顯著的提升。比如
- Walmart 每降低100ms的加載時間, 他們的收入就提高1%;
- Yahoo 每降低400ms的加載時間,他們的訪問量就提升9%。
- Mozilla 將他們的頁面速度提升瞭2.2秒,每年多獲得瞭1.6億firefox的下載量。
網站優化的步驟
- 設定性能預算。
- 測試當前的性能。
- 找出導致性能問題的地方。
- 最後,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).
瀏覽器渲染的步驟
- 首先瀏覽器解析HTML標記去構造DOM樹(DOM = Document Object Model 文檔對象模型)
- 然後解析CSS去構造CSSOM樹( CSSOM = CSS Object Model CSS對象模型)
- 在將DOM和CSSOM樹結合成渲染樹之前,JS文件被解析和執行。
現在你知道瀏覽器如何進行解析瞭,讓我們看看是哪一部分阻塞瞭渲染樹的生成。
1. 阻塞渲染的CSS
有人認為CSS阻塞瞭渲染。在構造CSSOM時,所有的CSS都會被下載,無論它們是否在當前頁面中被使用。
為瞭解決這個渲染阻塞,跟著下面的兩個步驟做
- 將關鍵CSS內嵌入頁面中,即將最重要的(首次加載時可見的部分頁面所使用到的)style寫入head中的 <style></style>裡。
- 移除沒用到的CSS。
那麼我是如何找出沒用到的CSS的呢。
- 使用Pagespeed Insight去得到像未使用的CSS,阻塞渲染的CSS和JS文件等等的統計數據。例如:Flipkart的Pagespeed Insight統計結果。
- 使用Gulp任務,如gulp-uncss或是使用Grunt 任務,如grunt-uncss。如果你不知道他們是什麼,請閱讀我之前的文章。
##專業小貼士
- 使用CSS Stats保證頁面中完全沒有未被用到的元素,唯一的樣式和字體等等。
- Pagespeed Insight Chrome 插件.
- Tag Counter Chrome 插件.