Slides from my Jfokus 2013 presentation. (Demos not included.) So, your web application is slow. You read all the books, follow all advices, but users are still complaining. What now? It turns out that there are really good tools out there to help you, whether your problem is slow loading third party widgets, badly performing javascript or heavy paint times for DOM elements. But which one is right for you? This hands on session will give guide help you assemble your own toolbox with the the different (mostly free) tools available for analyzing and troubleshooting web performance. You'll learn what you can expect from high level tools that measure page load time through synthetic or real user monitoring, down to low level javascript profiling and graphic rendering. We'll dive straight into the advanced parts of WebPagetest, Chrome Dev Tools, Dynatrace Ajax Edition and others, and you'll also get to know how to do most of this on actual mobile devices.

1. THE WEB
PERFORMANCE
TESTING TOOLBOX
Tobias Järlund
@jarlund

2. YSLOW PAGESPEED

3. maintaining a
LOADING
and RESPONSIVE
RENDERING UI

4. LOADING AND
RENDERING

5. the return of the
WATERFALL
development process

9. WEBPAGETEST
www.webpagetest.org

12. DNS FIRST BYTE
CONNECTION DOWNLOAD

13. Avoid
STAIRS

14. Mind the
GAP

18. setViewportSize
320
480
navigate
http://www.jfokus.se/
setDOMElement
id=fb-­‐root
navigate
http://www.jfokus.se/
block
facebook
twitter
navigate
http://www.jfokus.se/

22. RESTFUL API!
/runtest.php?f=xml&location=Stockholm&url=http://www.jfokus.se/&k=mykey
...with a node.js module

23. SHOWSLOW.COM GTMETRICS.COM

24. Real user
MONITORING

25. NAVIGATION TIMING API
Supported everywhere except Safari and Opera

27. GOOGLE ANALYTICS

29. AVERAGES
vs
PERCENTILES

32. DO IT YOURSELF
Boomerang
https://github.com/lognormal/boomerang/

33. THE CRITICAL PATH
Pagespeed online

39. frontend
SPOF
Single Point Of Failure

43. SPOF-O-MATIC
SPOF-O-MATIC

44. SPOF-O-MATIC
SPOF-O-MATIC

46. MAINTAIN A
RESPONSIVE UI

47. Dynatrace
AJAX
edition

49. Chrome
DEVTOOLS

54. Test on actual
MOBILE
devices

55. WEBPAGETEST
mobitest.akamai.com

56. IOS 6
network link conditioner
...but you need to setup your device for development in Xcode

57. REMOTE
DEBUGGING

58. DEBUGGING
Chrome on Android
https://developers.google.com/chrome-developer-tools/docs/remote-debugging

59. DEBUGGING
Safari on IOS 6
http://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/DebuggingSafarioniPhoneContent/DebuggingSafarioniPhoneContent.html

60. LOADING/RENDERING
YSLOW / PAGESPEED
WEBPAGETEST.ORG
SPOF-O-MATIC
GOOGLE ANALYTICS/NEW RELIC/TORBIT/PINGDOM/GOMEZ/LOGNORMAL
BOOMERANG
PAGESPEED ONLINE: THE CRITICAL PATH
GTMETRICS.COM/SHOWSLOW.COM
MAINTAIN A RESPONSIVE UI
DYNATRACE AJAX EDITION
CHROME DEVELOPER TOOLS
MOBILE
WEBPAGETEST.ORG/MOBITEST.AKAMAI.COM
CHROME (ANDROID)
SAFARI (IOS)

61. http://bloggar.aftonbladet.se/utvecklingsbloggen/
Tobias Järlund
@jarlund