Post on 16-Apr-2017
Debugging Front-end Performance
DebuggingFront-end PerformanceTim Kadlec (@tkadlec) & Pat Meenan (@patmeenan)June 20-21, 2016 at Velocity Conference (#velocityconf)
Measuring Performance
velocityconf.com/velocity2011/public/schedule/detail/18039
Synthetic Testing
Consistent resultsGood for detecting and diagnosing issues that are 100% repeatable and on pages you are monitoringLots of detailAvailability monitoringNot representative of actual end-user performanceUsually tested from data centersSometimes co-located with CDN provider equipmentActive Testingvelocityconf.com/velocity2011/public/schedule/detail/18039
Bandwidth/Latency Impactwww.belshe.com/2010/05/24/more-bandwidth-doesnt-matter-much/
(Fixed 60ms RTT)(Fixed 5Mbps Bandwidth)
US Broadband Latencywww.fcc.gov/document/measuring-broadband-america-report-consumer-broadband-performance-us
DSL Back-End: 17%
Backbone Back-End: 52%
Chrome Dev Tools
Network Link Conditioner
Cable, DSL, 3G, Edge, WiFi and Customosxdaily.com/2011/08/10/simulate-internet-connectivity-bandwidth-speeds-network-link-conditioner/OSX Lion + XCode
http://facebook.github.io/augmented-traffic-control/Facebook ATC
Know HOW your active testing is doneSome only test the base pageSynthetic browsers usually not reflective of real browserReal browser testingConnectivity (backbone, last-mile)
www.engadget.comSynthetic Browser: 447 requestsIE 8: 241 requestsSynthetic Browsers
Mobile Devices Vs Emulation
MotoG 47s
Emulated MotoG 26s
Gaming Synthetic Testing
Real User Measurement (RUM)
Full coverage on all pages visited by usersReal performance information for end-user experienceNo availability monitoringNo competitive referenceLimited detail but getting betterReal User Measurementvelocityconf.com/velocity2011/public/schedule/detail/18039
Navigation Timingwww.w3.org/TR/navigation-timing/
window.performance.timingIE 9+/EdgeChromeFirefoxOperaSafari 8+Android 4+Safari iOS 9+UC Browser
Resource Timingwww.w3.org/TR/resource-timing/
IE 10+/EdgeChromeFirefoxOperaSafari 8+Android 4.4+Safari iOS 9+UC Browserwindow.performance.getEntriesByType("resource");
Timing for every network-loaded resource
performance.mark()performance.measure()User Timingvelocityconf.com/velocity2011/public/schedule/detail/18039
Soasta mpulse
Soasta mpulse
Newrelic
Application Performance Measurement (APM)
Commercial
NewRelic
Tons of free data:TimestampRegion (IP Lookup)ISP (IP Lookup)OSBrowserMobile DevicePage (Referer)
Add metrics as URL query paramsAccess Logs FTW!
Roll your own reportingcodeascraft.com/2011/02/15/measure-anything-measure-everything/
Measuring the Visual Experience
SpeedIndex
When is done
Twitter onLoad (2.4s)Twitter end of activity (8.2s)
2 Pages, Identical Performance
Start Render
Identical
Load TimeIdentical
Last Visual ChangeIdentical
Visual Completeness
sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index
Amazon vs Twitter
WebPageTest
Divining Waterfalls
Poor Caching
Slow Back-End
Base Page Redirect
Slow Base Page Redirect
Resource Errors
Disabled Keep-Alive
Slow, Blocking Resource
Large Resources
Bandwidth Constrained
Slow DOM Content Loaded Handler
Lots of Requests
Slow Initial Paint
Javascript Execution Constrained
Thank You!Tim Kadlec (@tkadlec) & Pat Meenan (@patmeenan)June 20-21, 2016 at Velocity Conference (#velocityconf)
Icons courtesy of The Noun Project