Presentation from the 2016 Velocity training on debugging front-end performance

1. DEBUGGING
FRONT-END PERFORMANCE
Tim Kadlec (@tkadlec) & Pat Meenan (@patmeenan)
June 20-21, 2016 at Velocity Conference (#velocityconf)

2. MEASURING
PERFORMANCE

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

4. Synthetic Testing

5. • Consistent results
o 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
ACTIVE TESTING
velocityconf.com/velocity2011/public/schedule/detail/18039

7. BANDWIDTH/LATENCY IMPACT
www.belshe.com/2010/05/24/more-bandwidth-doesnt-matter-much/
(Fixed 60ms RTT) (Fixed 5Mbps Bandwidth)

8. US BROADBAND LATENCY
www.fcc.gov/document/measuring-broadband-america-report-consumer-broadband-performance-us

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

11. CHROME DEV TOOLS

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

13. http://facebook.github.io/augmented-traffic-control/
FACEBOOK ATC

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

15. MOBILE DEVICES VS EMULATION
MotoG – 47s
Emulated MotoG – 26s

16. GAMING SYNTHETIC TESTING

17. Real User
Measurement (RUM)

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

19. NAVIGATION TIMING
www.w3.org/TR/navigation-timing/
window.performance.timing
IE 9+/Edge
Chrome
Firefox
Opera
Safari 8+
Android 4+
Safari iOS 9+
UC Browser

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

21. performance.mark()
performance.measure()
USER TIMING
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. • Tons of “free” data:
o Timestamp
o Region (IP Lookup)
o ISP (IP Lookup)
o OS
o Browser
o Mobile Device
o Page (Referer)
• Add metrics as URL query params
ACCESS LOGS FTW!

33. ROLL YOUR OWN REPORTING
codeascraft.com/2011/02/15/measure-anything-measure-everything/

34. Measuring the Visual
Experience
“SpeedIndex”

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