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

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

John Riviello

April 30, 2015
Tweet

More Decks by John Riviello

Other Decks in Programming

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

    View Slide

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

    View Slide

  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

    View Slide

  4. 1. Existing Tools
    2. The Data You Care About
    3. Gathering the Data
    4. Analyzing the Data

    View Slide

  5. Frontend Performance Data – Existing Tools
    WebPagetest.org
    John Riviello – The Truth Behind Your Web App’s Performance
    5

    View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. View Slide

  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

    View Slide

  12. View Slide

  13. "RUM" by Tom B is licensed under CC BY-NC-SA 2.0

    View Slide

  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

    View Slide

  15. Frontend Performance Data – Existing Tools
    https://www.pingdom.com/
    John Riviello – The Truth Behind Your Web App’s Performance
    15

    View Slide

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

    View Slide

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

    View Slide

  18. Frontend Performance Data – Existing Tools
    http://newrelic.com/
    John Riviello – The Truth Behind Your Web App’s Performance
    18

    View Slide

  19. http://docs.newrelic.com/docs/new-relic-browser/page-load-timing-process

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  23. Frontend Performance Data – Existing Tools
    https://ruxit.com/
    John Riviello – The Truth Behind Your Web App’s Performance
    23

    View Slide

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

    View Slide

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

    View Slide

  26. Frontend Performance Data – Existing Tools
    http://www.appdynamics.com/
    John Riviello – The Truth Behind Your Web App’s Performance
    26

    View Slide

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

    View Slide

  28. View Slide

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

    View Slide

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

    View Slide

  31. Frontend Performance Data – Existing Tools
    http://www.akamai.com/
    John Riviello – The Truth Behind Your Web App’s Performance
    31

    View Slide

  32. http://www.akamai.com/html/resources/real-user-monitoring.html

    View Slide

  33. 1. Existing Tools
    2. The Data You Care About
    3. Gathering the Data
    4. Analyzing the Data

    View Slide

  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

    View Slide

  35. View Slide

  36. View Slide

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

    View Slide

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

    View Slide

  39. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

  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…”

    View Slide

  46. Consider what other unique
    factors in your app may
    impact performance

    View Slide

  47. 1. Existing Tools
    2. The Data You Care About
    3. Gathering the Data
    4. Analyzing the Data

    View Slide

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

    View Slide

  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…  
     
     

    View Slide

  50. View Slide

  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)

    View Slide

  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  

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  56. View Slide

  57. View Slide

  58. Browser Support

    View Slide

  59. View Slide

  60. View Slide

  61. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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  

    View Slide

  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  

    View Slide

  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  

    View Slide

  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"  

    View Slide

  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  

    View Slide

  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"  

    View Slide

  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  
     

    View Slide

  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  
     

    View Slide

  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  
     

    View Slide

  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  
     

    View Slide

  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  
     
     

    View Slide

  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  
     

    View Slide

  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  
         

    View Slide

  79. 1. Existing Tools
    2. The Data You Care About
    3. Gathering the Data
    4. Analyzing the Data

    View Slide

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

    View Slide

  81. Average Response Times
    are for
    Average Products

    View Slide

  82. 99th
    PERCENTILE
    (at a minimum)

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  92. Recap

    View Slide

  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

    View Slide