Automating Web Performance Testing with PhantomJS 2

Automating Web Performance Testing with PhantomJS 2

Given at DevNexus 2015

9d8e12bccfbfea63c86b38a2a27315cd?s=128

Wesley Hales

March 11, 2015
Tweet

Transcript

  1. Automating Web Performance Testing with PhantomJS 2 Wesley Hales Shape

    Security @wesleyhales
  2. Measuring Page Load Time @wesleyhales

  3. Date.now() || Date().getTime() • When was the page loaded? •

    Add an event listener • Get the current time • Profit • Example: Simple.html @wesleyhales
  4. However... • JavaScript time is notoriously inaccurate • It is

    skewed by adjustments to the system clock • it can’t provide any data regarding the server, network, and so on. • Example: all-old.html (add HRT) @wesleyhales
  5. DOMContentLoaded • document has been completely loaded and parsed. •

    stylesheets, images, and subframes have not finished loading @wesleyhales
  6. load || onload The load event is fired when a

    resource and its dependent resources have finished loading. @wesleyhales
  7. readyState • "loading" while the document is loading • "interactive"

    once it is finished parsing (but still loading sub-resources) • "complete" once it has loaded. @wesleyhales
  8. Basic loading and blocking Demo @wesleyhales

  9. Enter Navigation Timing API Navigation Timing is a JavaScript API

    for accurately measuring performance on the web. @wesleyhales
  10. HRT • The timestamps returned by Performance. now() are up

    to microsecond precision. • Example: perf.now.html
  11. @wesleyhales

  12. @wesleyhales

  13. window.performance simple-new.html Demo @wesleyhales

  14. PhantomJS 2 • Released January 2015 • Headless Web browser

    • Based on QTWebkit @wesleyhales
  15. PhantomJS 2 Feature Detect @wesleyhales

  16. Basic PhantomJS && http://phantomjs. org/examples/ Demo @wesleyhales

  17. @wesleyhales

  18. Loadreport.js (2012-2015) @wesleyhales

  19. Speedgun.js • Rewrite of loadreport.js • Leverages all implemented PhantomJS

    2 Navigation Timing APIs • (shims resource timing) @wesleyhales
  20. Speedgun.js @wesleyhales

  21. Speedgun.js Demo @wesleyhales

  22. Speedgun.io • Allows Speedgun.js to run as a service •

    Dockerized • New term… Synthetic RUM @wesleyhales
  23. Speedgun.io Demo @wesleyhales

  24. RUM Real user monitoring (RUM) is a passive monitoring technology

    that records all user interaction with a website or client interacting with a server or cloud-based application. @wesleyhales
  25. Synthetic RUM? • Use Speedgun.io as centralized server • All

    docker nodes send beacon with: ◦ Current container CPU and memory usage • Yes, another demo... @wesleyhales
  26. Thanks!! • speedgun.io (github) • Navigation Timing API • Navigation

    Timing 2 • Resource Timing API