Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Wesley Hales

June 19, 2013
Tweet

More Decks by Wesley Hales

Other Decks in Technology

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