Performance Monitoring for the New Front End

4,769 views

Published on

Performance Monitoring for the New Front End

  1. 1. PerformanceMonitoring for theNew Front EndBy Emily Nakashima, @eanakashima& Rachel Myers, @rachelmyersbit.ly/ostrichandyak
  2. 2. Aka: MonitoringSingle-Page AppPerformance
  3. 3. Aka: SayGoodbye tothe Ostrich.
  4. 4. Aka: SayGoodbye tothe Ostrich.
  5. 5. The AgendaI. Why Performance?II. Burying our Head in the SandIII.Epic Performance MonitoringYak ShaveIV.The Future
  6. 6. I. WhyPerformance?bit.ly/ostrichandyak
  7. 7. Most Performanceis in the Front EndBack end Front end
  8. 8. Slow Pages Hurt
  9. 9. Slow Pages Hurt• Bing: 2s = ➡4.3% revenue/user
  10. 10. Slow Pages Hurt• Bing: 2s = ➡4.3% revenue/user• Google: 400ms = ➡.59% searches/user
  11. 11. Slow Pages Hurt• Bing: 2s = ➡4.3% revenue/user• Google: 400ms = ➡.59% searches/user• Yahoo: 400ms = ➡5-9% traffic
  12. 12. Fast Pages Help
  13. 13. Fast Pages Help• Mozilla:
  14. 14. Fast Pages Help• Mozilla:• ➡2.2s = 15.4% Firefox downloads (+60M)
  15. 15. Fast Pages Help• Mozilla:• ➡2.2s = 15.4% Firefox downloads (+60M)• Shopzilla:
  16. 16. Fast Pages Help• Mozilla:• ➡2.2s = 15.4% Firefox downloads (+60M)• Shopzilla:• conversion 7 - 12%
  17. 17. Fast Pages Help• Mozilla:• ➡2.2s = 15.4% Firefox downloads (+60M)• Shopzilla:• conversion 7 - 12%• 2x sessions from Search Engine Marketing
  18. 18. Cumulative andLasting Effects
  19. 19. Cumulative andLasting Effects• eBay:
  20. 20. Cumulative andLasting Effects• eBay:• Beginning of experiment: ➡.44% searches
  21. 21. Cumulative andLasting Effects• eBay:• Beginning of experiment: ➡.44% searches• End of experiment:➡.76% searches
  22. 22. Cumulative andLasting Effects• eBay:• Beginning of experiment: ➡.44% searches• End of experiment:➡.76% searches• After correction: ➡.21% searches
  23. 23. Cumulative andLasting Effects• eBay:• Beginning of experiment: ➡.44% searches• End of experiment:➡.76% searches• After correction: ➡.21% searches• Strangeloop:
  24. 24. Cumulative andLasting Effects• eBay:• Beginning of experiment: ➡.44% searches• End of experiment:➡.76% searches• After correction: ➡.21% searches• Strangeloop:• Took 6 weeks for experiment group visitsto recover
  25. 25. Why Performance:The bottom line.
  26. 26. II. Burying ourHead in the Sand.
  27. 27. dinosaurs partying with cake and a new relic dashboard!
  28. 28. dinosaurs partying with cake and a new relic dashboard!
  29. 29. 12 bijillion
  30. 30. Backbone: theOstrich KillerScreenshot of tablet site
  31. 31. Backbone: theOstrich KillerScreenshot of tablet site
  32. 32. dinosaurs partying with cake and a new relic dashboard!
  33. 33. dinosaurs partying with cake and a new relic dashboard!
  34. 34. A Diagnostic Slide• Do you load content with ajax?• Do you <3 any of these buzzwords?Ember / Backbone / Angular / whatever-mvcTurbolinks in Rails4pjax/hijaxpushState
  35. 35. III. EpicPerformanceMonitoringYak Shave
  36. 36. Our old tools• YSlow / PageSpeed Insights• New Relic• LogNormal• WebPageTest
  37. 37. YSlow / PageSpeed
  38. 38. New Relic
  39. 39. New Relic
  40. 40. LogNormal
  41. 41. LogNormal
  42. 42. LogNormal
  43. 43. WebPageTest
  44. 44. WebPageTest
  45. 45. WebPageTest
  46. 46. Nope.
  47. 47. New things to track• Feature load• “Page” load• Unresponsiveness (jank)
  48. 48. New things to track• { featureName: loadTime }• { pageName: loadTime }• [ timestamp, timestamp, timestamp... ]
  49. 49. Surprise tools tothe rescue.• Google Analytics• Circonus
  50. 50. Google Analytics
  51. 51. Google Analytics
  52. 52. Google Analytics
  53. 53. Google AnalyticsThe code to add tracking can be fairlystraightforward:_gaq.push([‘_trackTiming’,category, variable, time,opt_label, opt_sample]);
  54. 54. Circonus
  55. 55. Circonus
  56. 56. All together
  57. 57. Feature load
  58. 58. Feature loadTrackTiming = function(category, feature) {  this.category = category;  this.feature = feature;  this.startTime = new Date().getTime();  this.endTime = null;  return this;};TrackTiming.prototype.startTime = new Date().getTime(); // shared startTimeTrackTiming.prototype.setEnd = function() {  this.endTime = new Date().getTime();  return this;};
  59. 59. Feature loadTrackTiming.prototype.sendFeatureTiming =function() {var time = this.endTime - this.startTime;var twoMinutes = 1000 * 60 * 2;if (time < twoMinutes && time > 0) {window._gaq.push([_trackTiming,this.category, this.feature, time]);}return this;};var tt = new TrackTiming(); // init$(‘#myImg’).on(load, function() {tt.setEndTime().sendFeatureTiming();});
  60. 60. “Page” load
  61. 61. “Page” load• Composed of many features.• “Page” is loaded is called whensendFeatureTiming has been called for eachfeature.
  62. 62. “Page” loadTrackTiming.prototype.sendPageTiming =function(pageName) {var time = this.endTime - this.startTime;window._gaq.push([_trackTiming,custom_timings, pageName, time]);};// ... set up feature tracking here ...$.when(trackTiming1, trackTiming2).done(function() { tt.sendPageTiming(); }); // resolves when both timings are done
  63. 63. Unresponsiveness
  64. 64. Unresponsiveness
  65. 65. Unresponsiveness• Hardest to manage observer effects.• Strategy: look for moments when thebrowser isn’t free to take orders.• Use setTimeout to set timestamps, andsee how far apart they fall.
  66. 66. Unresponsivenessvar measurements = [];var now = new Date();var checkTime = function(measurements) {var newNow = new Date();measurements.push(newNow - now);now = newNow;setTimeout(checkTime,300);};// collects an array of times:// measurements = [357,300,300,424,404,300]
  67. 67. IV. The Future
  68. 68. Recap: newthings to track• Feature load• “Page” load• Unresponsiveness (jank)
  69. 69. Feature load
  70. 70. “Page” load// We modified our backbone app to always// call beforeRoute & afterRoute callbacks,// a low-config way to tracking loading.var beforeRoute = function() {tt.resetPageTiming();};var afterRoute = function() {var currentPage = window.location;tt.sendPageTiming(currentPage);};
  71. 71. Unresponsiveness
  72. 72. Thanks!@eanakashima & @rachelmyersbit.ly/ostrichandyak

×