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

The Truth About Your Web App's Performance

The Truth About Your Web App's Performance

From JSConf US 2014, where I announced the release of Surf-N-Perf, our micro-library for gathering web page performance data (https://github.com/Comcast/Surf-N-Perf)

Video Available at http://youtu.be/0dBU6leL0Og

2458f258a8e56cb20554bef1997cc65b?s=128

John Riviello

May 28, 2014
Tweet

Transcript

  1. The Truth About Your
 Web App’s Performance John Riviello -

    @JohnRiv JSConf - May 28, 2014
  2. John Riviello – The Truth Behind Your Web App’s Performance

    2
  3. Frontend Performance Data 1.  What do existing tools provide? 2. 

    What data do you care about? 3.  How do you gather that data? 4.  What do you do with the data? John Riviello – The Truth Behind Your Web App’s Performance 3
  4. 1. Existing Tools 2. The Data You Care About 3.

    Gathering the Data 4. Analyzing the Data
  5. Frontend Performance Data – Existing Tools WebPagetest.org John Riviello –

    The Truth Behind Your Web App’s Performance 5
  6. None
  7. None
  8. None
  9. None
  10. None
  11. Frontend Performance Data – Existing Tools http://macbre.github.io/phantomas/ https://github.com/gmetais/grunt-devperf John Riviello

    – The Truth Behind Your Web App’s Performance 11
  12. None
  13. "RUM" (https://www.flickr.com/photos/tom-b/1330310701/) by Tom B (https://www.flickr.com/photos/tom-b/) is licensed under CC

    BY-NC-SA 2.0 (https://creativecommons.org/licenses/by-nc-sa/2.0/)
  14. Real User Monitoring "yes, that's a rum filled coconut." (https://www.flickr.com/photos/bking/346334125)

    by Brandon King (https://www.flickr.com/photos/bking/) is licensed under CC BY-NC 2.0 (https://creativecommons.org/licenses/by-nc/2.0/) / Color adjusted from original
  15. Frontend Performance Data – Existing Tools http://newrelic.com/ John Riviello –

    The Truth Behind Your Web App’s Performance 15
  16. http://docs.newrelic.com/docs/new-relic-browser/page-load-timing-process

  17. http://blog.newrelic.com/2014/03/13/javascript-error-reporting-ajax-timing-new-relic/

  18. http://docs.newrelic.com/docs/new-relic-browser/ajax-dashboard

  19. http://docs.newrelic.com/docs/new-relic-browser/manually-reporting-page-load-timing-data

  20. 1. Existing Tools 2. The Data You Care About 3.

    Gathering the Data 4. Analyzing the Data
  21. Real User Monitoring "yes, that's a rum filled coconut." (https://www.flickr.com/photos/bking/346334125)

    by Brandon King (https://www.flickr.com/photos/bking/) is licensed under CC BY-NC 2.0 (https://creativecommons.org/licenses/by-nc/2.0/) / Color adjusted from original
  22. None
  23. None
  24. Illustration from http://www.w3.org/TR/navigation-timing/#processing-model John Riviello – The Truth Behind Your

    Web App’s Performance 24
  25. Illustration from http://www.w3.org/TR/navigation-timing/#processing-model John Riviello – The Truth Behind Your

    Web App’s Performance 25
  26. None
  27. John Riviello – The Truth Behind Your Web App’s Performance

    27
  28. John Riviello – The Truth Behind Your Web App’s Performance

    28
  29. Frontend Performance Data – The Data You Care About John

    Riviello – The Truth Behind Your Web App’s Performance 29
  30. Frontend Performance Data – The Data You Care About Example

    Factors That Impact Performance: John Riviello – The Truth Behind Your Web App’s Performance 30 •  User authentication state • “Type” of user •  Number of “items” returned •  SWF dependency
  31. John Riviello – The Truth Behind Your Web App’s Performance

    31
  32. http://mashable.com/2014/01/31/gmail-slow/ John Riviello – The Truth Behind Your Web App’s

    Performance 32 “Gmail’s People Widget appears to be the cause of the sluggishness, which is, only affecting Gmail on the web Google says… This is noticeable when users open an email conversation with a large number of participants…”
  33. Consider what other unique factors in your app may impact

    performance
  34. 1. Existing Tools 2. The Data You Care About 3.

    Gathering the Data 4. Analyzing the Data
  35. John Riviello – The Truth Behind Your Web App’s Performance

    35
  36. Frontend Performance Data – Gathering the Data Marking Timestamps John

    Riviello – The Truth Behind Your Web App’s Performance 36 Back in the day: >  new  Date().getTime();        1399754123456   ECMAScript 5.1: >  Date.now();        1399754123456   Most modern browsers have a better option…      
  37. None
  38. Frontend Performance Data – Gathering the Data W3C High Resolution

    Time John Riviello – The Truth Behind Your Web App’s Performance 38 • DOMHighResTimeStamp is available via window.performance.now() • Provides the time with sub-millisecond accuracy • Measured relative to the navigationStart attribute of the PerformanceTiming interface • Not subject to system clock skew or adjustments (uses a monotonically increasing clock)
  39. Frontend Performance Data – Gathering the Data W3C High Resolution

    Time – Sub-ms Example John Riviello – The Truth Behind Your Web App’s Performance 39 >  var  dateTest  =  function()  {              var  start  =  Date.now(),                      area  =  window.innerWidth*window.innerHeight;              return  Date.now()  -­‐  start;      };      dateTest();      0     >  var  highResTest  =  function()  {              var  start  =  window.performance.now(),                      area  =  window.innerWidth*window.innerHeight;              return  window.performance.now()  -­‐  start;      };      highResTest();      0.01200000406242907  
  40. Frontend Performance Data – Gathering the Data W3C High Resolution

    Time – Monotonic Clock John Riviello – The Truth Behind Your Web App’s Performance 40 Why do we care? “Most systems run a daemon which regularly synchronizes the time. It is common for the clock to be tweaked a few milliseconds every 15-20 minutes. At that rate about 1% of 10 second intervals measured would be inaccurate.” Source: Tony Gentilcore http://gent.ilcore.com/2012/06/better-timer-for-javascript.html
  41. John Riviello – The Truth Behind Your Web App’s Performance

    41
  42. John Riviello – The Truth Behind Your Web App’s Performance

    42
  43. None
  44. None
  45. Browser Support

  46. None
  47. None
  48. None
  49. John Riviello – The Truth Behind Your Web App’s Performance

    49
  50. John Riviello – The Truth Behind Your Web App’s Performance

    50
  51. https://github.com/Comcast/Surf-N-Perf

  52. 1. Existing Tools 2. The Data You Care About 3.

    Gathering the Data 4. Analyzing the Data
  53. Frontend Performance Data – Analyzing The Data John Riviello –

    The Truth Behind Your Web App’s Performance 53
  54. Average Response Times are for Average Products

  55. 99th PERCENTILE (at a minimum)

  56. Frontend Performance Data – Analyzing The Data John Riviello –

    The Truth Behind Your Web App’s Performance 56
  57. Frontend Performance Data – Analyzing The Data John Riviello –

    The Truth Behind Your Web App’s Performance 57
  58. Frontend Performance Data – Analyzing The Data John Riviello –

    The Truth Behind Your Web App’s Performance 58
  59. Frontend Performance Data – Analyzing The Data John Riviello –

    The Truth Behind Your Web App’s Performance 59
  60. Frontend Performance Data – Analyzing The Data John Riviello –

    The Truth Behind Your Web App’s Performance 60
  61. Frontend Performance Data – Analyzing The Data John Riviello –

    The Truth Behind Your Web App’s Performance 61
  62. Frontend Performance Data – Analyzing The Data John Riviello –

    The Truth Behind Your Web App’s Performance 62
  63. Frontend Performance Data – Analyzing The Data John Riviello –

    The Truth Behind Your Web App’s Performance 63
  64. Frontend Performance Data – Analyzing The Data John Riviello –

    The Truth Behind Your Web App’s Performance 64
  65. Recap

  66. Frontend Performance Data – Recap John Riviello – The Truth

    Behind Your Web App’s Performance 66 • Measure first—at the 99th percentile • Log Network Latency, Processing Time, and Full Webpage Request • Log major app-specific events with details • Leverage W3C Performance APIs For Further Info: Twitter: @JohnRiv GitHub: https://github.com/Comcast/Surf-N-Perf