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 the 2015 University of Illinois Web Conference

The performance of your web app is obviously important. But how do you know your web app is performing well for all of your users? Out of the box tools provide us metrics, but most only provide an overall view. This case study of building the XFINITY X1 single-page web app will demonstrate what frontend performance data should you be gathering, how to gather it, and how to make sense of all that data. In this talk, we'll walk through the parts of the W3C Navigation Timing, High Resolution Time & User Timing recommendations that you can take advantage of right now to collect important metrics. We'll determine the "types" of users you need to focus on to understand YOUR web app, as well as what other factors could impact those individual users' experience. And we'll make sure "Average Response Time" is never the primary focus of your metrics dashboard.

Includes demos of Surf-N-Perf: https://github.com/Comcast/Surf-N-Perf

2458f258a8e56cb20554bef1997cc65b?s=128

John Riviello

April 30, 2015
Tweet

Transcript

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

    @JohnRiv Distinguished Engineer, Comcast Interactive Media University of Illinois Web Conference – April 30, 2015
  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 https://github.com/macbre/phantomas https://github.com/gmetais/grunt-devperf John Riviello

    – The Truth Behind Your Web App’s Performance 11
  12. None
  13. "RUM" by Tom B is licensed under CC BY-NC-SA 2.0

  14. Real User Monitoring "yes, that's a rum filled coconut." by

    Brandon King is licensed under CC BY-NC 2.0 / Color adjusted from original
  15. Frontend Performance Data – Existing Tools https://www.pingdom.com/ John Riviello –

    The Truth Behind Your Web App’s Performance 15
  16. https://www.pingdom.com/rum/

  17. https://www.pingdom.com/rum/

  18. Frontend Performance Data – Existing Tools http://newrelic.com/ John Riviello –

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

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

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

  22. https://docs.newrelic.com/docs/browser/new-relic-browser/browser-agent-apis/manually-reporting-page-load-timing-data

  23. Frontend Performance Data – Existing Tools https://ruxit.com/ John Riviello –

    The Truth Behind Your Web App’s Performance 23
  24. https://ruxit.com/features/real-user-monitoring.html

  25. https://ruxit.com/features/real-user-monitoring.html

  26. Frontend Performance Data – Existing Tools http://www.appdynamics.com/ John Riviello –

    The Truth Behind Your Web App’s Performance 26
  27. http://www.appdynamics.com/product/browser-real-user-monitoring/

  28. None
  29. http://www.appdynamics.com/product/browser-real-user-monitoring/

  30. http://www.appdynamics.com/product/browser-real-user-monitoring/

  31. Frontend Performance Data – Existing Tools http://www.akamai.com/ John Riviello –

    The Truth Behind Your Web App’s Performance 31
  32. http://www.akamai.com/html/resources/real-user-monitoring.html

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

    Gathering the Data 4. Analyzing the Data
  34. Real User Monitoring "yes, that's a rum filled coconut." by

    Brandon King is licensed under CC BY-NC 2.0 / Color adjusted from original
  35. None
  36. None
  37. Illustration from http://www.w3.org/TR/navigation-timing/#processing-model John Riviello – The Truth Behind Your

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

    Web App’s Performance 38
  39. None
  40. John Riviello – The Truth Behind Your Web App’s Performance

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

    41
  42. Frontend Performance Data – The Data You Care About John

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

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

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

    Performance 45 “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…”
  46. Consider what other unique factors in your app may impact

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

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

    48
  49. Frontend Performance Data – Gathering the Data Marking Timestamps John

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

    Time John Riviello – The Truth Behind Your Web App’s Performance 51 • 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)
  52. Frontend Performance Data – Gathering the Data W3C High Resolution

    Time – Sub-ms Example John Riviello – The Truth Behind Your Web App’s Performance 52 >  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  
  53. Frontend Performance Data – Gathering the Data W3C High Resolution

    Time – Monotonic Clock John Riviello – The Truth Behind Your Web App’s Performance 53 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
  54. John Riviello – The Truth Behind Your Web App’s Performance

    54
  55. John Riviello – The Truth Behind Your Web App’s Performance

    55
  56. None
  57. None
  58. Browser Support

  59. None
  60. None
  61. None
  62. John Riviello – The Truth Behind Your Web App’s Performance

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

    63
  64. https://github.com/Comcast/Surf-N-Perf

  65. User Timing vs. Surf-N-Perf "Hurricane Earl's Waves" by John Riviello

    is licensed under CC BY-NC-SA 2.0 / Color adjusted from original
  66. Frontend Performance Data – Gathering the Data with Surf-N-Perf Setting

    & Getting a Mark John Riviello – The Truth Behind Your Web App’s Performance 66 //  User  Timing  API   >  window.performance.mark('foo');   >  window.performance.getEntriesByName('foo');      [PerformanceMark                                ]          duration:  0          entryType:  "mark"          name:  "foo"          startTime:  3323.620999988634   >  window.performance.getEntriesByName('foo')[0].startTime;      3323.620999988634     //  Surf-­‐N-­‐Perf   >  surfnperf.mark('foo');   >  surfnperf.getMark('foo');      3323.620999988634  
  67. Frontend Performance Data – Gathering the Data with Surf-N-Perf Navigation

    Timing Mark & User Mark Duration John Riviello – The Truth Behind Your Web App’s Performance 67 //  User  Timing  API   >  window.performance.mark('foo');   >  window.performance.measure('page_load_to_foo',  'loadEventEnd',  'foo');   >  window.performance.getEntriesByName('page_load_to_foo');      [PerformanceMeasure                          ]          duration:  3201.620999988634          entryType:  "measure"          name:  "page_load_to_foo"          startTime:  122   >  window.performance.getEntriesByName('page_load_to_foo')[0].duration;      3201.620999988634     //  Surf-­‐N-­‐Perf   >  surfnperf.mark('foo');   >  surfnperf.duration('loadEventEnd','foo');      3202   >  surfnperf.duration('loadEventEnd','foo',{decimalPlaces:3});      3201.621  
  68. Frontend Performance Data – Gathering the Data with Surf-N-Perf Event

    Duration (i.e. 2 User Marks) John Riviello – The Truth Behind Your Web App’s Performance 68 //  User  Timing  API   >  window.performance.mark('barStart');   >  window.performance.mark('barEnd');   >  window.performance.measure('barEvent',  'barStart',  'barEnd');   >  window.performance.getEntriesByName(’barEvent')[0].duration;      3512.499000004027     //  Surf-­‐N-­‐Perf   >  surfnperf.eventStart('bar');   >  surfnperf.eventEnd('bar');   >  surfnperf.eventDuration('bar');      3512   >  surfnperf.eventDuration('bar',{decimalPlaces:12});      3512.499000004027  
  69. Frontend Performance Data – Gathering the Data with Surf-N-Perf Custom

    Event Data John Riviello – The Truth Behind Your Web App’s Performance 69 //  Surf-­‐N-­‐Perf   >  surfnperf.eventStart('bar');   //  surfnperf.eventEnd(KEY,  CUSTOM_DATA_OBJECT);   >  surfnperf.eventEnd('bar',  {baz:'qux'});   >  surfnperf.getEventData('bar',  'baz');      "qux"  
  70. Frontend Performance Data – Gathering the Data with Surf-N-Perf Tying

    It Together with Backbone.fetch() John Riviello – The Truth Behind Your Web App’s Performance 70 //  Surf-­‐N-­‐Perf   >  var  collection  =  new  Backbone.Collection();      collection.url  =  '/get-­‐data/';        surfnperf.eventStart('getData');      collection.fetch({          success:  function(collection)  {              surfnperf.eventEnd('getData',  {status:'success',  items:  collection.length});          },          error:  function()  {              surfnperf.eventEnd('getData',  {status:'error'});          },      });     >  surfnperf.eventDuration('getData',  {decimalPlaces:2});      1464.75   >  surfnperf.getEventData('getData',  'status');      "success"   >  surfnperf.getEventData('getData',  'items');      33  
  71. Frontend Performance Data – Gathering the Data with Surf-N-Perf Custom

    Data (not tied to an event) John Riviello – The Truth Behind Your Web App’s Performance 71 //  Surf-­‐N-­‐Perf   >  surfnperf.setCustom('initialUrl',  window.location.pathname);   >  surfnperf.getCustom('initialUrl');      "https://xtv.comcast.net/recent"  
  72. Frontend Performance Data – Gathering the Data with Surf-N-Perf Common

    Navigation Timing Measurements John Riviello – The Truth Behind Your Web App’s Performance 72 //  Surf-­‐N-­‐Perf    
  73. Frontend Performance Data – Gathering the Data with Surf-N-Perf Common

    Navigation Timing Measurements John Riviello – The Truth Behind Your Web App’s Performance 73 >  surfnperf.getNetworkTime();  //  fetchStart  to  connectEnd    
  74. Frontend Performance Data – Gathering the Data with Surf-N-Perf Common

    Navigation Timing Measurements John Riviello – The Truth Behind Your Web App’s Performance 74 >  surfnperf.getServerTime();  //  requestStart  to  responseEnd    
  75. Frontend Performance Data – Gathering the Data with Surf-N-Perf Common

    Navigation Timing Measurements John Riviello – The Truth Behind Your Web App’s Performance 75 >  surfnperf.getNetworkLatency();  //  fetchStart  to  responseEnd    
  76. Frontend Performance Data – Gathering the Data with Surf-N-Perf Common

    Navigation Timing Measurements John Riviello – The Truth Behind Your Web App’s Performance 76 >  surfnperf.getProcessingLoadTime();  //  responseEnd  to  loadEventEnd      
  77. Frontend Performance Data – Gathering the Data with Surf-N-Perf Common

    Navigation Timing Measurements John Riviello – The Truth Behind Your Web App’s Performance 77 >  surfnperf.getFullRequestLoadTime();  //  navigationStart  to  loadEventEnd    
  78. Frontend Performance Data – Gathering the Data with Surf-N-Perf Common

    Navigation Timing Measurements John Riviello – The Truth Behind Your Web App’s Performance 78 Important: If you want to use these methods as soon as the page load event fires, you'll have to wrap that in a setTimeout call so that the load event can fire first:   //  Example  using  jQuery  &  Surf-­‐N-­‐Perf   >  $(window).load(function()  {          setTimeout(function()  {              console.log(                  'Network  Time:',  surfnperf.getNetworkTime(),                  'Server  Time:',  surfnperf.getServerTime(),                  'Network  Latency:',  surfnperf.getNetworkLatency(),                  'Processing:',  surfnperf.getProcessingLoadTime(),                  'Full  Request:',  surfnperf.getFullRequestLoadTime()              );          },  0);      });      Network  Time:  1  Server  Time:  215  Network  Latency:  216        Processing:  2399  Full  Request:  2615        
  79. 1. Existing Tools 2. The Data You Care About 3.

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

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

  82. 99th PERCENTILE (at a minimum)

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

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

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

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

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

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

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

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

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

    The Truth Behind Your Web App’s Performance 91
  92. Recap

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

    Behind Your Web App’s Performance 93 • Performance is a feature! • Measure first—at the 99th percentile • Leverage W3C Performance APIs • Log network latency, browser processing time, and the full webpage request & response • Log major app-specific events with details For Further Info & Feedback: Twitter: @JohnRiv GitHub: https://github.com/Comcast/Surf-N-Perf SpeakerRate: http://spkr8.com/t/56491