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
