Intro Web Performance Services

Transcript

1. Afu Tseng (曾坤福) PIXNET 技術研發部前端組 Intro Web Performance Services 未命名會議室 No.1∘2016.01.29
2. Outline • webpagetest.org • perfwars.com • Yellow Lab.tools • Big Rig
3. webpagetest.org ⽼牌的網⾴效能測試服務
4. webpagetest.org • 2008 年 1 ⽉成⽴ • 作者 Patrick Meenan 在 2010年加⼊ Chrome 團隊 • 提供全球多處地區測試 • 可以錄製 Dev Tools Timeline • 可以模擬特定網域單點故障情形 (SPOF Testing) • 可以錄製影格分鏡 (Filmstrip View) • 歐萊禮有出書 「Using WebPageTest」
5. webpagetest.org
6. 測試前置作業 - 進階設定 Ө֨෼ڸ
7. 測試結果瀑布圖 Ө֨෼ڸ
8. 影格分鏡 (Filmstrip View)
9. 深⼊閱讀... ! ! ! ! ! ! ! ! 1BUSJDL
   .FFOBO
   !
   0`SFJMMZ
   7FMPDJUZ
   DPOG
    IUUQXXXTMJEFTIBSFOFUQBUSJDLNFFOBOXFCQBHFUFTUQPXFSVTFSTWFMPDJUZ
10. perfwars.com 效能擂台賽
11. perfwars.com • 可快速的概覽常⾒的調校項⺫ • 沒有設定瀏覽器快取 • 沒有做 GZIP 傳輸壓縮 • CSS / JS 沒有做最⼩化 • 圖⽚未最佳化 • HTTP/2 偵測
12. perfwars.com
13. perfwars.com
14. perfwars.com
15. perfwars.com
16. perfwars.com
17. Yellow Lab Tools
18. Yellow Lab Tools • https://github.com/gmetais/YellowLabTools/ • 有開源，可以⾃⾏架設 (Node.js) • 線上版本：http://yellowlab.tools • 分數⽐ Page Speed Insights 還嚴格 XD
19. 實測⼿機版⽂章內⾴ dT
    NT
20. Score details dT
    NT
21. Score details dT
    NT
22. 重複 DOM 查詢過多 dT
    NT
23. JavaScript Timeline / Profiler dT
    NT
24. Big Rig Chrome trace 分析⼯具 ! GoogleChrome/big-rig 1BVM
    -FXJT ෆੋ
    (PPHMF
    ׭ํሢҊ
25. 由於 dashboard web app 
 安裝較為繁瑣
 所以只介紹 CLI 版本 …
26. Node Big Rig • https://github.com/GoogleChrome/node- big-rig • $ sudo npm install -g bigrig • bigrig --file /path/to/trace.json --pretty-print
27. trace 從何取得? (1) • Chrome DevTools 的 Timeline 錄製
28. 把 Chrome trace 餵給 bigrig • $ bigrig --file ~/Desktop/TimelineRawData-admin-blog- mobile-post-2-20160129T005241 --pretty-print
29. EPN$POUFOU-PBEFE
    ෆ४
    CVH (PPHMF
    "E4FOTF
    ੋᏈೳࡴख೭Ұ շ଎ಘ஌
    GPSDF
    3FDBMD
    
    
 -BZPVU
    ࣍Ꮠ (5.
    ໵ෆᬀଟᩋ
30. trace 從何取得? (2)
 WebPageTest.org
31. 從測試結果 Waterfall 旁下載 Timeline
32. ૬ಉ໢ᅿࡏඒᅳ஍ეଌࢼᏓຫڐଟ BKBYHPPHMFBQJTDPN
    ໵؇ຫࢸ
    dT "E4FOTF
    ߋຫྃ
33. 總結 • 效能調校的⼯具服務眾多，各有千秋，多嘗試 搭配運⽤讓網站效能不再持續衰退！
34. References • Perf.Rocks - Tools, http://perf.rocks/tools/ • http://www.webpagetest.org/ • http://perfwars.com • https://github.com/GoogleChrome/node-big-rig • http://yellowlab.tools/ • Using WebPageTest, O’reilly, http://shop.oreilly.com/product/0636920033592.do
35. Q & A @afutseng