1. Debugging Front-end Performance
Tim Kadlec & Pat Meenan
June 20-21, 2016 at Velocity Conference (#velocityconf)

2. Measuring Performance

3. velocityconf.com/velocity2011/public/schedule/detail/18039

4. Synthetic Testing

5. velocityconf.com/velocity2011/public/schedule/detail/18039
Active Testing
Consistent results
Good for detecting and diagnosing issues that are 100% repeatable and on pages you are monitoring
Lots of detail
Availability monitoring
Not representative of actual end-user performance
Usually tested from data centers
Sometimes co-located with CDN provider equipment
velocityconf.com/velocity2011/public/schedule/detail/18039

7. Bandwidth/Latency Impact
(Fixed 60ms RTT)
(Fixed 5Mbps Bandwidth)

8. US Broadband Latency

10. DSL – Back-End: 17%
Backbone – Back-End: 52%

11. Chrome Dev Tools

12. Network Link Conditioner
OSX Lion + XCode
Cable, DSL, 3G, Edge, WiFi and Custom
osxdaily.com/2011/08/10/simulate-internet-connectivity-bandwidth-speeds-network-link-conditioner/

13. Facebook ATC

14. Synthetic Browsers Know HOW your active testing is done
Some only test the base page
Synthetic browsers usually not reflective of real browser
Real browser testing
Connectivity (backbone, last-mile)
Synthetic Browser: 447 requests
IE 8: 241 requests

15. Mobile Devices Vs Emulation
MotoG – 47s
Emulated MotoG – 26s

16. Gaming Synthetic Testing

17. Real User Measurement (RUM)

18. velocityconf.com/velocity2011/public/schedule/detail/18039
Real User Measurement
Full coverage on all pages visited by users
Real performance information for end-user experience
No availability monitoring
No competitive reference
Limited detail
… but getting better
velocityconf.com/velocity2011/public/schedule/detail/18039

19. Navigation Timing IE 9+/Edge Chrome Firefox Opera Safari 8+ Android 4+
window.performance.timing
IE 9+/Edge
Chrome
Firefox
Opera
Safari 8+
Android 4+
Safari iOS 9+
UC Browser

20. Resource Timing window.performance.getEntriesByType("resource");
IE 10+/Edge
Chrome
Firefox
Opera
Safari 8+
Android 4.4+
Safari iOS 9+
UC Browser
Timing for every network-loaded resource

21. velocityconf.com/velocity2011/public/schedule/detail/18039
User Timing
performance.mark()
performance.measure()
velocityconf.com/velocity2011/public/schedule/detail/18039

26. Soasta mpulse

27. Soasta mpulse

28. Newrelic

29. Application Performance Measurement (APM)

30. Commercial

31. NewRelic

32. Access Logs FTW! Tons of “free” data: Add metrics as URL query params
Timestamp
Region (IP Lookup)
ISP (IP Lookup) OS
Browser
Mobile Device
Page (Referer)
Add metrics as URL query params

33. Roll your own reporting
codeascraft.com/2011/02/15/measure-anything-measure-everything/

34. Measuring the Visual Experience
“SpeedIndex”

35. Twitter end of activity (8.2s)
When is “done”
Twitter onLoad (2.4s)
Twitter end of activity (8.2s)

36. 2 Pages, Identical Performance

37. Start Render
Identical

38. Load Time
Identical

39. Last Visual Change
Identical

40. Visual Completeness

42. sites. google. com/a/webpagetest
sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index

44. Amazon vs Twitter

46. WebPageTest

48. Divining Waterfalls

49. Poor Caching

50. Slow Back-End

51. Base Page Redirect

52. Slow Base Page Redirect

53. Resource Errors

54. Disabled Keep-Alive

55. Slow, Blocking Resource

56. Large Resources

57. Bandwidth Constrained

58. Slow DOM Content Loaded Handler

59. Lots of Requests

60. Slow Initial Paint

61. Javascript Execution Constrained

62. Thank You! Tim Kadlec (@tkadlec) & Pat Meenan (@patmeenan)
June 20-21, 2016 at Velocity Conference (#velocityconf)
Icons courtesy of The Noun Project