Pro Yearly is on sale from $80 to $50! »

A Baseline for Web Performance with PhantomJS

A Baseline for Web Performance with PhantomJS

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

9d8e12bccfbfea63c86b38a2a27315cd?s=128

Wesley Hales

June 19, 2013
Tweet

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