好用的前端頁面性能檢測工具—sitespeed.io

引言

最近在做HTTP2技術相關調研，想確認一下HTTP2在什么情境下性能會比HTTP1.x有顯著提升，當我把http2的本地環境（nginx+PHP）部署完成后進行相關測試時，我遇到了以下問題：

（1）平時使用的都是在線分析工具，如google的PageSpeed Insights和GTmetrix，這些工具無法提供線下測試環境；

（2）自己通過chrome dev-tool的Perfomance進行分析，需要手動刷新，並手動記錄，需要大量的重復工作，尤其是要控制變量測試的情況；

（3）通過代碼打log，即通過performance.timing中記錄的TimeEvent時刻計算頁面性能指標，指標的完整性和圖形化展示仍需要工作量；

（4）能否在真機上測試，現在都是在PC上模擬。

於是就想着能否有一個工具能夠調起瀏覽器，利用瀏覽器debug面板中的各種數據（請求、事件等）為用戶提供頁面性能分析結果，最好能圖形化或表格展示。檢索了一下，發現了 sitespeed.io這個開源工具，基本符合我的預期，這里跟大伙分享一下這個工具。 

 sitespeed.io相關介紹

sitespeed.io的產出

介紹sitespeed.io之前，先看看sitespeed.io的產出。

安裝sitespeed.io之后，如果要分析一下百度PC首頁性能，執行以下命令：

 

sitespeed.io  -n 5 -v https://www.baidu.com

該命令將會在chrome瀏覽器下調起URL為https://www.baidu.com 5次，產出了一個分析文件夾，文件夾下載請戳這里：

 

打開index.html文件后，我們可以看到關於頁面性能的相關總結。

 

頁面性能總結

 

頁面相關意見

 

我們可以看到該工具圍繞：頁面性能（Performance）、Web最佳實踐（Web Best Practice）和可用性（Accessibility）三個核心指標進行打分，每個核心指標考核的內容可以在help.html文件中查找。頁面中的其他指標，如文件壓縮、文件大小、請求數、緩存時間、請求狀態碼、首次渲染時間、前端渲染用時、頁面加載用時、DNS解析時長等，這些指標都有詳細的統計，而且不同等級用相應的顏色表示，基本滿足我的訴求。

sitespeed.io的工作原理

sitespeed.io是一個開源工具，旨在檢測和提高web頁面的性能。它擁有一套插件，如Coach、Broswertime、Chrome-HAR等，幫助sitespeed搜集瀏覽器debug狀態下的數據，並基於網站最佳實踐給出相應的打分和意見，最后把數據可視化展示。

sitespeed.io評價網頁的主要依據是：瀏覽器的網絡請求和TimeLine中的Time Event。

Browsertime插件會使用Selenium NodeJS操控瀏覽器，讓瀏覽器加載指定的頁面，並執行配置的JS代碼，采集Timeline中各個Time Event觸發的時間數據，同時借助Chrome-HAR插件把頁面中HTTP請求過程存儲在.har文件中，為了便於分析，sitespeed.io利用PageXray插件將.har文件轉換成JSON文件；然后Coach插件根據相應的指標進行打分，並提出改進意見。總的來說，sitespeed.io的工作原理如下圖所示。

sitespeed.io工作原理圖

由於接觸sitespeed.io的時間比較短，目前積累比較少，這次僅做個簡單的分享，希望更多前端的小伙伴能夠接觸並使用該工具，寫出高性能的頁面。