A Baseline for Web Performance with PhantomJS

Given at Velocity 2013 Santa Clara and updated for SF Web Perf July 2014

Transcript

1. A Baseline for Web Performance with PhantomJS shapesecurity.com
2. #UnleashYourAwesomeness Esprima
3. This is a web perf meetup
4. Delays under half a second impact business metrics http://radar.oreilly.com/2009/06/bing-and-google-agree-slow-pag.html @wesleyhales
5. http://blog.kissmetrics.com/loading-time @wesleyhales
6. http://blog.kissmetrics.com/loading-time @wesleyhales
7. Front-End Ops @wesleyhales
8. “A front-end operations engineer would own external performance. They would be critical of new HTTP requests, and they would constantly be measuring file size and page-load time…” @wesleyhales
9. Front-End Ops • Constant eye on front-end performance • Manager of builds/dependencies (grunt, gulp, bower, (fixing browserify packages) etc..) • Expert on delivering content from server to browser. • Critical of new HTTP requests, file sizes @wesleyhales
10. http://www.youtube.com/watch?v=7HGe8zZ1G6k
11. FEOps Measurement (measure twice optimize once - lots o’ variables) Create a dashboard @wesleyhales http://www.youtube.com/watch?v=7HGe8zZ1G6k
12. Synthetic Monitoring
13. Page Load Testing (Manual) • Dev Tools • Firebug (Net panel) • F12 Dev Tools • HTTPWatch • HAR Viewers • Charles/Proxies • Etc... @wesleyhales
14. Page Load Testing (Automated) • WebDriver (Selenium) • HTMLUnit (Java) @wesleyhales
15. Page Load Testing (Services) • sitespeed.io • harstorage.com (MongoDB and Pylons) • harviewer (PHP + Javascript) • webpagetest.org (PHP) • pcapperf.appspot.com/ (Convert PCAP file to HAR format) @wesleyhales
16. Front-end performance basics • Caching (headers, localStorage, appcache) • When to gzip (don't gzip stuff that's natively compressed) • When to pull from CDN, local, or break apart (single HTTP reqs aren't always a win) @wesleyhales
17. Justifying Front End Perf • HARs are indispensable and are driven by a specification (currently 1.2), but you need more • Adding a front-end operations position to the team, or just getting time approved to work on front-end performance requires... @wesleyhales
18. ...better analytics @wesleyhales
19. Metrics must be measured consistently before and after each build. (especially when proving that you actually did something good) @wesleyhales
20. After breaking jQuery out of the “1 http request” concatenation and far-future caching it, we greatly improved site performance @wesleyhales
21. ! • think about millions of users/day • jQuery weight around 32 KB (minified and gzipped) • deployment every 2 weeks with new concatenated JS file for users to download @wesleyhales
22. CNN.com home page
    (per build analysis) @wesleyhales
23. Getting Started @wesleyhales
24. PhantomJS • Gives us access to • Cookie and Local Storage related APIs • SSL support • DOM readystate • Screen capture • HAR generation • A ton more... @wesleyhales
25. Loadreport.js • Goals • Consistent measurements for baseline • Historical tracking • Understanding page load time @wesleyhales
26. Loadreport.js • Demo • Basic Report • Filmstrip (*speed index) • Detailed charts • Service 
 (http://loadreport.wesleyhales.com) @wesleyhales
27. The hard parts • Performance issues (on the front-end) require more thought • advertisers, document.write, too much concatenation @wesleyhales
28. The hard parts • Server (browser) location • Will you be running tests on your LAN, Cloud (multiple instances), or elsewhere? @wesleyhales
29. The hard parts • Browser types • DIY options are limited @wesleyhales
30. The hard parts • CPU activity • Affects all tests. Need as few (or consistent) processes running - that won't cause a spike during test. @wesleyhales
31. CI Setup @wesleyhales
32. CI Setup From the enterprise side, we can run the scripts internally with no special setup. • Bamboo • Jenkins • Barebone Linux system without X11 is not a problem for PhantomJS. • Use Vagrant to create build and test servers on demand, with predictable server- and client-side resources @wesleyhales
33. TravisCI Demo From an opensource perspective, we can use Travis CI • github OAuth token • encryption with travis • pushing your site with an automated travisci build • http://bit.ly/14xDZMO @wesleyhales
34. http://bit.ly/Xp9G87 @wesleyhales
35. http://bit.ly/Xp9G87 @wesleyhales
36. What are we NOT accounting for? @wesleyhales Jank Invaders http://www.chromium.org/developers/testing/ frame-rate-test http://www.westardisplaytechnologies.com/products/ motion-blur-measurement-kit-motionmaster/ http://www.testufo.com/#test=framerates-text
37. Summary • For simplicity, use phantomJS and build a script that works for you. • For more advanced, host your own instance of webpagetest.org @wesleyhales
38. Thanks! @wesleyhales