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

    View full-size slide

  2. #UnleashYourAwesomeness
    Esprima

    View full-size slide

  3. This is a web perf meetup

    View full-size slide

  4. Delays under half a second
    impact business metrics
    http://radar.oreilly.com/2009/06/bing-and-google-agree-slow-pag.html @wesleyhales

    View full-size slide

  5. http://blog.kissmetrics.com/loading-time @wesleyhales

    View full-size slide

  6. http://blog.kissmetrics.com/loading-time @wesleyhales

    View full-size slide

  7. Front-End Ops
    @wesleyhales

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  10. http://www.youtube.com/watch?v=7HGe8zZ1G6k

    View full-size slide

  11. FEOps
    Measurement

    (measure twice optimize once - lots o’ variables)

    Create a dashboard
    @wesleyhales
    http://www.youtube.com/watch?v=7HGe8zZ1G6k

    View full-size slide

  12. Synthetic Monitoring

    View full-size slide

  13. Page Load Testing (Manual)
    • Dev Tools

    • Firebug (Net panel)

    • F12 Dev Tools

    • HTTPWatch

    • HAR Viewers

    • Charles/Proxies

    • Etc...
    @wesleyhales

    View full-size slide

  14. Page Load Testing (Automated)
    • WebDriver (Selenium)

    • HTMLUnit (Java)
    @wesleyhales

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  18. ...better analytics
    @wesleyhales

    View full-size slide

  19. Metrics must be
    measured consistently
    before and after each
    build.

    (especially when
    proving that you
    actually did something
    good)
    @wesleyhales

    View full-size slide

  20. After breaking
    jQuery out of the
    “1 http request”
    concatenation and
    far-future caching it,
    we greatly
    improved site
    performance
    @wesleyhales

    View full-size slide

  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

    View full-size slide

  22. CNN.com home page
    (per build analysis)
    @wesleyhales

    View full-size slide

  23. Getting Started
    @wesleyhales

    View full-size slide

  24. PhantomJS
    • Gives us access to

    • Cookie and Local Storage related APIs

    • SSL support

    • DOM readystate

    • Screen capture

    • HAR generation

    • A ton more...
    @wesleyhales

    View full-size slide

  25. Loadreport.js
    • Goals

    • Consistent measurements for baseline

    • Historical tracking

    • Understanding page load time
    @wesleyhales

    View full-size slide

  26. Loadreport.js
    • Demo

    • Basic Report

    • Filmstrip (*speed index)

    • Detailed charts

    • Service 

    (http://loadreport.wesleyhales.com)

    @wesleyhales

    View full-size slide

  27. The hard parts
    • Performance issues (on the front-end)
    require more thought

    • advertisers, document.write, too much
    concatenation
    @wesleyhales

    View full-size slide

  28. The hard parts
    • Server (browser) location

    • Will you be running tests on your LAN,
    Cloud (multiple instances), or elsewhere?
    @wesleyhales

    View full-size slide

  29. The hard parts
    • Browser types

    • DIY options are limited
    @wesleyhales

    View full-size slide

  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

    View full-size slide

  31. CI Setup
    @wesleyhales

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  34. http://bit.ly/Xp9G87
    @wesleyhales

    View full-size slide

  35. http://bit.ly/Xp9G87
    @wesleyhales

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  38. Thanks!
    @wesleyhales

    View full-size slide