本文轉自：http://www.webryan.net/2013/01/use-webpagetest-to-analyze-web-performance/
無論是從Velocity 2012還是在web技術沙龍，亦或前端同學的學習月報里，相信大家對PageSpeed的概念和原理都有了一定的了解。那么下一步我們要做的就是，將PageSeed分析方法應用到我們日常的發布中去。包括兩部分：
1、發布系統上，提測之后，性能報告自動輸出（主要針對內網環境，未發布）
2、日常性能回歸檢查（主要針對外網環境，已發布）
這里henry就不賣關子了，直接給出結論：通過WebPageTest可以滿足我們需求。
下面是得到這個結論的嘗試和WebPageTest的實踐。
1、什么 PageSpeed Insignts？
PageSpeed(https://developers.google.com /speed/pagespeed/)目的是讓開發者可以發現網站的性能問題並針對其規則進行優化。故其在google的”Make the web faster”項目下，並分為”分析”和”優化”兩部分。分析部分則名為 PageSpeed Insights。PageSpeed Insights包括
a、PageSpeed Insights在線工具，即可以通過在線提交URL的方式得到PageSpeed結果，問題是依賴google服務，且無法測試內網邏輯。
b、PageSpeed Insights API，即通過注冊google開發者，調用google的PageSpeed Insights API來實現站點結果的輸出。這個API Server是在牆外的，對國內用戶非常不靠譜。且同樣無法解決測試內網應用的問題。
c、PageSpeed瀏覽器插件（browser extensions）支持chrome和firefox，這個插件是開源的（開源地址：http://code.google.com/p/page-speed/）。這個是不依賴於外界服務，僅依賴於瀏覽器的，可以使用本地hosts甚至fiddler。所以PageSpeed瀏覽器插件是我們可以選擇的一個方案，但邏輯較復雜。其成本主要是要開發基於客戶端的C++邏輯。這里因為環境原因及tommy排期原因暫未嘗試，有興趣的同學可以試一下並知會henry。
2、什么是HTTP Archive?
上上次前端例會的時候給大家分享了這個站點（http://httparchive.org） ,其強大的功能給我們web性能監控帶來了新的啟示。以下是對QQ.com做的一次性能檢查：
亮點一、時段截圖
亮點二、瀑布流
亮點三、統計分析
亮點四、pagespeed建議
我們要做的性能檢測自動化工具最好應該具備以上四種特征。
httparchive也是Steve souders一手創建的站點，目前是開源狀態，大家可以在其官網上下載到httparchive的完整代碼和數據（http://httparchive.org/downloads.php）。
但問題來了，我們是否可以使用httparchive來幫我們做一些事情呢，實現內網私有測試呢？
答 案是No。因為Steve souders同學在httparchive項目里表示，httparchive的使命是用來記錄互聯網上站點的性能情況和趨勢。你可以提供公共的個人站 點URL，httparchive來幫你做檢測但httparchive不提供私有方式的性能檢測。那么我們就沒有辦法了么？也不是。Steve Souders同學給我們留下了一個很重要的線索” It’s built on the shoulders of Pat Meenan’s WebPagetest system.”HTTP Archive是基於WebPageTest構建的！
3、什么是WebPageTest?
WebPageTest（http://www.webpagetest.org /）是google 開源項目”make the web faster “的子項目(“make the web faster包括page speed,spdy,tcpm等等”)，它本來是AOL內部使用的工具，后來在2008年基於BSD開源。
OK，到這里我們很幸運的發現WebPageTest是一個開源項目，我們可以使用其做我們在文章最開始提到的兩個事情。
其 系統實現類似於google Test Driver，通過開啟Server和掛載瀏覽器Agent來實現的。具體原理如下:(https://sites.google.com/a /webpagetest.org/docs/system-design/overview)
OK，了解到這里，果斷去下載安裝嘗試，https://sites.google.com/a/webpagetest.org 這里有完整的說明這里不贅述，直接給出結果。
4、使用WebPageTest構建內網性能測試自動化服務
首 先，在本機啟動了Web Server。這里簡單起見，本地啟動的wamp server（沒有使用apmserv的原因是，apmserv目前的版本里php的版本比較低，張宴正在研發最新的版本，預計2013年2月才能出 爐），配置域名webtest.com到127.0.0.1。
然后，將webtest.com的虛擬目錄指向到webpagetest的www目錄即可。這個時候webtest.com已經可以訪問。
但會發現各個選項均是空的，並不能啟動測試，這個是因為我們並沒有接入agent也沒有配置agent接入的方式。
這個時候我們可以訪問http://webtest.com/install目錄來確定環境問題。
環境確保都是OK的（缺什么就補什么：）），然后會在”Test Locations”看到沒有test agent的提示。這個時候就按照步驟去安裝test agent即可。這里有幾個注意事項。
1、test agent安裝需要給網卡安裝一個監控包。
2、Test agent安裝的屏幕監控工具時不能啟動任何截屏工具，同時在test agent啟動的時候其他截屏工具也是會失效的。
3、一定要記得配置wptdriver.ini和locations.ini兩個文件，其他的可以暫時使用sample配置。
4、【IE】【chrome、firefox】【safari】是三組不同的測試配置，chrome和firefox可以公用一個agent但是IE不可以。
ok，掛在了2個agent~~ 如圖：
此時在訪問webtest.com就有了不一樣的表現了，出現了Test Location和Browser選項。
這個時候輸入我們內網配置的webtest.com地址看看，大概等10秒左右就可以看到結果了。
僅 列舉一部分，包括我們想要的所有數據。這個時候流程已經跑通了。剩下要做的就是一件事情了：和測試同學落實部署事宜，同時和發布、測試系統結合，支持內網 測試和外網日常運營監控。把webpagetest變成我們性能測試的標配，如同badJS一樣每天生成一份郵件報表。