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

John Riviello

May 28, 2014
Tweet

More Decks by John Riviello

Other Decks in Technology

Transcript

  1. The Truth About Your

    Web App’s Performance
    John Riviello - @JohnRiv
    JSConf - May 28, 2014

    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
    http://macbre.github.io/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" (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/)

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  22. View Slide

  23. View Slide

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

    View Slide

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

    View Slide

  26. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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…  
     
     

    View Slide

  37. View Slide

  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)

    View Slide

  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  

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  43. View Slide

  44. View Slide

  45. Browser Support

    View Slide

  46. View Slide

  47. View Slide

  48. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  54. Average Response Times
    are for
    Average Products

    View Slide

  55. 99th
    PERCENTILE
    (at a minimum)

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  65. Recap

    View Slide

  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

    View Slide